Lightning Aura Components Developer Guide

Transcription

Lightning Aura ComponentsDeveloper GuideVersion 54.0, Spring ’22@salesforcedocsLast updated: March 2, 2022

Copyright 2000–2022 salesforce.com, inc. All rights reserved. Salesforce is a registered trademark of salesforce.com, inc.,as are other names and marks. Other marks appearing herein may be trademarks of their respective owners.

CONTENTSChapter 1: What Is the Lightning Component Framework? . . . . . . . . . . . . . . . . . . . . . . 1What is Salesforce Lightning? . . . . . . . . . . . . . . . . . .Why Use the Aura Components Programming Model?Aura Components . . . . . . . . . . . . . . . . . . . . . . . . .Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Browser Support for Aura Components . . . . . . . . . . .Using the Developer Console . . . . . . . . . . . . . . . . . .Online Content . . . . . . . . . . . . . . . . . . . . . . . . . . .2223344Chapter 2: Quick Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Before You Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Trailhead: Explore Lightning Aura Components Resources . . . . . . . . . . . . . . . . . . . . . . . . . . 7Create a Component for Lightning Experience and the Salesforce Mobile App . . . . . . . . . . . . . 7Load the Contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Fire the Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Chapter 3: Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Component Names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Create Aura Components in the Developer Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Lightning Bundle Configurations Available in the Developer Console . . . . . . . . . . . . . . . 19Create Aura Components Using Salesforce CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Component Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Component Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Using the Default Namespace in Organizations with No Namespace Set . . . . . . . . . . . . 24Using Your Organization’s Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Using a Namespace in or from a Managed Package . . . . . . . . . . . . . . . . . . . . . . . . . 25Creating a Namespace in Your Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Namespace Usage Examples and Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Component Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Component IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29HTML in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Supported HTML Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Component Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Supported aura:attribute Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Basic Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Function Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Object Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Standard and Custom Object Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

ContentsCollection Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Custom Apex Class Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Framework-Specific Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Using Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Dynamic Output in Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Conditional Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Data Binding Between Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Value Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Expression Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Expression Operators Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Expression Functions Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Component Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Component Facets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Controlling Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Application Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Interface Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Component Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Attribute Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Event Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Using Object-Oriented Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Favor Composition Over Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76What is Inherited? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Inherited Component Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Abstract Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Inheritance Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Best Practices for Conditional Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Aura Component Versioning for Managed Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Base Components with Minimum API Version Requirements . . . . . . . . . . . . . . . . . . . . . . . 83Validations for Aura Component Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Validation When You Save Code Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Validation During Development Using ESLint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Aura Component Validation Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Using Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Using Custom Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Input Component Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Dynamically Populating Label Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Getting Labels in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Getting Labels in Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Setting Label Values via a Parent Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Working with Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Base Lightning Components Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

ContentsEvent Handling in Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Validating Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Lightning Design System Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Migrate Components from the ui Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Supporting Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122Button Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Audio Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Forms, Fields, and Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Using Images and Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Writing Documentation for the Component Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Creating Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Creating Documentation Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Providing Specification Information and Descriptions . . . . . . . . . . . . . . . . . . . . . . . . 132Chapter 4: Using Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Aura Component Bundle Design Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Use Aura Components in Lightning Experience and the Salesforce Mobile App . . . . . . . . . . 138Configure Components for Custom Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138Add Aura Components as Custom Tabs in a Lightning Experience App . . . . . . . . . . . . 139Lightning Component Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139Override Standard Actions with Aura Components . . . . . . . . . . . . . . . . . . . . . . . . . . 146Navigate Across Your Apps with Page References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Basic Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Add Links to Lightning Pages from Your Custom Components . . . . . . . . . . . . . . . . . . . 152Add Query Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Navigate to a Record Create Page with Default Field Values . . . . . . . . . . . . . . . . . . . . 153Navigate to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Migrate to lightning:isUrlAddressable from force:navigateToComponent . . . . . . . . . . . 156pageReference Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Get Your Aura Components Ready to Use on Lightning Pages . . . . . . . . . . . . . . . . . . . . . . 170Configure Components for Lightning Pages and the Lightning App Builder . . . . . . . . . . 171Configure Components for Lightning Experience Record Pages . . . . . . . . . . . . . . . . . . 173Create Components for the Outlook and Gmail Integrations . . . . . . . . . . . . . . . . . . . . 174Create Dynamic Picklists for Your Custom Components . . . . . . . . . . . . . . . . . . . . . . . 178Create a Custom Lightning Page Template Component . . . . . . . . . . . . . . . . . . . . . . . 180Lightning Page Template Component Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . 183Make Your Lightning Page Components Width-Aware withlightning:flexipageRegionInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Tips and Considerations for Configuring Components for Lightning Pages and the LightningApp Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186Use Aura Components in Experience Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

ContentsConfigure Components for Experience Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Create Custom Theme Layout Components for Experience Builder . . . . . . . . . . . . . . . . 188Create Custom Component for Guest User Flows . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Create Custom Search and Profile Menu Components for Experience Builder . . . . . . . . 194Create Custom Content Layout Components for Experience Builder . . . . . . . . . . . . . . . 195Use Aura Components with Flows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197Considerations for Configuring Components for Flows . . . . . . . . . . . . . . . . . . . . . . . . 198Customize Flow Screens Using Aura Components . . . . . . . . . . . . . . . . . . . . . . . . . . 202Create Flow Local Actions Using Aura Components . . . . . . . . . . . . . . . . . . . . . . . . . . 212Embed a Flow in a Custom Aura Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Display Flow Stages with an Aura Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222Add Components to Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227Integrate Your Custom Apps into the Chatter Publisher . . . . . . . . . . . . . . . . . . . . . . . . . . . 228Using Background Utility Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233Use Lightning Components in Visualforce Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233Add Aura Components to Any App with Lightning Out (Beta) . . . . . . . . . . . . . . . . . . . . . . . 235Lightning Out Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Lightning Out Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Lightning Out Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Authentication from Lightning Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240Share Lightning Out Apps with Non-Authenticated Users . . . . . . . . . . . . . . . . . . . . . . 241Lightning Out Considerations and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Lightning Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Using a Third-Party Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244Lightning Container Component Limits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251The Lightning Realty App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252lightning:container NPM Module Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Chapter 5: Communicating with Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260Actions and Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Handling Events with Client-Side Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264Component Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Create Custom Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Fire Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266Handling Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267Component Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Application Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276Create Custom Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Fire Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278Handling Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Application Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281Event Handler Behavior for Active Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

ContentsEvent Handling Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284Advanced Events Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286Firing Events from Non-Aura Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290Events Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291Events Anti-Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Events Fired During the Rendering Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Events Handled in the Salesforce Mobile App and Lightning Experience . . . . . . . . . . . . . . . 294System Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296Chapter 6: Communicating Across the DOM with Lightning Message Service . . . . . 297Create a Message Channel . . . . . . . .Publish on a Message Channel . . . . .Subscribe to a Message Channel . . . .Lightning Message Service Limitations .298298299300Chapter 7: Creating Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Designing App UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Creating App Templates . . . . . . . . . . . . . . . . . . . . . . . .Using the AppCache . . . . . . . . . . . . . . . . . . . . . . . . . .Distributing Applications and Components . . . . . . . . . . . .Apex Class Considerations for Packages . . . . . . . . .Adding Aura Components to Managed Packages . . .Deleting Aura Components from Managed Packages.303303304304304305306306Chapter 8: Styling Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308Using the Salesforce Lightning Design System in Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . 309Using External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309More Readable Styling Markup with the join Expression . . . . . . . . . . . . . . . . . . . . . . . . . . . 311Tips for CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312CSS for RTL Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312Vendor Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315Styling with Design Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316Tokens Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316Create a Tokens Bundle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317Defining and Using Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317Using Expressions in Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318Extending Tokens Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319Using Standard Design Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320Chapter 9: Developing Secure Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332What is Lightning Locker? . . . . . . . . . .JavaScript Strict Mode EnforcementDOM Access Containment . . . . . .Secure Wrappers . . . . . . . . . . . .333334334336

Contentseval() Function is Limited by Lightning Locker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338MIME Types Permitted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339Access to Supported JavaScript API Framework Methods Only . . . . . . . . . . . . . . . . . . 340What Does Lightning Locker Affect? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Lightning Locker Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Select the Locker API Version for an Org . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345Disable Lightning Locker for a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Don’t Mix Component API Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348Lightning Locker Disabled for Unsupported Browsers . . . . . . . . . . . . . . . . . . . . . . . . 349Content Security Policy Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349Stricter CSP Restrictions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350Chapter 10: Using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Supported JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Invoking Actions on Component Initialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Sharing JavaScript Code in a Component Bundle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355Sharing JavaScript Code Across Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357Using External JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Dynamically Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Detecting Data Changes with Change Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364Finding Components by ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365Working with Attribute Values in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365Working with a Component Body in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367Working with Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368Modifying the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370Modifying DOM Elements Managed by the Aura Components Programming Model . . . 371Modifying DOM Elements Managed by External Libraries . . . . . . . . . . . . . . . . . . . . . 375Checking Component Validity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Modifying Components Outside the Framework Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . 377Throwing and Handling Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378Calling Component Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379Return Result for Synchronous Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381Return Result for Asynchronous Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383Dynamically Adding Event Handlers To a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 385Dynamically Showing or Hiding Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387Adding and Removing Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388Which Button Was Pressed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389Formatting Dates in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390Using JavaScript Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392Making API Calls from Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394Manage CSP Trusted Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Chapter 11: Working with Salesforce Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398Lightning Data Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

ContentsLoading a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400Editing a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404Creating a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409Deleting a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415Record Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417Handling Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418Changing the Display Density . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423Lightning Action Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446SaveRecordResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453Displaying the Create and Edit Record Modals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453Using Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454Creating Server-Side Logic with Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455Testing Your Apex Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481Making API Calls from Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482Make Long-Running Callouts with Continuations . . . . . . . . . . . . . . . . . . . . . . . . . . . 483Creating Components in Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488Chapter 12: Testing Components with Lightning Testing Service . . . . . . . . . . . . . . . . 489How Lightning Testing Service Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490Install Lightning Testing Service . . . . . . .

What is Salesforce Lightning? Lightning includes the Lightning Component Framework and some exciting tools for developers. Lightning makes it easier to build