More Related Content
Similar to Hands On: Create a Lightning Aura Component with force:RecordData (20)
More from Lynda Kane (14)
Recently uploaded (20)
Hands On: Create a Lightning Aura Component with force:RecordData
- 1. Hands On: Lightning Component w/force:RecordData Lynda Kane @labboopanda
- 2. Lynda Kane Co-Leader Orlando Briceno Gomez Co-Leader
- 3. Preparation
- 4. Preparation: Scenario The Sales Manager wants to keep current customer metrics in the minds of EVERYONE in the organization. No matter what record you’re on (Account, Contact, Opportunity, Case), they want the user to see the Total Spend and Volume for the (related) customer. To meet this need, you are going to build a Lightning Component in the Aura framework using force:RecordData. Your component needs to have the flexibility to work on different object records and always provide consistent data
- 6. Preparation: Tasks Add a field to Account API Name: Cust_ExternalId__c Type: Text Length: 20 External ID Unique Case Insensitive Include in the Page Layouts Add a custom object API Name: Sales_Summary__c Id field: AutoNumber Mask: {SS-00000} Fields: Account (Lookup, not Master Detail) Month_End__c (Date) Total_Spend__c (Currency, 2 decimals) Total_Products__c (Integer) ExternalId__c (Text20, ExternalId, Unique Case Insensitive) Data: Populate Cust_ExternalId__c in existing Account records Load Sales_Summary__c data *If you are using a Developer Org, you must create & activate My Domain.
- 8. Apex Class: Server-Side Controller ● Apex will act as our Server-Side Controller to compile the data that will be displayed in the Lightning Aura Component ● We need to get the SUM of the Total Spend (dollars) and, separately, the SUM of the Total Products (quantity) but only for the related Account. ● Two ways we could do this: Get all relevant records and sum OR use an Aggregate Results query ● Our Methods need to use @AuraEnabled so the results will be available to use in the Lightning Aura Component. ● Every Profile (or Permission Set) that needs visibility for the component will need security access to this Apex Class
- 9. Apex Class: Server-Side Controller We will follow best practices: ● We want to make sure our code is clear and readable ● We want to include useful commenting ● We want to include a Documentation Box ● We need to code within governor limits ● We should keep SOQL outside of any loops. ● We should use bulkification practices when needed. ● We should strive for good code coverage in our test class. ● Any I forgot?
- 10. Apex Class: Test Class ● Should have a minimum of 3 methods: Test Setup, Test of the Total Spend, Test of the Total Products ● In the Test Setup method, create records for both Account and Sales_Summary__c. ● Make sure you know what the expected SUMs will be! ● In each test method, we’ll use the Apex Controller previously created to supply us the sum and then compare it to our expectation. ● We’re only working toward the minimum here. If this were for a real production org, I’d recommend including some negative (no Sales_Summary__c data) testing too. ○ What other testing would you do if this were for your production org?
- 12. Lightning Aura Component Parts Component ● Need to define the parts (attributes) ● Handles the display (View part of MVC framework) ● Uses tagging (Salesforce specific &/or HTML) Controller Client-side ● Handles events ● Calls Server-side controller (Apex) ● Can initialize values Design This is where you can gather input to use for the component specific to its usage in a Lightning Page (configuration)
- 13. Lightning Aura Component Parts Helper Put reusable (for the component) JavaScript functions here It’s become a bit of a best practice to do the heavy lifting here rather than in the Controller Documentation I probably don’t do this exactly right but I use this to document what the Component is, why/when it’s used, how to use it (especially if Design is used), and I include an update log so I know what’s been done to it over time. Style This is a CSS file to add more styling or to define your own. Not using today because we’re sticking with LDS (Lightning Design System). Renderer Used to modify DOM elements SVG Custom icon resource
- 14. Lightning Component <aura:component - first tag implements="flexipage:availableForRecordHome,force:hasRecord Id,force:hasSObjectName" - interfaces controller="SalesSummaryComponentController" - server-side controller access="global" - access level> ... - more stuff goes in here </aura:component> - closing tag
- 15. Lightning Component: Interfaces Interfaces we’ll be using: ● flexipage:availableForRecordHome - makes the component available only for Record Pages (Documentation) Why? We’re building a component to display data on Record Pages ● force:hasRecordId - assigns the ID of the current record to the component (Documentation) Why? We need the ID of the current record to extract data (like the ID of related Account record) ● force:hasSObjectName - assigns the API Name of current record’s SObject Type to the component (Documentation) Why? We need to know if the current object is an Account or some other object
- 16. Lightning Component: attributes After the aura:component tag, declare your attributes using aura:attribute. We need 9 attributes for this component. ● First 2 are strings we’ll collect from the Lightning Page metadata thru the Design Component, we should include default values for these ○ The API name of the field that contains the ID of the related Account record ○ The API name of the relationship used by that field (so we can use the Name on the Account record) - just like in a parent SOQL query; for a standard object (like Contact) this is often just the name of the object (Account) but for a custom object (like MyObject__c it might be Account__r) ● The next 2 are the data points we’re going to display (Sum of Total Spend and Sum of Total Products). What data type should these be?
- 17. Lightning Component: attributes ● 1 string to hold the name of the related Account record ○ We’ll use this in the Title of our displayed Component to provide confirmation to the user that the totals are really for the related Account ● The next 3 are used in force:recordData ○ An sObject for the target record ○ An sObject for the target fields ○ A string with a default value for the target error ● 1 final (and very important) string to hold the ID of the related Account record ○ We need to pass this to our server-side controller to use the methods we created
- 18. Lightning Component: force:recordData Documentation force:recordData provides a way for us to easily access data from the Record assigned to the component using Lightning Data Service Let’s talk through the parts of this component: <force:recordData aura:id="recordLoader" recordId="{!v.recordId}" targetRecord="{!v.tRecord}" targetFields="{!v.tFields}" targetError="{!v.tError}" recordUpdated="{!c.doInit}" layoutType="FULL" />
- 19. Lightning Component: Final Part Now all we need to do is display the data! We’ll use the Lightning Design System to make our output look styled like Salesforce Some tags/attributes we’ll use: ● lightning:card (Documentation) ● lightning:formattedNumber (Documentation) ● class=”slds-p-horizontal_small” (Documentation)
- 20. Lightning Component: .design The design component in our Lightning Bundle gets information specified by an Admin for use in our code. In our Component, we created 2 attributes for the values we need to collect in our design. We need to now add these as design attributes. We need to include: ● name - must match the aura:attribute name exactly (case-sensitive) ● label - something meaningful for the Admin so they provide you what you need ● description - think of this like help text for a field
- 21. Lightning Component: Controller Now on to the worker bee of our Lightning Bundle, our JavaScript (client-side) Controller… From our force:recordData, we need to call our function doInit. But first, let’s break down what we need to do (Baby Steps): ● Check what sObject Type this record is ● Get the name of the Account field (dependent on above) ● Get the value of the Account ID ● Pass the Account ID to each of our Apex Controller methods and get back the data values ● Get the relationship name and use that to get the name of the Account
- 22. Lightning Component: Controller Check what sObject Type this record is var oName = component.get(‘v.sObject Name’); Is the Account object? ● Yes, get recordId ● No, get name of the Account field Get the name of the Account field var fName = component.get(‘v.account Field’); What do we do with this? A: We pass it as the targeted Field in force:recordData so we can get the Account ID Get the value of the Account ID IF Account object? var value = component.get(‘v.recordId’); ELSE Not Account object? var tField = ‘v.tFields.’ + fName; var value = component.get(tField); Then set the value: component.set(‘v.acctRecId’, value);
- 23. Lightning Component: Controller Pass the Account ID to each of our Apex Controller methods and get back the data values 1. Get the Apex Controller Method var action=component.get(‘c. getTotSpend’); 2. Set the parameters action.setParams({“relatedAcct” : value); 3. Set the callback action.setCallback(this, function(a){ var state = a.getState(); if(state == ‘SUCCESS’) { component.set(‘v.sumSpend’,a.getR eturnValue()); } }); 4. Enqueue (run) the Method $A.enqueueAction(action); 5. Do steps 1 - 4 again for the other method in the Apex controller but name your variable action2
- 24. Lightning Component: Controller Get the relationship name and use that to get the name of the Account This is much like the Conditional we used to get the Account ID IF Account object? var nameValue = component.get(‘v.tFields.Name’); ELSE Not Account object? var rName = component.get(‘v.accountRelField’ ); var tField2 = ‘v.tFields.’ + rName + ‘.Name’; var nameValue = component.get(tField2); Then set the value: component.set(‘v.nameAcc t’, nameValue);
- 25. Finishing Up 1. Make sure you’ve saved all your code! 2. In Salesforce, go to one of the Accounts for which we loaded Sales Summary data. 3. Click on one of the Contacts for this Account. 4. Edit the page (click the Gear icon and then Edit Page). 5. Locate your custom SalesSummaryComponent on the left and drag it to the right-hand column of the page. 6. Check the design elements (the Account field master-detail field in Contact is called AccountId and the relationship is called Account) 7. Save the page (you may need to activate) and then view your record.
- 26. CONGRATULATIONS!!!!!! You built a Lightning Aura Component with force:recordData!!!! Give yourself a high five!
- 27. Where to go from here Becoming a better coder is all about refactoring! Refactor this code: ● Move the calls to the Apex Controller into a JavaScript Helper (be careful about what you need to include in the parameters). ● Add more style to really call out the data. ● Re-work the Apex Controller (and then the Lightning Component) for increased re-usability. Make it so you can pass the field to sum up. Make it so you could sum or average. (Think: Object Schema and additional parameters) ● Can you make a Lightning Web Component to do the same thing?