Lightning Data Service
Lightning Data Service to view,edit,create or delete a
record in your lightning component without using any Apex code. If you worked
on visualforce then you can think about Lightning Data Service as the Lightning
Components version of the Visualforce standard
controller.
If you have a Lightning application that creates, reads,
updates, or deletes records, Lightning Data Service is the best, most efficient
way to do create,read,update and delete operations.
recordId : specifies the record id to load. Records can’t
be loaded without a recordId that means you component gets to be inserted.
Lets start with coding
Lightning Data Service to view,edit,create or delete a
record in your lightning component without using any Apex code. If you worked
on visualforce then you can think about Lightning Data Service as the Lightning
Components version of the Visualforce standard
controller.
If you have a Lightning application that creates, reads,
updates, or deletes records, Lightning Data Service is the best, most efficient
way to do create,read,update and delete operations.
Important Attributes:-
All you have to do is include force:recordData in your component
recordId : specifies the record id to load. Records can’t
be loaded without a recordId that means you component gets to be inserted.
layoutType: specifies the layout (FULL or COMPACT) that is used
to display the record.
Fields: specifies which fields in the record to query.
targetRecord: This attribute indicates populated record
targetFields : This attribute indicates populated record with
simplifiedview of the loaded record
targetError: This attribute is get populated with any type
error
Benefits of Lightning Data Services
·
Fetch records once, reducing network transfers, app server load,
and database server load
·
Create,read,update and delete operation supported
·
No need to handle FLS and record level sharing
·
No need to write any Apex class and SOQL
·
Shared cache is used by all standard and custom components
·
Auto notifications when record data changes
Lets start with coding
1. Create a component and specify the name
"accDisplay", this component will
show the record details without any Apex and soql.
Below component show the Name,Industry,Description and Phone
using LDS
<aura:component
implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute
name="account" type="Object"
description="The record
object to be displayed"/>
<aura:attribute
name="accountRecord" type="Object"
description="A simplified
view record object to be displayed"/>
<aura:attribute
name="recordError" type="String"
description="An error
message bound to force:recordData"/>
<force:recordData
aura:id="record"
layoutType="FULL"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetRecord="{!v.account}"
targetFields="{!v.accountRecord}"
fields="Name,
Industry,Description,Phone"
mode="VIEW"/>
<div class="slds-box">
<div
class="slds-text-heading_medium">
Account View- Data
Service
</div>
<!-- Display a header with
details about the record -->
<div
class="slds-form--stacked slds-tile">
<div
class="slds-form-element">
<label class="slds-form-element__label" >Name
</label>
<div
class="slds-form-element__control">
<ui:outputText value="{!v.accountRecord.Name}" />
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Industry
</label>
<div
class="slds-form-element__control">
<ui:outputText class="slds-input"
value="{!v.accountRecord.Industry}" />
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Description
</label>
<div
class="slds-form-element__control">
<ui:outputTextArea class="slds-input"
value="{!v.accountRecord.Description}" />
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Phone </label>
<div
class="slds-form-element__control">
<ui:outputPhone class="slds-input"
value="{!v.accountRecord.Phone}" />
</div>
</div>
</div>
</div>
</aura:component>
2. Create a component and specify the name
"accEdit"
Below component will update the record using LDS
<aura:component
implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId"
access="global" >
<aura:attribute
name="account" type="Object"
description="The record
object to be displayed"/>
<aura:attribute
name="accountRecord" type="Object"
description="A simplified
view record object to be displayed"/>
<aura:attribute
name="recordSaveError" type="String"
default=""/>
<force:recordData
aura:id="accRec"
layoutType="FULL"
recordId="{!v.recordId}"
targetError="{!v.recordSaveError}"
targetRecord="{!v.account}"
targetFields="{!v.accountRecord}"
mode="EDIT"
recordUpdated="{!c.recordUpdated}"/>
<div class="slds-box">
<div
class="slds-text-heading_medium">
Account Edit- Data
Service
</div>
<div
class="slds-form--stacked slds-tile">
<div
class="slds-form-element">
<label class="slds-form-element__label" >Account Name:
</label>
<div
class="slds-form-element__control">
<ui:inputText
value="{!v.accountRecord.Name}"
required="true"/>
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Industry:
</label>
<div class="slds-form-element__control">
<ui:inputText
aura:id="industry"
value="{!v.accountRecord.Industry}"
/>
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Description:
</label>
<div class="slds-form-element__control">
<ui:inputText
aura:id="industry"
value="{!v.accountRecord.Description}"
/>
</div>
</div>
<div
class="slds-form-element">
<label class="slds-form-element__label" >Phone:
</label>
<div class="slds-form-element__control">
<ui:inputText
aura:id="industry"
value="{!v.accountRecord.Phone}"
required="true"/>
</div>
</div>
<div
class="slds-form-element">
<ui:button aura:id="saveAccount"
buttonTitle="Save Account" class="button" label="Save
Account" press="{!c.saveRecord}"/>
</div>
</div>
<aura:if
isTrue="{!not(empty(v.recordSaveError))}">
<div
class="recordSaveError">
<ui:message
title="Error" severity="error"
closable="true">
{!v.recordSaveError}
</ui:message>
Error:
<ui:outputText value="{!v.recordSaveError}"/>
</div>
</aura:if>
</div>
</aura:component>
3. accEditController
({ saveRecord
: function(component, event, helper) {
helper.handleSaveRecord(component,
event, helper);
},
recordUpdated : function(component, event, helper)
{
helper.recordUpdated(component, event,
helper);
}
})
4.accEditHelper
({
handleSaveRecord
: function(component, event, helper) {
component.find("accRec").saveRecord($A.getCallback(function(saveResult)
{
if (saveResult.state
=== "SUCCESS" || saveResult.state === "DRAFT") {
console.log("Save completed successfully.");
} else if
(saveResult.state === "INCOMPLETE") {
component.set("v.recordSaveError","User is offline, device
doesn't support drafts.");
} else if
(saveResult.state === "ERROR") {
var
errMsg = "";
//
saveResult.error is an array of errors,
// so
collect all errors into one message
for (var
i = 0; i < saveResult.error.length; i++) {
errMsg += saveResult.error[i].message + "\n";
}
component.set("v.recordSaveError", errMsg);
} else {
component.set("v.recordSaveError",'Unknown problem, state: ' +
saveResult.state + ', error: ' +
JSON.stringify(saveResult.error));
}
}));
},
recordUpdated : function(component, event,
helper){
var eventParams = event.getParams();
if
(eventParams.changeType === "CHANGED") {
var resultsToast =
$A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was updated."
});
resultsToast.fire();
}
else if(eventParams.changeType ===
"LOADED") {
console.log("Record is loaded successfully.");
var resultsToast =
$A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "Record is loaded successfully."
});
resultsToast.fire();
}
else if(eventParams.changeType ===
"REMOVED") {
var resultsToast =
$A.get("e.force:showToast");
resultsToast.setParams({
"title": "Deleted",
"message": "The record was deleted."
});
resultsToast.fire();
}
}
})
Once the components are saved, then include both(accDisplay and
accEdit) the components on Account Pagelyout
Comments
Post a Comment