Exercise 6Using lightning:recordForm

Objectives

• Use lightning:recordForm to view and update a record

Step 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:

    <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>
   

4. Save the file.
5. Click on the Setup icon in the upper righthand corner and choose Edit Page.
6. Add the Broker Card component to the righthand column above the Similar Properties component.
7. Click the Save button, and then click the Back link to return to the Property Record page.

Step 2 - Add a lightning:recordForm

1. In the Developer Console, add the following code to the BrokerCard component on line 12:

    <lightning:recordForm aura:id="brokerForm"
                              recordId="{!v.property.Broker__c}"
                              objectApiName="Broker__c"
                              layoutType="Full" />
   

2. Save the component and refresh the Property Record page.

Step 3 - Change the recordForm mode

1. In the Developer Console, add the following attribute to the lightning:recordForm:

    mode="View"
   

2. Save the file and refresh the Property Record page.
3. Click any field to edit it, then click Save.

Step 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.

Step 5 - Limit the fields to display

1. In the Developer Console, add the following attribute to the component:

    <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c" />
   

2. Remove layoutType="Compact" from the recordForm.

3. Add the following to the recordForm:

    fields="{!v.brokerFields}"
    columns="2"
   

4. Save the component and refresh the Property Record page.

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

BrokerCard

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>