Salesforce Lightning Data Services- Hands on Training

1
About Myself!
I am Sunil Kumar
7x Salesforce Certified | Developer | Blogger
Twitter : @sunil02kumar
Blog: https://sunil02kumar.blogspot.in
Facebook Page : SalesforceArticles
I am here for Hands on training session on
Salesforce events & LDS. I think it is the best
way to interact & learn.

”
Practice is the hardest part of
learning, and training is the essence
of transformation.
2

Agenda
▹ Setting up Salesforce environmement for Hands on Training.
▹ Lightning Data Services Overview
▹ Creating lightning component for editing and viewing account records
using Lightning Data Services.
▹ Q&A
3

Setting up Salesforce environmement for
Hands on Training.
▹ Sign up for Developer edition if you don’t have by referring below URL:
https://developer.salesforce.com/gettingstarted
▹ Enable My Domain in your org (Navigate to Set Up-My Domain).
▹ After registering My Domain, deploy it for all users.
4

Upload Static Resource
▹ Download zip file from below URL:
https://goo.gl/U8nfnq
▹ Click on Setup > Static Resouce > New
▹ Specify name as “LightningEventsResources” and browse zip file.
▹ Specify “Public “ for Cache Control field and click on Save.
▹ You can refer below blog to follow steps for hands on training.
https://goo.gl/DUTQfG
▹ GitHub Repository URL for complete code for Hands on Training
https://goo.gl/yoM7nE
5

Lightning Data Services6
Component
(<force:recorddata />
Component
(<force:recorddata />
<force:recordData aura:id="recordLoader"
recordId="{!v.recordId}"
mode="EDIT or VIEW"
layout="FULL or COMPACT"
targetRecord="{!v.recordInfo}"
targetFields="{!v.fieldsInfo}"
fields="Name,Owner.Name,AnnualRevenue,AccountNumber"
targetError="{!v.recordError}"
recordUpdated="{!c.handleRecordChanges}" />

Create a “LDSAccountListViewApp” Lightning Application
▹ In the Developer Console, choose File > New > Lightning Application.
▹ Specify “LDSAccountListViewApp” as the app name and click submit.
▹ Specify below code in lightning app.
▹ Save the file.
▹ Click preview.
7
Place your screenshot here
<aura:application extends="force:slds">
<div class="slds-text-heading_large slds-text-align_center">
Lightning Data Service Demo App
</div>
</aura:application>

Create a LDSAccountEdit lightning Component8
▹ In the Developer Console, choose File > New > Lightning Component.
▹ Specify “LDSAccountEdit” as the component name and click submit. Paste below code and Save the file.
<aura:component >
<aura:attribute name="recordId" type="String" required="true"/>
<aura:attribute name="recordInfo" type="Object"/>
<aura:attribute name="fieldsInfo" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="currView" type="String" />
<force:recordData aura:id="recordLoader"
recordId="{!v.recordId}"
mode="EDIT"
targetRecord="{!v.recordInfo}"
targetFields="{!v.fieldsInfo}"
fields="Name,Owner.Name,AnnualRevenue,AccountNumber"
targetError="{!v.recordError}"
recordUpdated="{!c.handleRecordChanges}" />
<div class="maincontainer">
</div>

<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true"> {!v.recordError}
</ui:message>
</div>
</aura:if>
</aura:component>
<lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" />

▹ Click CONTROLLER in the right side bar of the code editor and replace code with below code and save the file..
({
handleRecordChanges: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType === "LOADED") {
// record is loaded
var fieldsDetails= component.get("v.fieldsInfo");
console.log("fieldsInfo is loaded successfully. TargetField"+
JSON.stringify(fieldsDetails));
var recordDetails= component.get("v.recordInfo");
console.log("recordInfo -Target Record"+ JSON.stringify(recordDetails));
console.log('Record loaded successfully');
}
}
})

Lets see what we have done!!!
▹ Update the “LDSAccountListViewApp” code with below code.
▹ Save the file.
▹ Click preview.
10
</div>
<c:LDSAccountEdit recordId=“0017F000004R9C3QAK”/>
</aura:application>

▹ In order to display more account fields, replace the code inside div with class “maincontainer” with below code.
<div class="maincontainer">
<div class="slds-col--padded slds-size--1-of-1 slds-medium--1-of-1 slds-large-size--1-of-1">
<div class="slds-form-element__control" >
<lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" />
</div>
</div>
<lightning:input type="number" label="Annual Revenue" name="atype" value="{!v.fieldsInfo.AnnualRevenue}" formatter="currency"/>
</div>
</div>
<lightning:input label="Account Number" name="accnum" value="{!v.fieldsInfo.AccountNumber}" />
</div>
</div>
<lightning:button variant="brand" label="Save" onclick="{!c.saveRecordHandler}"/>
<lightning:button variant="brand" label="Back" />
</div>
</div>
</div>

▹ Click CONTROLLER in the right side bar of the code editor and add saveRecordHandler function and save the file..
saveRecordHandler: function(component, event, helper) {
component.find("recordLoader").saveRecord($A.getCallback(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
console.log('Record updated successfully');
}else if (saveResult.state === "ERROR") {
console.log('Problem error: ' + JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' +
JSON.stringify(saveResult.error));
}
}));
}

▹ Save the file.
▹ Click preview.
13
</div>
<c:LDSAccountEdit recordId=“0017F000004R9C3QAK”/>
</aura:application>

Create a LDSAccountView lightning Component14
▹ Specify “LDSAccountView” as the component name and click submit.
▹ Copy the code from “LDSAccountEdit” component and paste it here.
▹ Add a attribute disabled=“true” in all lightning:input tag
▹ Remove “handleRecordChanges” attribute from <force:recorddata> tag.
▹ Remove Lightning:button with label as “Save”.
<lightning:input label="Account Name" name="accname" value="{!v.fieldsInfo.Name}" dsabled="true"/>

▹ Save the file.
▹ Click preview.
15
</div>
<c:LDSAccountView recordId=“0017F000004R9C3QAK”/>
</aura:application>

Create a Apex class to fetch Account records16
▹ Create Apex Class “LDSAccountListViewController” to fetch latest 10 Account records from your org.
public with Sharing class LDSAccountListViewController {
@AuraEnabled public static List<Account> findAccounts(){
List<Account> accList = new List<Account>();
accList=[select id, name,owner.name,type,AccountNumber,AnnualRevenue,Phone from
Account order by lastModifiedDate DESC Limit 10];
return accList;
}
}

Create a LDSAccountListView lightning Component17
▹ Specify “LDSAccountListView” as the component name and click submit.
<aura:component controller="LDSAccountListViewController" >
<aura:attribute name="accList" type="List" />
<aura:attribute name="menu" type="List" default="View,Edit"/>
<aura:attribute name="currentView" type="String" default="ListView"/>
<aura:attribute name="selectedRecord" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:if isTrue="{!v.currentView =='ListView'}">
<div class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<lightning:Icon iconName="standard:account" size="large" variant="inverse" />
</div>
<div class="slds-media__body">
<h2> <span class="slds-text-heading_small">Accounts({!v.accList.length})</span> </h2>
</div>
</header>
<div class="slds-no-flex"> <lightning:button variant="brand" label="New Account" /> </div>
</div>
<div class="slds-card__body slds-card__body_inner">
<aura:if isTrue="{!v.accList.length > 0}">  </aura:if>
</div>
<footer class="slds-card__footer">@sunil02kumar</footer> </div>
</aura:if>

</aura:component>

Create a LDSAccountListView lightning Component18
▹ Click CONTROLLER in the right side bar of the code editor and add doInit function and save the file..
({
doInit : function(component, event, helper){
var action = component.get("c.findAccounts");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var apexResponse = response.getReturnValue();
//console.log('***apexResponse:'+ JSON.stringify(apexResponse));
component.set("v.accList", apexResponse);
console.log('********Accounts list view loaded successfully');
}else if(state === "ERROR"){
alert('Problem with connection. Please try again.');
}});
$A.enqueueAction(action);
}
})

▹ Save the file.
▹ Click preview.
19
</div>
<c:LDSAccountListView />
</aura:application>

Update LDSAccountListView lightning Component20
▹ Replace  section with below code and save file.
<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Actions</th>
<th scope="col">Name</th>
<th scope="col">Account Number</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accList}" var="item">
<tr class="slds-hint-parent">
<td scope="row">
<lightning:buttonMenu iconName="utility:threedots" >
<aura:iteration items="{!v.menu}" var="menuItem">
<lightning:menuItem label="{!menuItem}" value="{!item.Id + '---' + menuItem}" onactive="{!c.onSelectMenuItem}"/>
</aura:iteration>
</lightning:buttonMenu>
</td>
<td > {!item.Name}</td>
<td > {!item.AccountNumber}</td>
</tr>
</aura:iteration>
</tbody>
</table>

Update a LDSAccountListView lightning Component21
▹ Click CONTROLLER in the right side bar of the code editor and add onSelectMenuItem function and save the file..
onSelectMenuItem : function(component, event, helper) {
var selectedOption = event.getSource().get('v.value');
var selectedId = selectedOption.split('---')[0];
console.log('*************selectedId:'+selectedId); component.set("v.selectedRecord",selectedId);
console.log('*************selectedOption:'+selectedOption);
if (selectedOption.endsWith("View")) {
component.set("v.currentView","RecordView");
}else if(selectedOption.endsWith("Edit")){
component.set("v.currentView","RecordEdit");
}
}

Update LDSAccountListView lightning Component22
▹ Now we are going to display LDSAccountView and LDSAccountEdit components based selection made by user on
menu item
▹ Add below markup code in LDSAccountListView component after the section for account list views and save file.

<aura:if isTrue="{!v.currentView =='RecordView'}">
<c:LDSAccountView recordId="{!v.selectedRecord}" currView="{!v.currentView}"/>
</aura:if>


<aura:if isTrue="{!v.currentView =='RecordEdit'}">
<c:LDSAccountEdit recordId="{!v.selectedRecord}" currView="{!v.currentView}" />
</aura:if>

Update LDSAccountView & LDSAccountView lightning
Component23
▹ In LDSAccountEdit component, add action to lightning:button with label as “Back”.
▹ Click CONTROLLER in the right side bar of the code editor and add goBackToListViewfunction and save the file
▹ Same way in LDSAccountView, update lightning:button with label as “Back” and add “goBackToListView” JavaScript
function to controller.
<lightning:button variant="brand" label="Back" onclick="{!c.goBackToListView}"/>
goBackToListView : function(component,event,helper){
component.set("v.currView","ListView");
}

Lets see what we have done!!!24
Place your screenshot herePlace your screenshot here

25
THANKS!
Any questions?
You can find me at
▹ @sunil02kumar
▹ sunil02kumar@gmail.com

Salesforce Lightning Data Services- Hands on Training

Recommended

More Related Content

What's hot (20)

Similar to Salesforce Lightning Data Services- Hands on Training (20)

Recently uploaded (20)

Salesforce Lightning Data Services- Hands on Training