Lightning Data Service: Loading Data without Apex

We can use Lightning Data Service to load, create, edit, or delete a record in Lightning component without using Apex code. Lightning Data Service handles Sharing rules and all other security stuff for us. As we no longer need apex for basic operations so it improve overall performance of the system.

Its a type of Standard controller for Lightning. For read only access we don’t need any code while for the Update and other DML operations JavaScript controllers is only required. It’s built on highly efficient local storage that’s shared across all components that use it. Records loaded in Lightning Data Service are cached and shared across components.

lds_architecture

Components accessing the same record see significant performance improvements, because a record is loaded only once, no matter how many components are using it. Shared records also improve user interface consistency. When one component updates a record, the other components using it are notified, and in most cases, refresh automatically.

Loading a Record

Loading a record is the simplest operation in Lightning Data Service. We can accomplish it entirely in markup. To load a record using Lightning Data Service, we need to add the force:recordData tag to our component. In the force:recordData tag, specify the ID of the record to be loaded, a list of fields, and the attribute to which to assign the loaded record. force:recordData must specify the following.

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











<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading_label">{!v.simpleRecord.Name}</p>

<h1 class="slds-page-header__title slds-m-right_small

slds-truncate slds-align-left">{!v.simpleRecord.BillingCity},

{!v.simpleRecord.BillingState}</h1>
</div>
<!-- Display Lightning Data Service errors, if any -->


<div class="recordError">



{!v.recordError}

</div>




Saving a Record

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

The Lightning Data Service save operation is used in two cases.

  • To save changes to an existing record
  • To create and save a new record

Load a Record in EDIT Mode

To load a record that might be updated, set the force:recordData tag’s mode attribute to “EDIT”. Other than explicitly setting the mode, loading a record for editing is the same as loading it for any other purpose. By default mode attribute is set to true.

Call saveRecord to Save Record Changes

To perform the save operation, call saveRecord on the force:recordData component from the appropriate controller action handler. saveRecord takes one argument—a callback function to be invoked when the operation completes. This callback function receives a SaveRecordResult as its only parameter. SaveRecordResult includes a state attribute that indicates success or error, and other details we can use to handle the result of the operation.


ldsSave.cmp











<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading_label">Edit Record</p>

<h1 class="slds-page-header__title slds-m-right_small

slds-truncate slds-align-left">{!v.simpleRecord.Name}</h1>
</div>
<!-- Display Lightning Data Service errors, if any -->


<div class="recordError">



{!v.recordError}

</div>


<!-- Display an editing form -->

			

			



 

As we need to save the record so for this we need to write few lines in Javascript controller


ldsSaveController.js

({

handleSaveRecord: function(component, event, helper) {

component.find("recordHandler").saveRecord($A.getCallback(function(saveResult)

{

// NOTE: If we want a specific behavior(an action or UI behavior) when

this action is successful

// then handle that in a callback (generic logic when record is changed

should be handled in recordUpdated event handler)

if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {

// handle component related logic in event handler

} 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));

}

}));

},

/**

* Control the component behavior here when record is changed (via any component)

*/

handleRecordUpdated: function(component, event, helper) {

var eventParams = event.getParams();

if(eventParams.changeType === "CHANGED") {

// get the fields that changed for this record

var changedFields = eventParams.changedFields;

console.log('Fields that are changed: ' + JSON.stringify(changedFields));

// record is changed, so refresh the component (or other component logic)

var resultsToast = $A.get("e.force:showToast");

resultsToast.setParams({

"title": "Saved",

"message": "The record was updated."

});

resultsToast.fire();

} else if(eventParams.changeType === "LOADED") {

// record is loaded in the cache

} else if(eventParams.changeType === "REMOVED") {

// record is deleted and removed from the cache

} else if(eventParams.changeType === "ERROR") {

// there’s an error while loading, saving or deleting the record

}

}

})

In the next post we will cover the remaining point to delete the record and handle record change events. If you want to add anything let me know in comments section. Happy programming 🙂

Advertisements

One thought on “Lightning Data Service: Loading Data without Apex

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.