lightningrecordForm を使用したレコードデータの表示

パート 1: ブローカーカードを作成する

  1. 開発者コンソールで、BrokerCard という新しい名前の Aura コンポーネントを作成します。
  2. [Lightning Record Page (Lightning レコードページ)] チェックボックスをオンにして、[Submit (送信)] をクリックします。
  3. 次のコードをコンポーネントに追加します。
  4. <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="property" type="Property__c"/>
    <force:recordData aura:id="propertyRecord"
                    recordId="{!v.recordId}"
                    targetFields="{!v.property}"
                    layoutType="FULL"/>
    <lightning:card iconName="standard:user" title="{! 'Broker for ' + v.property.Name}">
        <div class="slds-p-left_large slds-p-right_medium">
        </div>
    </lightning:card>
    
  5. ファイルを保存します。
  6. 右上隅の [Setup (設定)] アイコン 設定 をクリックして [Edit Page (編集ページ)] を選択します。
  7. Broker Card コンポーネントを Similar Properties コンポーネントの上の右側の列に追加します。
  8. [Save (保存)] をクリックし、[Back (戻る)] リンクをクリックして [Property (物件)] レコードページに戻ります。

パート 2: lightning:recordForm を追加する

  1. 開発者コンソールで、次のコードを BrokerCard コンポーネントの 12 行目に追加します。
  2. <lightning:recordForm aura:id="brokerForm"
                            recordId="{!v.property.Broker__c}"
                            objectApiName="Broker__c"
                            layoutType="Full"/>
    
  3. コンポーネントを保存して、[Property (物件)] レコードページを更新します。

パート 3: recordForm モードを変更する

  1. 開発者コンソールで、mode="View" 属性を lightning:recordForm タグに追加します。
  2. ファイルを保存して、[Property (物件)] レコードページを更新します。
  3. 項目をクリックして編集し、[Save (保存)] をクリックします。

パート 4: フォームのレイアウトを変更する

  1. 開発者コンソールで、recordForm の layoutTypeCompact に変更します。
  2. ファイルを保存して、[Property (物件)] レコードページを更新します。

パート 5: 表示する項目を制限する

  1. 開発者コンソールで、次の属性をコンポーネントに追加します。
  2. <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c"/>
    
  3. recordForm から layoutType="Compact" を削除します。
  4. 次の属性を recordForm に追加します。
  5. fields="{!v.brokerFields}" columns="2"
    
  6. コンポーネントを保存して、[Property (物件)] レコードページを更新します。

コンポーネントに問題がある場合は、コードを次のコードと比較して確認してください。

BrokerCard.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="property" type="Property__c"/>
    <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c"/>
    <force:recordData aura:id="propertyRecord"
                        recordId="{!v.recordId}"
                        targetFields="{!v.property}"
                        layoutType="FULL"/>
    <lightning:card iconName="standard:user" title="{! 'Broker for ' + v.property.Name}">
        <div class="slds-p-left_large slds-p-right_medium">
            <lightning:recordForm aura:id="brokerForm"
                                recordId="{!v.property.Broker__c}"
                                objectApiName="Broker__c"
                                fields="{!v.brokerFields}"
                                columns="2"
                                mode="View"/>
        </div>
    </lightning:card>
</aura:component>
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる