Data Reuse across different component.

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"
<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"
<lightning:input type="text" label="Department" value="{!v.simpleRecord.Department}" />
<lightning:input type="text" label="Phone" value="{!v.simpleRecord.Phone}" />
<lightning:input type="text" label="Title" value="{!v.simpleRecord.Title}" />
<lightning:button variant="brand" label="Save"  onclick="{!c.saveRecordCntrlr}"/>
<lightning:button label="Cancel"  onclick="{!c.cancelSaveRecord}"/>

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.

Author: CloudFountain

We started as a side business in 1999 and have since grown to become a leading provider of IT solutions for businesses. With around 30 employees across several countries, we offer a wide range of services, including IT support, hosting, and custom software development.Over the years, we have served approximately 1000 customers, ranging from small startups to large enterprises. Our mission is to provide cutting-edge technology solutions that help our clients achieve their business goals. We pride ourselves on our exceptional customer service and attention to detail, and we work closely with each client to understand their unique needs and provide tailored solutions that meet their specific requirements.At CloudFountain, we believe that technology can be a powerful tool for growth and success. That’s why we stay on top of the latest trends and advancements in the industry, so we can provide our clients with the best possible solutions. Whether you need IT support, hosting services, or custom software development, our team of experts is here to help. Contact us today to learn more about how we can help your business succeed.