lightning.pdf - Lightning Components Developer Guide Version 42.0 Spring \[email protected] Last updated February 7 2018 \u00a9 Copyright 2000\u20132018

lightning.pdf - Lightning Components Developer Guide...

This preview shows page 1 out of 733 pages.

You've reached the end of your free preview.

Want to read all 733 pages?

Unformatted text preview: Lightning Components Developer Guide Version 42.0, Spring ’18 @salesforcedocs Last updated: February 7, 2018 © Copyright 2000–2018 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. CONTENTS Chapter 1: What is the Lightning Component Framework? . . . . . . . . . . . . . . . . . . . . . . 1 What is Salesforce Lightning? . . . . . . . . . . . . . . . . . . . . . Why Use the Lightning Component Framework? . . . . . . . . Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Open Source Aura Framework . . . . . . . . . . . . . . . . . . . . Browser Support Considerations for Lightning Components Using the Developer Console . . . . . . . . . . . . . . . . . . . . . Online Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 3 3 4 4 6 6 Chapter 2: Quick Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Before You Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Trailhead: Explore Lightning Components Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Create a Component for Lightning Experience and the Salesforce Mobile App . . . . . . . . . . . . 10 Load the Contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Fire the Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Chapter 3: Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Create Lightning Components in the Developer Console . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Lightning Bundle Configurations Available in the Developer Console . . . . . . . . . . . . . . . 22 Component Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Component Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Using the Default Namespace in Organizations with No Namespace Set . . . . . . . . . . . . 25 Using Your Organization’s Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Using a Namespace in or from a Managed Package . . . . . . . . . . . . . . . . . . . . . . . . . 25 Creating a Namespace in Your Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Namespace Usage Examples and Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Component Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Component IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 HTML in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Component Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Component Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Component Facets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Best Practices for Conditional Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Component Versioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Components with Minimum API Version Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Using Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Contents Dynamic Output in Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Conditional Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Data Binding Between Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Value Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Expression Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Expression Operators Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Expression Functions Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Using Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Using Custom Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Input Component Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Dynamically Populating Label Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Getting Labels in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Getting Labels in Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Setting Label Values via a Parent Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Providing Component Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Working with Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Base Lightning Components Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Event Handling in Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Lightning Design System Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Working with UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Event Handling in UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Using the UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Supporting Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Button Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Audio Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Forms, Fields, and Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Chapter 4: Using Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Lightning Component Bundle Design Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Use Lightning Components in Lightning Experience and the Salesforce Mobile App . . . . . . . . 109 Configure Components for Custom Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Add Lightning Components as Custom Tabs in Lightning Experience . . . . . . . . . . . . . . 110 Add Lightning Components as Custom Tabs in the Salesforce App . . . . . . . . . . . . . . . . 111 Lightning Component Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Override Standard Actions with Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . 119 Get Your Lightning Components Ready to Use on Lightning Pages . . . . . . . . . . . . . . . . . . . 123 Configure Components for Lightning Pages and the Lightning App Builder . . . . . . . . . . 124 Configure Components for Lightning Experience Record Pages . . . . . . . . . . . . . . . . . . 126 Create Components for Lightning for Outlook and Lightning for Gmail . . . . . . . . . . . . . 127 Create Dynamic Picklists for Your Custom Components . . . . . . . . . . . . . . . . . . . . . . . 132 Create a Custom Lightning Page Template Component . . . . . . . . . . . . . . . . . . . . . . . 133 Contents Lightning Page Template Component Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . 136 Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Tips and Considerations for Configuring Components for Lightning Pages and the Lightning App Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Use Lightning Components in Community Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Configure Components for Communities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Create Custom Theme Layout Components for Communities . . . . . . . . . . . . . . . . . . . . 141 Create Custom Search and Profile Menu Components for Communities . . . . . . . . . . . . 143 Create Custom Content Layout Components for Communities . . . . . . . . . . . . . . . . . . . 144 Use Lightning Components with Flows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Customize Flow Screens By Using Lightning Components . . . . . . . . . . . . . . . . . . . . . . 146 Working with the Flow Lightning Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Display Flow Stages with a Lightning Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Add Components to Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Integrate Your Custom Apps into the Chatter Publisher . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Use Lightning Components in Visualforce Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Add Lightning Components to Any App with Lightning Out (Beta) . . . . . . . . . . . . . . . . . . . . 177 Lightning Out Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Lightning Out Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Lightning Out Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Authentication from Lightning Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Share Lightning Out Apps with Non-Authenticated Users . . . . . . . . . . . . . . . . . . . . . . 182 Lightning Out Considerations and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Chapter 5: Communicating with Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Actions and Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Handling Events with Client-Side Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Component Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Create Custom Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Fire Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Handling Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Component Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Application Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Create Custom Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Fire Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Handling Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Application Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Event Handling Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Advanced Events Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Firing Lightning Events from Non-Lightning Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Events Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Contents Events Anti-Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Events Fired During the Rendering Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Events Handled in the Salesforce mobile app and Lightning Experience . . . . . . . . . . . . . . . . 218 System Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Chapter 6: Creating Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Designing App UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Creating App Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Developing Secure Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 What is LockerService? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Content Security Policy Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Validations for Lightning Component Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Validation When You Save Code Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Validation During Development Using the Salesforce CLI . . . . . . . . . . . . . . . . . . . . . . 237 Review and Resolve Validation Errors and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . 240 Lightning Component Validation Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Salesforce Lightning CLI (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Styling Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Using the Salesforce Lightning Design System in Apps . . . . . . . . . . . . . . . . . . . . . . . 249 Using External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 More Readable Styling Markup with the join Expression . . . . . . . . . . . . . . . . . . . . . . . 251 Tips for CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Vendor Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Styling with Design Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Invoking Actions on Component Initialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Sharing JavaScript Code in a Component Bundle . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Sharing JavaScript Code Across Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Using External JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Working with Attribute Values in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Working with a Component Body in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Working with Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Modifying the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Checking Component Validity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Modifying Components Outside the Framework Lifecycle . . . . . . . . . . . . . . . . . . . . . . 286 Validating Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Throwing and Handling Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Calling Component Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Using JavaScript Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Making API Calls from Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Create CSP Trusted Sites to Access Third-Party APIs . . . . . . . . . . . . . . . . . . . . . . . . . 299 JavaScript Cookbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Dynamically Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 Contents Detecting Data Changes with Change Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Finding Components by ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Dynamically Adding Event Handlers To a Component . . . . . . . . . . . . . . . . . . . . . . . . 304 Dynamically Showing or Hiding Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Adding and Removing Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Which Button Was Pressed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Formatting Dates in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Using Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Creating Server-Sid...
View Full Document

  • Spring '19
  • 175, salesforce lightning, Lightning Component Framework

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture