Lightning Data Services
Lightning Data Services
What is LDS :
LDS is Lightning Component that
display the data on Page in Salesforce Lightning.
Using LDS we don’t need any apex
controller to perform CRUD operation. using LDS we can increase the performance.
It also provide the way to cache the data to work offline in case user is not
connected to network. Once the connection is restored data will sync.
LDS also
handle Field Level Security and sharing rules security. Record loaded in
Lightning Data Services are stored in cache and shared between all components.Using
LDS all component performance is increase because data is loaded once and used
by many component, no need to make separate request from different-different
components . when any of the component updates
a record then other component will automatically updated with new value.
force:recordData :
This tag is must be used to load the
data in component using LDS.
Attributes
of force:recordData : recordId : Id of current page record that will be load
mode : (Edit,View) its depend on what
operation we are performing. If we want to update,create then Mode=’Edit’ else
Mode=’View’
layoutType : specify the layout type to display
record and its determine what field are included in component.
fields : specifies which fields in the
record to query.
Target Attribute :
1. targetRecord : populate with loaded record.
2. targetField : view of loaded record.
3. targetError : populate with error.
Methods :
1. saveRecord() :
insert of update the current record in force:recordData.
2. deleteRecord() : delete the current record in force:recordData.
3. getNewRecord() : load the new record instance to
insert the record of that object from force:recordData.
4. reloadRecord() : reload the current record with new data.
Keep In Mind When Using It :
i. LDS
is simple but it’s not complete replacement of apex controller.
ii. LDS
is not supported in lightning out and visualforce page. Its only for lightning.
iii. LDS
perform CRUD only on single record. It’s not supported for bulk data.
iv. In
Summer 17, release LDS used force:recordPreview
component.But now it’s completely replaced by force:recordData. Difference between force:recordPreview and force:recordData is force:recordData returns record in new shape using UI API and
targetfield is added in parameter.
v. To
update from force:recordPreview to force:recordData
is to change reference from targetRecord to targetField.
vi. If
you want to query multiple operations in one transaction then use apex
controller @AuraEnabled.
Example :
Here we are creating a component that is added on
Account detail page. It will create a new contact for current account record.
1. Create a new Record :
Lightning Component :
<aura:component
implements="flexipage:availableForRecordHome, force:hasRecordId">
<aura:attribute name="newContact"
type="Object"/>
<aura:attribute name="createContact"
type="Object"/>
<aura:attribute name="newContactError"
type="String"/>
<force:recordData
aura:id="contactRecordCreator"
layoutType="FULL"
targetRecord="{!v.newContact}"
targetFields
="{!v.createContact}"
targetError="{!v.newContactError}"/>
<aura:handler name="init"
value="{!this}" action="{!c.doInit}"/>
<div
class="Create Contact">
<lightning:card
iconName="action:new_contact" title="Create Contact">
<div
class="slds-p-horizontal--small">
<lightning:input aura:id="contactField"
label="First Name"
value="{!v.createContact.FirstName}"/>
<lightning:input aura:id="contactField"
label="Last Name" value="{!v.createContact.LastName}"/>
<lightning:button label="Save Contact"
variant="brand" onclick="{!c.handleSaveContact}"/>
</div>
</lightning:card>
</div>
<aura:if
isTrue="{!not(empty(v.newContactError))}">
<div
class="recordError">
{!v.newContactError}</div>
</aura:if>
</aura:component>
Lightning Controller :
({
doInit: function(component, event, helper)
{
console.log('changes');
component.find("contactRecordCreator").getNewRecord(
"Contact", // sObject
type (entityAPIName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec =
component.get("v.newContact");
var error =
component.get("v.newContactError");
if(error || (rec === null)) {
console.log("Error
initializing record template: " + error);
}
else {
console.log("Record
template initialized: " + rec.sobjectType);
}
})
);
},
SaveContact:
function(component, event, helper) {
component.set("v.createContact.AccountId",
component.get("v.recordId"));
component.find("contactRecordCreator").saveRecord(function(saveResult)
{
if (saveResult.state ===
"SUCCESS" || saveResult.state === "DRAFT") {
var resultsToast =
$A.get("e.force:showToast");
resultsToast.setParams({
"title":
"Saved",
"message":
"New Contact ."
});
resultsToast.fire();
} else if (saveResult.state ===
"INCOMPLETE") {
console.log("User is
offline, device doesn't support drafts.");
} else if (saveResult.state ===
"ERROR") {
console.log(JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem,
state: ' + saveResult.state);
}
});
}
})
Result :
2. Delete A record :
Here we added Delete Component on
Account Detail Page. It will Delete Current Account when we click on Delete
Button in below component.
Lightning Component :
<aura:component
implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute
name="recordError" type="String"
access="private"/>
<force:recordData
aura:id="dataRecord"
recordId="{!v.recordId}"
fields="Id"
targetError="{!v.recordError}"
recordUpdated="{!c.handleRecordUpdated}"/>
<div class="Delete
Record">
<lightning:card
iconName="delete" title="Delete Record">
<div
class="slds-p-horizontal--small">
<lightning:button label="Delete Record"
variant="destructive"
onclick="{!c.handleDeleteRecord}"/>
</div>
</lightning:card>
</div>
<aura:if
isTrue="{!not(empty(v.recordError))}">
<div
class="recordError"> {!v.recordError}</div>
</aura:if>
</aura:component>
Lightning Controller :
({
handleDeleteRecord: function(component, event, helper) {
component.find("dataRecord").deleteRecord($A.getCallback(function(deleteResult)
{
if (deleteResult.state ===
"SUCCESS" || deleteResult.state === "DRAFT") {
console.log("Record is
deleted.");
} else if (deleteResult.state ===
"INCOMPLETE") {
console.log("User is
offline, device doesn't support drafts.");
} else if (deleteResult.state ===
"ERROR") {
console.log('Problem deleting
record, error: ');
} else {
console.log('Unknown problem,
state: ');
}
}));
},
handleRecordUpdated: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType ===
"CHANGED") {
} else if(eventParams.changeType ===
"LOADED") {
} else if(eventParams.changeType ===
"REMOVED") {
var resultsToast =
$A.get("e.force:showToast");
resultsToast.setParams({
"title":
"Deleted",
"message": "The
record was deleted."
});
resultsToast.fire();
} else if(eventParams.changeType ===
"ERROR") { }
}
})
Result :
3. Update a Record :
Here We create a component that will update the
account detail on Account Detail page on click of save Button in component.
Lightning Component :
<aura:component
implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="record"
type="Object"/>
<aura:attribute
name="accRecord" type="Object"/>
<aura:attribute name="recordError"
type="String"/>
<force:recordData
aura:id="recordHandler"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.record}"
targetFields="{!v.accRecord}"
targetError="{!v.recordError}"
mode="EDIT"
/>
<div class="Record
Details">
<lightning:card
iconName="action:edit" title="Edit Account">
<div
class="slds-p-horizontal--small">
<lightning:input
label="Account Name" value="{!v.accRecord.Name}"/>
<br/>
<lightning:button
label="Save Account" variant="brand"
onclick="{!c.SaveRecord}" />
</div>
</lightning:card>
</div>
<aura:if
isTrue="{!not(empty(v.recordError))}">
<div
class="recordError">
{!v.recordError}</div>
</aura:if>
</aura:component>
Lightning Controller :
({
SaveRecord: function(component, event,
helper) {
component.find("recordHandler").saveRecord($A.getCallback(function(saveResult)
{
if (saveResult.state ===
"SUCCESS" || saveResult.state === "DRAFT") {
console.log("User
drafts.");
} 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));
}
}));
}
})
Result :
