Lightning Aura Components Developer Guide

1 Lightning Aura ComponentsDeveloper GuideVersion , Spring 22 @salesforcedocsLast updated: March 2, 2022 Copyright 2000 2022 , inc. All rights reserved. salesforce is a registered trademark of , inc.,as are other names and marks. Other marks appearing herein may be trademarks of their respective 1: What Is the Lightning Component Framework?.. 1 What is salesforce Lightning ?.. 2 Why Use the Aura Components Programming Model?.. 2 Aura Components .. 2 Events.. 3 Browser Support for Aura Components .. 3 Using the Developer Console.. 4 Online Content.. 4 Chapter 2: Quick Start.. 6 Before You Begin.. 7 Trailhead: Explore Lightning Aura Components Resources.. 7 Create a Component for Lightning Experience and the salesforce Mobile App.. 7 Load the Contacts.. 10 Fire the Events.. 14 Chapter 3: Creating Components .. 16 Component Names.. 18 Create Aura Components in the Developer Console.. 18 Lightning Bundle Configurations Available in the Developer Console.

2 19 Create Aura Components Using salesforce CLI.. 20 Component Markup.. 23 Component Namespace.. 24 Using the Default Namespace in Organizations with No Namespace Set.. 24 Using Your Organization s Namespace.. 25 Using a Namespace in or from a Managed Package.. 25 Creating a Namespace in Your Organization.. 25 Namespace Usage Examples and Reference.. 26 Component Bundles.. 28 Component IDs.. 29 HTML in Components .. 30 Supported HTML Tags.. 31 CSS in Components .. 32 Component Attributes.. 34 Supported aura:attribute Types.. 35 Basic Types.. 36 Function Type.. 38 Object Types.. 38 Standard and Custom Object Types.. 38 Collection Types.. 39 Custom Apex Class Types.. 41 Framework-Specific Types.. 42 Using Expressions.. 44 Dynamic Output in Expressions.. 45 Conditional Expressions.. 46 Data Binding Between Components .. 46 Value Providers.. 51 Expression Evaluation.. 58 Expression Operators Reference.

3 59 Expression Functions Reference.. 62 Component Composition.. 66 Component Body.. 69 Component Facets.. 70 Controlling Access.. 71 Application Access Control.. 74 Interface Access Control.. 74 Component Access Control.. 74 Attribute Access Control.. 75 Event Access Control.. 75 Using Object-Oriented Development.. 75 Favor Composition Over Inheritance.. 76 What is Inherited?.. 76 Inherited Component Attributes.. 77 Abstract Components .. 79 Interfaces.. 79 Inheritance Rules.. 80 Best Practices for Conditional Markup.. 81 Aura Component Versioning for Managed Packages.. 82 Base Components with Minimum API Version Requirements.. 83 Validations for Aura Component Code.. 85 Validation When You Save Code Changes.. 85 Validation During Development Using ESLint.. 86 Aura Component Validation Rules.. 87 Using Labels.. 92 Using Custom Labels.. 93 Input Component Labels.. 94 Dynamically Populating Label Parameters.

4 95 Getting Labels in JavaScript.. 95 Getting Labels in Apex.. 96 Setting Label Values via a Parent Attribute.. 98 Localization.. 98 Working with Base Lightning Components .. 100 Base Lightning Components Considerations.. 107 ContentsEvent Handling in Base Lightning Components .. 109 Creating a Form.. 112 Validating Fields.. 114 Lightning Design System Considerations.. 116 Migrate Components from the ui Namespace.. 119 Supporting Accessibility.. 122 Button Labels.. 123 Audio Messages.. 124 Forms, Fields, and Labels.. 125 Using Images and Icons.. 125 Events.. 127 Menus.. 127 Writing Documentation for the Component Library.. 127 Creating Examples.. 128 Creating Documentation Content.. 129 Providing Specification Information and Descriptions .. 132 Chapter 4: Using Components .. 134 Aura Component Bundle Design Resources.. 135 Use Aura Components in Lightning Experience and the salesforce Mobile App.

5 138 Configure Components for Custom Tabs.. 138 Add Aura Components as Custom Tabs in a Lightning Experience App.. 139 Lightning Component Actions.. 139 Override Standard Actions with Aura Components .. 146 Navigate Across Your Apps with Page References.. 150 Basic Navigation.. 151 Add Links to Lightning Pages from Your Custom Components .. 152 Add Query Parameters.. 153 Navigate to a Record Create Page with Default Field Values.. 153 Navigate to a Web Page.. 156 Migrate to Lightning :isUrlAddressable from force:navigateToComponent.. 156pageReference Types.. 158 Get Your Aura Components Ready to Use on Lightning Pages.. 170 Configure Components for Lightning Pages and the Lightning App Builder.. 171 Configure Components for Lightning Experience Record Pages.. 173 Create Components for the Outlook and Gmail Integrations.. 174 Create Dynamic Picklists for Your Custom Components .. 178 Create a Custom Lightning Page Template Component.

6 180 Lightning Page Template Component Best Practices.. 183 Make Your Lightning Page Components Width-Aware withlightning:flexipageRegionInfo.. 184 Tips and Considerations for Configuring Components for Lightning Pages and the LightningApp Builder.. 186 Use Aura Components in Experience Builder.. 187 ContentsConfigure Components for Experience Builder.. 187 Create Custom Theme Layout Components for Experience Builder.. 188 Create Custom Component for Guest User Flows.. 191 Create Custom Search and Profile Menu Components for Experience Builder.. 194 Create Custom Content Layout Components for Experience Builder.. 195 Use Aura Components with Flows.. 197 Considerations for Configuring Components for Flows.. 198 Customize Flow Screens Using Aura Components .. 202 Create Flow Local Actions Using Aura Components .. 212 Embed a Flow in a Custom Aura Component.. 216 Display Flow Stages with an Aura Component.

7 222 Add Components to Apps.. 227 Integrate Your Custom Apps into the Chatter Publisher.. 228 Using Background Utility Items.. 233 Use Lightning Components in Visualforce Pages.. 233 Add Aura Components to Any App with Lightning Out (Beta).. 235 Lightning Out Requirements.. 236 Lightning Out Dependencies.. 237 Lightning Out Markup.. 238 Authentication from Lightning Out.. 240 Share Lightning Out Apps with Non-Authenticated Users.. 241 Lightning Out Considerations and Limitations.. 242 Lightning Container.. 243 Using a Third-Party Framework.. 244 Lightning Container Component Limits.. 251 The Lightning Realty App.. 252lightning:container NPM Module Reference.. 255 Chapter 5: Communicating with Events.. 260 Actions and Events.. 261 Handling Events with Client-Side Controllers.. 262 Component Events.. 264 Component Event Propagation.. 265 Create Custom Component Events.. 265 Fire Component Events.

8 266 Handling Component Events.. 267 Component Event Example.. 273 Application Events.. 275 Application Event Propagation.. 276 Create Custom Application Events.. 277 Fire Application Events.. 278 Handling Application Events.. 279 Application Event Example.. 281 Event Handler Behavior for Active Components .. 283 ContentsEvent Handling Lifecycle.. 284 Advanced Events Example.. 286 Firing Events from Non-Aura Code.. 290 Events Best Practices.. 291 Events Anti-Patterns.. 292 Events Fired During the Rendering Lifecycle .. 292 Events Handled in the salesforce Mobile App and Lightning Experience.. 294 System Events.. 296 Chapter 6: Communicating Across the DOM with Lightning Message Service.. 297 Create a Message Channel.. 298 Publish on a Message Channel.. 298 Subscribe to a Message Channel.. 299 Lightning Message Service Limitations.. 300 Chapter 7: Creating Apps.. 302 App Overview.. 303 Designing App UI.

9 303 Creating App Templates.. 304 Using the AppCache.. 304 Distributing Applications and Components .. 304 Apex Class Considerations for Packages.. 305 Adding Aura Components to Managed Packages.. 306 Deleting Aura Components from Managed Packages.. 306 Chapter 8: Styling Apps.. 308 Using the salesforce Lightning Design System in Apps.. 309 Using External CSS.. 309 More Readable Styling Markup with the join Expression.. 311 Tips for CSS in Components .. 312 CSS for RTL Languages.. 312 Vendor Prefixes.. 315 Styling with Design Tokens.. 316 Tokens Bundles.. 316 Create a Tokens Bundle.. 317 Defining and Using Tokens.. 317 Using Expressions in Tokens.. 318 Extending Tokens Bundles.. 319 Using Standard Design Tokens.. 320 Chapter 9: Developing Secure Code.. 332 What is Lightning Locker?.. 333 JavaScript Strict Mode Enforcement.. 334 DOM Access Containment.. 334 Secure Wrappers.. 336 Contentseval() Function is Limited by Lightning Locker.

10 338 MIME Types Permitted.. 339 Access to Supported JavaScript API Framework Methods Only.. 340 What Does Lightning Locker Affect?.. 340 Lightning Locker Tools.. 340 Select the Locker API Version for an Org.. 345 Disable Lightning Locker for a Component.. 347 Don t Mix Component API Versions.. 348 Lightning Locker Disabled for Unsupported Browsers.. 349 Content Security Policy Overview.. 349 Stricter CSP Restrictions.. 350 Chapter 10: Using JavaScript.. 352 Supported JavaScript.. 354 Invoking Actions on Component Initialization.. 354 Sharing JavaScript Code in a Component Bundle.. 355 Sharing JavaScript Code Across Components .. 357 Using External JavaScript Libraries.. 359 Dynamically Creating Components .. 361 Detecting Data Changes with Change Handlers.. 364 Finding Components by ID.. 365 Working with Attribute Values in JavaScript.. 365 Working with a Component Body in JavaScript.