Use Lightning Data Service – No To Apex Controller In Lightning Components

Like Standard Controllers in Visualforce, Salesforce has provided one of the exciting features in Summer 17 is Lightning Data Service.
We can retrieve a record data without writing a single piece of Apex Server side code. We need to use the new force:recordData component to achieve this.
Using this component, we can load, create, edit, or delete a record in your component without requiring Apex code. Lightning Data Service handles sharing rules and field-level security for you. In addition to not needing Apex, Lightning Data Service improves performance and user interface consistency.

Let’s understand how to use force:recordData

Loading a Record:

To load a record using lightning data service ( force:recordData ), we need specify the following:

  •  The ID of the record to load
  • Which component attribute to assign the loaded record
  • A list of fields to load

Syntax:

where,

  •  recordId – the id of the record to load.
  • layoutType
     FULL – PageLayout of the record ( If there are multiple page layouts for different record types, the pagelayout of the recordid will be taken)
     MINI – Compact Layout
  • targetRecord – where to store the result
  • targetFields – A simplified view of the fields in targetRecord. We generally use this object to refer the fields in our markup
  • targetError – If any error is encountered, it stores the error message.
  • fields – Specifies which of the record’s fields to query.

Either fields or layoutType attribute is needed. If you specify the layoutType, all the fields mentioned in layoutType (FULL or MINI) will be queried. If you specify array of fields ( field attribute ), only the specified fields will be queried.

Saving a record,

To save a record using Lightning Data Service, call saveRecord on the force:recordData component, and pass in a callback function to be invoked after the save operation completes.

In short, we need to do the following to save a record,

  1. Load the record in Edit mode using force:recordData to get the latest version of record.  (All the updates to the record are hold in Edit mode.)
  2. call saveRecord and pass in a callback function to be invoked after the save operation (this callback can be optional)

you need to find the aura:id of force:recordData and call saveRecord to update the record. If we want to perform any operation or to check the status of save operation, pass in a callback function and check the status.

If there is a confusion or not able to understand, I am sure the following example will clear all your doubts.

Example of Lightning Data Service :

Use Case: Create a Lightning Quick Action to display Account Name, Industry and Description using Lightning Data Service. User should be able to update Account Name, Industry and Description and display the records.

What we need to achieve this ?
  1. Lightning Component (typically 3 components)
    1. LightningDataServiceExample – To load the record
    2. LightningEditComponent – To edit the record
    3. LightningContainer  – To toggle base and edit components
  2. Lightning Quick Action on Account Object

Step 1:

Create a component with name LightningDataServiceExample.cmp

LightningDataServiceExampleController.js

Step 2: Create a component to update with name LightningDataServiceEdit

LightningDataServiceEdit.cmp

Add below code in controller  – LightningDataServiceEditController.js

Step 3: Now add the container component to toggle above two components ( base view and edit view ).

LDSContainer.cmp

Step 4: Create a lightning quick action add to the page layout.

( If you are new, check this on how to create a quick action )

Lightning Data Service Quick Action

Step 5: Test the component.

Refresh the Account page and select any record. You will see the magic.

Lightning Data Service

Of course, you can apply better styling to look much better and can add toast message to notify users on update and what not.

Limitations:

  • Lightning Data Service is only available in Lightning Experience and Salesforce1.
  • We can only perform primitive DML operations (create, read, edit and delete ) on only one record. Bulk operations are not supported.
  • Unfortunately, all the objects are not supported, Check this for the list of supported objects.
  • Lightning Data Service is available as a beta. Lightning Data Service isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements.

That’s it for now. Happy Coding !! Cheers !!

Resources:

Lightning Developer Guide

About The contributor: 

(Visited 31,203 times, 1 visits today)

24 thoughts on “Use Lightning Data Service – No To Apex Controller In Lightning Components”

  1. Piyush,

    I see that you are passing current view to curView within the component. But only ‘curView’ is modified within the component. How does it go back and change the currentView within the application container which toggles between your two component. I don’t see any application event or anything being fired to go back and do this. Can you pls clarify

    Reply
  2. Piyush,

    I posted a comment earlier and it was deleted. Why? I asked how come the curView that’s changed in the component is reflected in the ‘currentView’ attribute of the container component. Can you pls clarify? I don’t see any events updating it. Would appreciate your feedback.

    Reply
  3. Hi,

    we have a challenge using action in lighting component. Is it possible to create a button which is visible only in salesforce lightening (should not display in classic). I need to write some functionality in backend some logic should be executed.

    Reply
  4. Hi,

    Can you please explain about how curView & currentView is  changing the value of child component. Because I cant see any assignment of curView in child components , it is only declared as attrbiute and also on click of cancel button it is setting value of curView then how it is reflecting to currentView value of parent component.

     

    Reply
  5.  

     

     

     

    I am getting below two errors while adding the components to the lightning app builder.

    Error in $A.getCallback() [Specified layoutType not supported or invalid: Full]

    Action failed: force:record$controller$init [<force:record> – method reloadRecord is not compatible with mode edit]

     

     

    Reply
  6. Hi,
    So, I’m trying to create new record using force:RecordEditForm. After hitting submit/save function, I’m checking the recordId of newly created record but I’m getting ‘Undefined’.

    Not sure, where I’m doing wrong:

    doSave : function(component, event, helper) {

    component.find(“recordEditForm”).submit();
    alert(“Id : “+component.find(“recordEditForm”).get(“v.recordId”));
    }

    Reply
  7. recordData work if i change a record field but by back end, for example, the field change when a callout finished? then the lightning component can identified this change ?

    Reply

Leave a Comment