Lightning Data Service

Introduction

• Lightning data service is a way to create,edit and delete sobject records from your aura component without using any apex code.
• Lightning data service is an alternative to the visualforce standard controller in the aura framework.
• Lightning data service handles sharing rules, field and object level permissions automatically, so we don’t have to handle that explicitly in our aura component markup and backend.
• Lightning data service is implemented by the following four standard aura components :
  • lightning:recordForm
  • lightning:recordViewForm
  • lightning:recordEditForm
  • force:recordData

lightning:recordForm

• The ‘lightning:recordForm’ component is used to create and edit a sObject record without needing apex code.
• This form provides all the object fields from the object’s default page layout.
• This form provides a standard Save button which inserts or updates a record to the database.

Let’s look at an example :

<aura:component >
	
    <lightning:recordForm objectApiName="Account"
			        layoutType="Full"
                          columns="2"/>
    
</aura:component>

This is the syntax for using the lightning:recordForm component, with these attributes being passed to the component :

• objectApiName : The API name of the object which we want to create/edit.
• layoutType : Possible values are : Compact, Full. When creating a new record, only the full layout is supported in this attribute.
• columns : The number of columns to show on the form

Let’s save this aura component and call it ‘LDS’. Create an app to show this component like this,

<aura:application extends="force:slds">
	
    <c:LDS/>
</aura:application>

The application must extend the ‘force:slds’ interface for loading the standard SLDS css library. This is the output when we preview this application :

All the fields present on the account layout are shown in our form. And there is a standard Save and Cancel button.

If we click the Save button and create an account record, the form changes to this,

All the fields are now disabled because the form changes to view mode, you can edit any field and then save to update the original account record.

There are a lot of different ways to use this component, here are a few of those ways :

• Opening the form in a read only mode.
• Loading an existing record in the form by using the ‘recordId’ attribute.
• Passing field names to just display those fields in the form instead of all the sObject layout fields.
• Calling a custom javascript on the load of the component or on the standard Save button.

More information regarding implementing these can be found in the standard documentation located here.

lightning:recordViewForm

• This standard aura component is used to view a record in a read only format, we need to supply a record id and the component pre-populates all the data automatically without needing an apex code.
• The recordViewForm component allows more customisation than the recordForm component with the ability to load specified fields only which are mentioned in the aura component markup with the lightning:outputField tag.

Here is an example of this in action :

<aura:component >
	
    <lightning:recordViewForm recordId="0012x0000057q49" objectApiName="Account">
        <div>
            <lightning:outputField fieldName="Name" />
            <lightning:outputField fieldName="Description" />
        </div>
    </lightning:recordViewForm>
    
</aura:component>

In the markup, we specify the record to load by the recordId attribute, along with the object via the objectApiName attribute. And then lastly, for each field that we need to load in the form, we need to use a lightning:outputField tag with specifyieng the API name of the field in the fieldName attribute of this tag.

This is the output when used in an app :

lightning:recordEditForm

• The lightning:recordEditForm tag is used to load a record and allow editing the loaded sObject record.
• This standard aura component is an editable version of the lightning:recordViewForm component.
• This component allows adding both read only fields via lightning:outputField tag and input fields with the lightning:inputField.
• This allows us to combine read only and input fields in the same form.
• We need to create a lightning:button with the type as submit to call the standard save (insert/update) functionality in this component.
• We can call a custom javascript method as well on the click on this save button via the onsubmit attribute on the form component which will point to a custom javascript method in our aura component.
• The lightning:messages tag is used to display the error messages or success messages returned from the standard save functionality.

Here is an example of this component :

<aura:component >
    
    <lightning:recordEditForm recordId="0012x0000057q49" objectApiName="Account">
        <lightning:messages />
        <<ightning:outputField fieldName="Id" />
        <lightning:inputField fieldName="Name" />
        <lightning:inputField fieldName="Description"/>
        <lightning:button type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
    
 </aura:component>

The output of this component is as follows :

force:recordData

• The force:recordData component is used to load,create or save a record into your custom aura component.
• We should use this if we want to just leverage the Lightning data service to load/save a record in your custom aura component without using apex code.
• This component can pull in all the fields on the object’s layout by using the layoutType as Full, or we can customise and fetch just a selected few fields as well.
• The targetFields attribute on this component must point to an sObject type aura attribute which will store the returned record.

Here is the component in action :

<aura:component >
    
    <aura:attribute name="accRecord" type="Account"/>
    
    <force:recordData aura:id="recordLoader"
                      recordId="0012x0000057q49"
                      fields="Name,Description,Phone,Industry"
                      targetFields="{!v.accRecord}"
                      />
    
    Name : {!v.accRecord.Name} <br/>
    Description : {!v.accRecord.Description}
    
</aura:component>

This results in the account result being populated in the accRecord attribute, and then we able to see the populated values in the markup, which can be seen in the output below :