Salesforce is introducing Lightning Data Service Beta version in Summer ’17 release. This will prove to be a very useful and exciting feature for the developers. Consider Lightning Data Service a response to Standard (Set) Controller for VisualForce pages. Lightning Data Service allows to load, create, edit, or delete a record in your component without requiring Apex code as well as handles sharing rules and field-level security for you. Additionally Lightning Data Service improves performance and user interface consistency.
Problem 1: Data Reuse across different component.
Let us consider a scenario where we have 3 components and each component is making an independent call to the server to perform the CRUD(Create, Read ,Update and Delete) operation on the same set of data.
In such scenario, you would have Apex code being called separately for each component creating overhead for the system.
Problem 2: Data Inconsistency
It is possible that the field is updated but because of some issue it is not reflected everywhere.
Lightning Data Services to the rescue!!(Well Almost!)
Salesforce brings Lightning Data Service to the rescue (I said almost because it is in Beta state, hence we will have to wait until it goes live and get the finalized version. But don’t let it dampen your spirits!). Consider Lightning Data Service to be the Standard (Set) Controller for your Lightning Components.
With the LDS a consolidate request is made and stored in a highly efficient cache, the caching is shared across components on the users’ browser, so server requests are not made on cache hits. LDS further optimizes the cache, by only storing the fields that have been requested
When a component updates the viewed record, all the other components using that record on the page are notified, and in most cases refreshed automatically. Additionally, it also supports the parent-child relationship between SObjects.
This retains UI consistency and eliminates the need for a programmatic refresh.
Benefits of LDS
- No Apex or SOQL.
- Performance boost from client cache.
- Data available offline.
- Data consistency across components.
- Automatic record refresh from server.
- Automatic notification when record changes.
Lightning Data Services consist of following:
- force:recordPreview tag
- getNewRecord() method
- saveRecord() method
- deleteRecord() method
- recordUpdated Event
- changeType event.
I am excited to try my hands on with LDS. Here I am creating a lightning component using LDS to edit the accounts record.
Step 1: Create ContactEdit.cmp component
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction"
access="global">
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="recordInfo" type="Object" />
<aura:attribute name="simpleRecord" type="Object"/>
<aura:attribute name="curView" type="String" />
<force:recordData aura:id="recordHandler"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.recordInfo}"
targetFields="{!v.simpleRecord}"
mode="EDIT"
/>
<div>
<div>
<lightning:input type="text" label="Department" value="{!v.simpleRecord.Department}" />
</div>
<div>
<lightning:input type="text" label="Phone" value="{!v.simpleRecord.Phone}" />
</div>
<div>
<lightning:input type="text" label="Title" value="{!v.simpleRecord.Title}" />
</div>
<div>
<lightning:button variant="brand" label="Save" onclick="{!c.saveRecordCntrlr}"/>
<lightning:button label="Cancel" onclick="{!c.cancelSaveRecord}"/>
</div>
</div>
</aura:component>
Step 2: Create ContactEditController.js
| ({ saveRecordCntrlr : function(component, event, helper) { component.find(“recordHandler”).saveRecord($A.getCallback(function(saveResult) { if (saveResult.state === “SUCCESS” || saveResult.state === “DRAFT”) { component.set(“v.curView”, “baseView” ); } else if (saveResult.state === “INCOMPLETE”) { console.log(“User is offline, device doesn’t support drafts.”); } else if (saveResult.state === “ERROR”) { console.log(‘Problem saving record, error: ‘ + JSON.stringify(saveResult.error)); } else { console.log(‘Unknown problem, state: ‘ + saveResult.state + ‘, error: ‘ + JSON.stringify(saveResult.error)); } })); }, cancelSaveRecord : function(component, event, helper){ component.set(“v.curView”, “baseView” ); } }) |
Step 3: Go to Setup -> Object Manager -> Contacts -> Buttons Links and Action and create a quick action and select ContactEdit component and click save.
Now we can see the output below
Like always your feedback is invaluable. Please keep posting your questions or concerns. I will try to put more graphics for clarity.