Lightning RecordForm - An enhanced Lightning Data Service

As always with every release Salesforce introduces bunch of new base components and this time they have "Lightning: recordForm" which suppresses using "lightning:recordEditForm and lightning:recordViewForm" separately to handle record view and edit.


Lets go ahead and put some sample code to create a Lightning Component using lightning recordForm!

RecordFormComp.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress', 'AnnualRevenue']"/>
    <div>
        <center>
            <h1><b>Lightning Record Form<br/>
                Object_Name: {!v.sObjectName} - Record_Id: {!v.recordId}
                </b>
            </h1>
        </center>
    </div>
    <div class="THIS">        
        <lightning:recordForm 
                              recordId="{!v.recordId}" 
                              objectApiName="{!v.sObjectName}"
                              fields="{!v.fieldsList}"
                              columns="2"
                              mode="Edit"
                              onsuccess="{!c.myAction}"/>
    </div>
</aura:component>

RecordFormCompController.js:

({
    myAction : function(component, event, helper) {
     var toastEvent = $A.get("e.force:showToast");  
     toastEvent.setParams({  
       "title": "Success!",  
       "message": "Record is successfully updated!",  
       "type": "success"  
     });  
     toastEvent.fire();
    }
})

RecordFormComp.css:

.THIS {
    background:white
}

Output: Once I have my component created using above and place it on my Account Lightning Page, below is what I should be able to see.....



Key Points:

  • By implementing 'force:hasSObjectName', 'force:hasRecordId' gives us the access to get sObject Name and sObject Record Id. In our above example they are related to Account Object.
  • In lightning:forceRecord we can set "Mode" parameter to 'View' or 'Edit' (these are case sensitive).
  • We used "fields" to display list of fields on the page, otherwise we can explicitly use "layoutType" to set 'Full' or 'Compact'.

  • Note: "ObjectApiName" is always required while using lightning:recordForm component.

    Reference Links:

  • Salesforce Documentation Link for RecordForm Component Reference
  • Thank you!

    Comments

    Popular posts from this blog

    Displaying Toast Message from Modal in Lightning Components

    Lightning Component to display dynamic sObject data