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.

https://sunil02kumar.blogspot.in/

”

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

https://goo.gl/U8nfnq

https://goo.gl/DUTQfG

https://goo.gl/yoM7nE

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.


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

}

}));

}




13





</div>

<c:LDSAccountEdit recordId=“0017F000004R9C3QAK”/>

</aura:application>

Create a LDSAccountView lightning Component14

▹ In the Developer Console, choose File > New > Lightning Component.▹ 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"/>




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

▹ In the Developer Console, choose File > New > Lightning Component.▹ 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);

}

})




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▹ [email protected]

Salesforce Lightning Data Services- Hands on Training

Engineering

Transcript of Salesforce Lightning Data Services- Hands on Training