Start tracking your progress
Trailhead Home
Trailhead Home

View Record Data with lightning:recordForm

Part 1: Create a Broker Card

  1. In the Developer Console, create a new Lightning component with the name BrokerCard.
  2. Click the Lightning Record Page checkbox, then click Submit.
  3. Add the following code to the component.
  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. Save the file.
  6. Click the Setup icon Setup in the upper right-hand corner and choose Edit Page.
  7. Add the Broker Card component to the right-hand column above the Similar Properties component.
  8. Click the Save button, and then click the Back link to return to the Property Record page.

Part 2: Add a lightning:recordForm

  1. In the Developer Console, add the following code to the BrokerCard component on line 12.
  2. <lightning:recordForm aura:id="brokerForm"
                            recordId="{!v.property.Broker__c}"
                            objectApiName="Broker__c"
                            layoutType="Full"/>
    
  3. Save the component and refresh the Property Record page.

Part 3: Change the recordForm mode

  1. In the Developer Console, add mode="View" attribute to the lightning:recordForm tag.
  2. Save the file and refresh the Property Record page.
  3. Click any field to edit it, then click Save.

Part 4: Change the Layout of the Form

  1. In the Developer Console, change the layoutType of the recordForm to Compact.
  2. Save the file and refresh the Property Record page.

Part 5: Limit the Fields to Display

  1. In the Developer Console, add the following attribute to the component.
  2. <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c"/>
    
  3. Remove layoutType="Compact" from the recordForm.
  4. Add the following attributes to the recordForm.
  5. fields="{!v.brokerFields}" columns="2"
    
  6. Save the component and refresh the Property Record page.

My component isn’t working! Check your code against the following.

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>