Salesforce Lightning Data Services- Hands on Training

download Salesforce Lightning Data Services- Hands on Training

of 25

Embed Size (px)

Transcript of Salesforce Lightning Data Services- Hands on Training

  1. 1. 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.
  2. 2. Practice is the hardest part of learning, and training is the essence of transformation. 2
  3. 3. 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
  4. 4. Setting up Salesforce environmement for Hands on Training. Sign up for Developer edition if you dont 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
  5. 5. 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
  6. 6. Lightning Data Services6 Component ( Component (
  7. 7. 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
    Lightning Data Service Demo App
  8. 8. 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.
    {!v.recordError}
  9. 9. Create a LDSAccountEdit lightning Component9 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'); } } })
  10. 10. Lets see what we have done!!! Update the LDSAccountListViewApp code with below code. Save the file. Click preview. 10 Place your screenshot here
    Lightning Data Service Demo App
  11. 11. Create a LDSAccountEdit lightning Component11 In order to display more account fields, replace the code inside div with class maincontainer with below code.
  12. 12. Create a LDSAccountEdit lightning Component12 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. 13. Lets see what we have done!!! Update the LDSAccountListViewApp code with below code. Save the file. Click preview. 13 Place your screenshot here
    Lightning Data Service Demo App
  14. 14. 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 tag. Remove Lightning:button with label as Save.
  15. 15. Lets see what we have done!!! Update the LDSAccountListViewApp code with below code. Save the file. Click preview. 15 Place your screenshot here
    Lightning Data Service Demo App
  16. 16. 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 findAccounts(){ List accList = new List(); accList=[select id, name,owner.name,type,AccountNumber,AnnualRevenue,Phone from Account order by lastModifiedDate DESC Limit 10]; return accList; } }
  17. 17. Create a LDSAccountListView lightning Component17 In the Developer Console, choose File > New > Lightning Component. Specify LDSAccountListView as the component name and click submit.
    Accounts({!v.accList.length})
    @sunil02kumar
  18. 18. 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. 19. Lets see what we have done!!! Update the LDSAccountListViewApp code with below code. Save the file. Click preview. 19 Place your screenshot here
    Lightning Data Service Demo App
  20. 20. Update LDSAccountListView lightning Component20 Replace section with below code and save file. Actions Name Account Number {!item.Name} {!item.AccountNumber}
  21. 21. 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"); } }
  22. 22. 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.
  23. 23. 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. goBackToListView : function(component,event,helper){ component.set("v.currView","ListView"); }
  24. 24. Lets see what we have done!!!24 Place your screenshot herePlace your screenshot here
  25. 25. 25 THANKS! Any questions? You can find me at @sunil02kumar sunil02kumar@gmail.com