Lightning Components Developer Guide

Lightning ComponentsDeveloper Guide

Version 42.0, Spring 18

@salesforcedocsLast updated: January 22, 2018

https://twitter.com/salesforcedocs

Copyright 20002018 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? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Why Use the Lightning Component Framework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Open Source Aura Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Browser Support Considerations for Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . 4Using the Developer Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Online Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Chapter 2: Quick Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Before You Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Trailhead: Explore Lightning Components Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Create a Component for Lightning Experience and the Salesforce Mobile App . . . . . . . . . . . . 10

Load the Contacts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Fire the Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Chapter 3: Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Create Lightning Components in the Developer Console . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Lightning Bundle Configurations Available in the Developer Console . . . . . . . . . . . . . . . 22

Component Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Component Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Using the Default Namespace in Organizations with No Namespace Set . . . . . . . . . . . . 25Using Your Organizations Namespace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Using a Namespace in or from a Managed Package . . . . . . . . . . . . . . . . . . . . . . . . . 25Creating a Namespace in Your Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Namespace Usage Examples and Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Component Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Component IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30HTML in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Component Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Component Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Component Facets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Best Practices for Conditional Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Component Versioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Components with Minimum API Version Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Using Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Dynamic Output in Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Conditional Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Data Binding Between Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Value Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Expression Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Expression Operators Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Expression Functions Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Using Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Using Custom Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Input Component Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Dynamically Populating Label Parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Getting Labels in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Getting Labels in Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Setting Label Values via a Parent Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Providing Component Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Working with Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Base Lightning Components Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Event Handling in Base Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Lightning Design System Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Working with UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Event Handling in UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Using the UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Supporting Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Button Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Audio Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Forms, Fields, and Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Chapter 4: Using Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Lightning Component Bundle Design Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Use Lightning Components in Lightning Experience and the Salesforce Mobile App . . . . . . . . 109

Configure Components for Custom Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109Add Lightning Components as Custom Tabs in Lightning Experience . . . . . . . . . . . . . . 110Add Lightning Components as Custom Tabs in the Salesforce App . . . . . . . . . . . . . . . . 111Lightning Component Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Override Standard Actions with Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . 119

Get Your Lightning Components Ready to Use on Lightning Pages . . . . . . . . . . . . . . . . . . . 123Configure Components for Lightning Pages and the Lightning App Builder . . . . . . . . . . 124Configure Components for Lightning Experience Record Pages . . . . . . . . . . . . . . . . . . 126Create Components for Lightning for Outlook and Lightning for Gmail . . . . . . . . . . . . . 127Create Dynamic Picklists for Your Custom Components . . . . . . . . . . . . . . . . . . . . . . . 132Create a Custom Lightning Page Template Component . . . . . . . . . . . . . . . . . . . . . . . 133

Contents

Lightning Page Template Component Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . 136Make Your Lightning Page Components Width-Aware withlightning:flexipageRegionInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Tips and Considerations for Configuring Components for Lightning Pages and the LightningApp Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Use Lightning Components in Community Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Configure Components for Communities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Create Custom Theme Layout Components for Communities . . . . . . . . . . . . . . . . . . . . 141Create Custom Search and Profile Menu Components for Communities . . . . . . . . . . . . 143Create Custom Content Layout Components for Communities . . . . . . . . . . . . . . . . . . . 144

Use Lightning Components with Flows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146Customize Flow Screens By Using Lightning Components . . . . . . . . . . . . . . . . . . . . . . 146Working with the Flow Lightning Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Display Flow Stages with a Lightning Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Add Components to Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Integrate Your Custom Apps into the Chatter Publisher . . . . . . . . . . . . . . . . . . . . . . . . . . . 170Use Lightning Components in Visualforce Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Add Lightning Components to Any App with Lightning Out (Beta) . . . . . . . . . . . . . . . . . . . . 177

Lightning Out Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178Lightning Out Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178Lightning Out Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Authentication from Lightning Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181Share Lightning Out Apps with Non-Authenticated Users . . . . . . . . . . . . . . . . . . . . . . 182Lightning Out Considerations and Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Chapter 5: Communicating with Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Actions and Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186Handling Events with Client-Side Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Component Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Create Custom Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Fire Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191Handling Component Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Component Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200Application Event Propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201Create Custom Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202Fire Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Handling Application Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Application Event Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Event Handling Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Advanced Events Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210Firing Lightning Events from Non-Lightning Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214Events Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Contents

Events Anti-Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Events Fired During the Rendering Lifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Events Handled in the Salesforce mobile app and Lightning Experience . . . . . . . . . . . . . . . . 218System Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Chapter 6: Creating Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

App Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Designing App UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Creating App Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Developing Secure Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

What is LockerService? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Content Security Policy Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Validations for Lightning Component Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235Validation When You Save Code Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236Validation During Development Using the Salesforce CLI . . . . . . . . . . . . . . . . . . . . . . 237Review and Resolve Validation Errors and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . 240Lightning Component Validation Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Salesforce Lightning CLI (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Styling Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248Using the Salesforce Lightning Design System in Apps . . . . . . . . . . . . . . . . . . . . . . . 249Using External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250More Readable Styling Markup with the join Expression . . . . . . . . . . . . . . . . . . . . . . . 251Tips for CSS in Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Vendor Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Styling with Design Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

Using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268Invoking Actions on Component Initialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269Sharing JavaScript Code in a Component Bundle . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Sharing JavaScript Code Across Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272Using External JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274Working with Attribute Values in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Working with a Component Body in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276Working with Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Modifying the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280Checking Component Validity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284Modifying Components Outside the Framework Lifecycle . . . . . . . . . . . . . . . . . . . . . . 286Validating Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287Throwing and Handling Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289Calling Component Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291Using JavaScript Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296Making API Calls from Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298Create CSP Trusted Sites to Access Third-Party APIs . . . . . . . . . . . . . . . . . . . . . . . . . 299

JavaScript Cookbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300Dynamically Creating Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

Contents

Detecting Data Changes with Change Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . 303Finding Components by ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304Dynamically Adding Event Handlers To a Component . . . . . . . . . . . . . . . . . . . . . . . . 304Dynamically Showing or Hiding Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Adding and Removing Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Which Button Was Pressed? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309Formatting Dates in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Using Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311Creating Server-Side Logic with Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312Working with Salesforce Records . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Testing Your Apex Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332Making API Calls from Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333Creating Components in Apex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Lightning Data Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334Loading a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335Saving a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337Creating a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Deleting a Record . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343Record Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Lightning Data Service Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349SaveRecordResult . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Lightning Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Using a Third-Party Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355Lightning Container Component Limits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362The Lightning Realty App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362lightning-container NPM Module Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Controlling Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370Application Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373Interface Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373Component Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373Attribute Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374Event Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

Using Object-Oriented Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374What is Inherited? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Inherited Component Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375Abstract Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377Inheritance Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

Using the AppCache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379Distributing Applications and Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

Chapter 7: Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Contents

Enable Debug Mode for Lightning Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381Salesforce Lightning Inspector Chrome Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

Install Salesforce Lightning Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382Salesforce Lightning Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Log Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395

Chapter 8: Fixing Performance Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

Clean Unrendered Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397Multiple Items Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Chapter 9: Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

Component Library (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402Differences with Other Documentation Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402

Supported aura:attribute Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403Basic Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404Function Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406Object Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406Standard and Custom Object Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407Collection Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407Custom Apex Class Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408Framework-Specific Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

System Tag Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411aura:application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411aura:component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412aura:dependency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413aura:event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414aura:interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415aura:method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415aura:set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Component Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419aura:expression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419aura:html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420aura:if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420aura:iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421aura:renderIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422aura:template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422aura:text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423aura:unescapedHtml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423auraStorage:init . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423force:canvasApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424force:inputField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426force:outputField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427force:recordData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428force:recordEdit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Contents

force:recordPreview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431force:recordView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432forceChatter:feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432forceChatter:fullFeed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434forceChatter:publisher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435forceCommunity:appLauncher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435forceCommunity:navigationMenuBase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438forceCommunity:notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439forceCommunity:routeLink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440forceCommunity:waveDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441lightning:accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443lightning:accordionSection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443lightning:avatar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445lightning:badge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446lightning:breadcrumb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447lightning:breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449lightning:button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449lightning:buttonGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451lightning:buttonIcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452lightning:buttonIconStateful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454lightning:buttonMenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455lightning:buttonStateful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457lightning:card . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459lightning:carousel (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461lightning:checkboxGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462lightning:clickToDial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464lightning:combobox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465lightning:container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468lightning:datatable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469lightning:dualListbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484lightning:dynamicIcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487lightning:fileCard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488lightning:fileUpload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489lightning:flexipageRegionInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490lightning:flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491lightning:formattedAddress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493lightning:formattedDateTime (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494lightning:formattedEmail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495lightning:formattedLocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496lightning:formattedName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497lightning:formattedNumber (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498lightning:formattedPhone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500lightning:formattedRichText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500lightning:formattedText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

Contents

lightning:formattedTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503lightning:formattedUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503lightning:helptext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505lightning:icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505lightning:input (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507lightning:inputAddress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513lightning:inputField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516lightning:inputLocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518lightning:inputName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519lightning:inputRichText (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521lightning:layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524lightning:layoutItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525lightning:listView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527lightning:menuItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529lightning:omniToolkitAPI (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531lightning:outputField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532lightning:path (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534lightning:picklistPath (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535lightning:pill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536lightning:pillContainer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538lightning:progressBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540lightning:progressIndicator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541lightning:radioGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542lightning:recordEditForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544lightning:recordViewForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546lightning:relativeDateTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547lightning:select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548lightning:slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552lightning:spinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554lightning:tab (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555lightning:tabset (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556lightning:textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560lightning:tile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562lightning:tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564lightning:treeGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566lightning:utilityBarAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575lightning:verticalNavigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578lightning:verticalNavigationItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581lightning:verticalNavigationItemBadge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581lightning:verticalNavigationItemIcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582lightning:verticalNavigationOverflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583lightning:verticalNavigationSection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583lightning:workspaceAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584ltng:require . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586

Contents

ui:actionMenuItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587ui:button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588ui:checkboxMenuItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590ui:inputCheckbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591ui:inputCurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594ui:inputDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596ui:inputDateTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599ui:inputDefaultError . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602ui:inputEmail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604ui:inputNumber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607ui:inputPhone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609ui:inputRadio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612ui:inputRichText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 614ui:inputSecret . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616ui:inputSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618ui:inputSelectOption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622ui:inputText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624ui:inputTextArea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626ui:inputURL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628ui:menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631ui:menuItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634ui:menuItemSeparator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635ui:menuList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636ui:menuTrigger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637ui:menuTriggerLink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638ui:message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639ui:outputCheckbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641ui:outputCurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642ui:outputDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644ui:outputDateTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646ui:outputEmail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647ui:outputNumber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649ui:outputPhone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650ui:outputRichText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652ui:outputText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653ui:outputTextArea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654ui:outputURL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656ui:radioMenuItem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658ui:scrollerWrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659ui:spinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660wave:waveDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661

Messaging Component Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663lightning:notificationsLibrary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663lightning:overlayLibrary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665

Contents

Interface Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669force:hasRecordId . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671force:hasSObjectName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672lightning:actionOverride . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673lightning:appHomeTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674lightning:availableForChatterExtensionComposer . . . . . . . . . . . . . . . . . . . . . . . . . . . 674lightning:availableForChatterExtensionRenderer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674lightning:availableForFlowScreens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675lightning:homeTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676lightning:recordHomeTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676lightningsnapin:prechatUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676

Event Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677force:closeQuickAction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677force:createRecord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 678force:editRecord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680force:navigateToComponent (Beta) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680force:navigateToList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681force:navigateToObjectHome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682force:navigateToRelatedList . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682force:navigateToSObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683force:navigateToURL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684force:recordSave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685force:recordSaveSuccess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685force:refreshView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686force:showToast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686forceCommunity:analyticsInteraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688forceCommunity:routeChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689lightning:openFiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689lightning:sendChatterExtensionPayload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690ltng:selectSObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690ltng:sendMessage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691ui:clearErrors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691ui:collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692ui:expand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692ui:menuFocusChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693ui:menuSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693ui:menuTriggerPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694ui:validationError . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695wave:discoverDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695wave:discoverResponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696wave:selectionChanged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697wave:update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698

System Event Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699aura:doneRendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699

Contents

aura:doneWaiting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700aura:locationChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700aura:systemError . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701aura:valueChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702aura:valueDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703aura:valueInit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704aura:valueRender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704aura:waiting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705

Supported HTML Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706Anchor Tag: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708

Contents

CHAPTER 1 What is the Lightning Component Framework?

The Lightning Component framework is a UI framework for developing dynamic web apps for mobileand desktop devices. Its a modern framework for building single-page applications engineered forgrowth.

In this chapter ...

What is SalesforceLightning?

The framework supports partitioned multi-tier component development that bridges the client andserver. It uses JavaScript on the client side and Apex on the server side.

Why Use theLightning ComponentFramework?

Components

Events

Open Source AuraFramework

Browser SupportConsiderations forLightningComponents

Using the DeveloperConsole

Online Content

1

What is Salesforce Lightning?

Lightning includes the Lightning Component Framework and some exciting tools for developers. Lightning makes it easier to buildresponsive applications for any device.

Lightning includes these technologies:

Lightning components give you a client-server framework that accelerates development, as well as app performance, and is idealfor use with the Salesforce mobile app and Salesforce Lightning Experience.

The Lightning App Builder empowers you to build apps visually, without code, quicker than ever before using off-the-shelf andcustom-built Lightning components. You can make your Lightning components available in the Lightning App Builder so administratorscan build custom user interfaces without code.

Using these technologies, you can seamlessly customize and easily deploy new apps to mobile devices running Salesforce. In fact, theSalesforce mobile app and Salesforce Lightning Experience are built with Lightning components.

This guide provides you with an in-depth resource to help you create your own standalone Lightning apps, as well as custom Lightningcomponents that can be used in the Salesforce mobile app. You will also learn how to package applications and components anddistribute them in the AppExchange.

Why Use the Lightning Component Framework?

The benefits include an out-of-the-box set of components, event-driven architecture, and a framework optimized for performance.

Out-of-the-Box Component SetComes with an out-of-the-box set of components to kick start building apps. You don't have to spend your time optimizing yourapps for different devices as the components take care of that for you.

Rich component ecosystemCreate business-ready components and make them available in the Salesforce app, Lightning Experience, and Communities. Salesforceapp users access your components via the navigation menu. Customize Lightning Experience or Communities using drag-and-dropcomponents on a Lightning Page in the Lightning App Builder or using Community Builder. Additional components are availablefor your org in the AppExchange. Similarly, you can publish your components and share them with other users.

PerformanceUses a stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI component metadataand application data. The client calls the server only when absolutely necessary; for example to get more metadata or data. Theserver only sends data that is needed by the user to maximize efficiency. The framework uses JSON to exchange data between theserver and the client. It intelligently utilizes your server, browser, devices, and network so you can focus on the logic and interactionsof your apps.

Event-driven architectureUses an event-driven architecture for better decoupling between components. Any component can subscribe to an applicationevent, or to a component event they can see.

Faster developmentEmpowers teams to work faster with out-of-the-box components that function seamlessly with desktop and mobile devices. Buildingan app with components facilitates parallel design, improving overall development efficiency.

Components are encapsulated and their internals stay private, while their public shape is visible to consumers of the component.This strong separation gives component authors freedom to change the internal implementation details and insulates componentconsumers from those changes.

2

What is Salesforce Lightning?What is the Lightning Component Framework?

Device-aware and cross browser compatibilityApps use responsive design and provide an enjoyable user experience. The Lightning Component framework supports the latest inbrowser technology such as HTML5, CSS3, and touch events.

Components

Components are the self-contained and reusable units of an app. They represent a reusable section of the UI, and can range in granularityfrom a single line of text to an entire app.

The framework includes a set of prebuilt components. For example, components that come with the Lightning Design System stylingare available in the lightning namespace. These components are also known as the base Lightning components. You can assembleand configure components to form new components in an app. Components are rendered to produce HTML DOM elements within thebrowser.

A component can contain other components, as well as HTML, CSS, JavaScript, or any other Web-enabled code. This enables you tobuild apps with sophisticated UIs.

The details of a component's implementation are encapsulated. This allows the consumer of a component to focus on building theirapp, while the component author can innovate and make changes without breaking consumers. You configure components by settingthe named attributes that they expose in their definition. Components interact with their environment by listening to or publishingevents.

SEE ALSO:

Creating Components

Component Reference

Working with Base Lightning Components

Events

Event-driven programming is used in many languages and frameworks, such as JavaScript and Java Swing. The idea is that you writehandlers that respond to interface events as they occur.

A component registers that it may fire an event in its markup. Events are fired from JavaScript controller actions that are typically triggeredby a user interacting with the user interface.

There are two types of events in the framework:

Component events are handled by the component itself or a component that instantiates or contains the component.

Application events are handled by all components that are listening to the event. These events are essentially a traditionalpublish-subscribe model.

You write the handlers in JavaScript controller actions.

SEE ALSO:

Communicating with Events

Handling Events with Client-Side Controllers

3

ComponentsWhat is the Lightning Component Framework?

Open Source Aura Framework

The Lightning Component framework is built on the open source Aura framework. The Aura framework enables you to build appscompletely independent of your data in Salesforce.

The Aura framework is available at https://github.com/forcedotcom/aura. Note that the open source Aura frameworkhas features and components that are not currently available in the Lightning Component framework. We are working to surface moreof these features and components for Salesforce developers.

The sample code in this guide uses out-of-the-box components from the Aura framework, such as aura:iteration andui:button. The aura namespace contains components to simplify your app logic, and the ui namespace contains componentsfor user interface elements like buttons and input fields. The force namespace contains components specific to Salesforce.

Browser Support Considerations for Lightning Components

EDITIONS

Salesforce Classic availablein: All Editions

EDITIONS

Lightning Experience isavailable in: Group,Professional, Enterprise,Performance, Unlimited,and Developer Editions

Browser support varies across different Salesforce products and experiences. Use this browsersupport information as you build with Lightning components.

The following tables provide high-level minimum browser versions for various Salesforce features.There are additional requirements and recommended settings for all browsers, and a number ofconsiderations that apply to specific browsers. See the browser compatibility details in SalesforceHelp.

Lightning Experience and Lightning-Based FeaturesThe following table describes minimum browser version requirements for using Lightningcomponents within various features that are built with our next-generation user interface platform.

AppleSafari

MozillaFirefox

GoogleChrome

MicrosoftEdge

MicrosoftInternetExplorer

10.x+LatestLatestWindows 10IE 11 (EOLDecember 21,2020)1

LightningExperience

10.x+LatestLatestWindows 10N/ASalesforceConsole inLightningExperience

10.x+LatestLatestWindows 10IE 11LightningCommunities

N/AN/AN/AN/AIE 11Lightning forOutlook(Client)

10.x+LatestLatestWindows 10IE 11Lightning forOutlook (Web)

4

Open Source Aura FrameworkWhat is the Lightning Component Framework?

https://github.com/forcedotcom/aura

Apple SafariMozilla FirefoxGoogle ChromeMicrosoft EdgeMicrosoftInternetExplorer

10.x+LatestLatestWindows 10IE 11StandaloneLightning App(my.app)

10.x+LatestLatestWindows 10IE 9+Lightning Out

1 LockerService is disabled for IE11. We recommend using supported browsers other than IE11 for enhanced security.

Important: Support for Internet Explorer 11 to access Lightning Experience is retiring beginning in Summer 16.

You can continue to use IE11 to access Lightning Experience until December 16, 2017.

If you opt in to Extended Support for IE11, you can continue to use IE11 to access Lightning Experience until December 31,2020.

IE11 has significant performance issues in Lightning Experience.

This change doesnt impact Salesforce Classic or users of orgs with Communities and no opt in is required to use IE11 withCommunities.

Lightning Components for Visualforce in Salesforce ClassicThe following table describes minimum browser version requirements for using Lightning components within various features that arebuilt with our classic user interface platform.

Apple SafariMozilla FirefoxGoogle ChromeMicrosoft EdgeMicrosoftInternetExplorer

10.x+LatestLatestWindows 10IE 9+Salesforce Classic

N/ALatestLatestWindows 10IE 9+Salesforce Console inSalesforce Classic

10.x+LatestLatestWindows 10IE 9+Classic Communities

10.x+LatestLatestWindows 10IE 9+Force.com Sites

Note: The term latest version is defined by the browser vendors. Use the support for your browser(s) to understand what latestversion means.

SEE ALSO:

Salesforce Help: Supported Browsers

Salesforce Help: Recommendations and Requirements for All Browsers

LockerService Disabled for Unsupported Browsers

Content Security Policy Overview

5

Browser Support Considerations for Lightning ComponentsWhat is the Lightning Component Framework?

https://help.salesforce.com/articleView?id=000233325&type=1&language=en_UShttps://help.salesforce.com/apex/HTViewSolution?urlname=Internet-Explorer-Performance-Characteristics-for-Lightning-Experience&language=en_UShttps://help.salesforce.com/articleView?id=getstart_browser_overview.htm&language=en_UShttps://help.salesforce.com/articleView?id=getstart_browser_recommendations.htm&language=en_US

Using the Developer Console

The Developer Console provides tools for developing your components and applications.

The Developer Console enables you to perform these functions.

Use the menu bar (1) to create or open these Lightning resources.

Application

Component

Interface

Event

Tokens

Use the workspace (2) to work on your Lightning resources.

Use the sidebar (3) to create or open client-side resources that are part of a specific component bundle.

Controller

Helper

Style

Documentation

Renderer

Design

SVG

For more information on the Developer Console, see The Developer Console User Interface.

SEE ALSO:

Salesforce Help: Open the Developer Console

Create Lightning Components in the Developer Console

Component Bundles

Online Content

This guide is available online. To view the latest version, go to:

6

Using the Developer ConsoleWhat is the Lightning Component Framework?

https://help.salesforce.com/apex/HTViewHelpDoc?id=code_dev_console_navigating.htm&language=en_US#code_dev_console_navigatinghttps://help.salesforce.com/HTViewHelpDoc?id=code_dev_console_opening.htm&language=en_US

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/

Go beyond this guide with exciting Trailhead content. To explore more of what you can do with Lightning Components, go to:

Trailhead Module: Lightning Components BasicsLink: https://trailhead.salesforce.com/module/lex_dev_lc_basics

Learn with a series of hands-on challenges on how to use Lightning Components to build modern web apps.

Quick Start: Lightning ComponentsLink: https://trailhead.salesforce.com/project/quickstart-lightning-components

Create your first component that renders a list of Contacts from your org.

Project: Build an Account Geolocation AppLink: https://trailhead.salesforce.com/project/account-geolocation-app

Build an app that maps your Accounts using Lightning Components.

Project: Build a Restaurant-Locator Lightning ComponentLink: https://trailhead.salesforce.com/project/workshop-lightning-restaurant-locator

Build a Lightning component with Yelps Search API that displays a list of businesses near a certain location.

Project: Build a Lightning App with the Lightning Design SystemLink: https://trailhead.salesforce.com/project/slds-lightning-components-workshop

Design a Lightning component that displays an Account list.

7

Online ContentWhat is the Lightning Component Framework?

https://developer.salesforce.com/docs/atlas.en-us.212.0.lightning.meta/lightning/https://trailhead.salesforce.com/module/lex_dev_lc_basicshttps://trailhead.salesforce.com/project/quickstart-lightning-componentshttps://trailhead.salesforce.com/project/account-geolocation-apphttps://trailhead.salesforce.com/project/workshop-lightning-restaurant-locatorhttps://trailhead.salesforce.com/project/slds-lightning-components-workshop

CHAPTER 2 Quick Start

The quick start provides Trailhead resources for you to learn core Lightning components concepts, anda short tutorial that builds a Lightning component to manage selected contacts in the Salesforce app

In this chapter ...

Before You Begin and Lightning Experience. Youll create all components from the Developer Console. The tutorial usesseveral events to create or edit contact records, and view related cases. Trailhead: Explore

LightningComponentsResources

Create a Componentfor LightningExperience and theSalesforce MobileApp

8

Before You Begin

To work with Lightning apps and components , follow these prerequisites.

1. Create a Developer Edition organization

2. Define a Custom Salesforce Domain Name

Note: For this quick start tutorial, you dont need to create a Developer Edition organization or register a namespace prefix. Butyou want to do so if youre planning to offer managed packages. You can create Lightning components using the UI in Enterprise,Performance, Unlimited, Developer Editions or a sandbox. If you dont plan to use a Developer Edition organization, you cango directly to Define a Custom Salesforce Domain Name.

Create a Developer Edition OrganizationYou need an org to do this quick start tutorial, and we recommend you dont use your production org. You only need to create a DeveloperEdition org if you dont already have one.

1. In your browser, go to https://developer.salesforce.com/signup?d=70130000000td6N.

2. Fill in the fields about you and your company.

3. In the Email field, make sure to use a public address you can easily check from a Web browser.

4. Type a unique Username. Note that this field is also in the form of an email address, but it does not have to be the same as youremail address, and in fact, its usually better if they arent the same. Your username is your login and your identity ondeveloper.salesforce.com, so youre often better served by choosing a username such [email protected].

5. Read and then select the checkbox for the Master Subscription Agreement and then click Submit Registration.

6. In a moment youll receive an email with a login link. Click the link and change your password.

Define a Custom Salesforce Domain NameA custom domain name helps you enhance access security and better manage login and authentication for your organization. If yourcustom domain is universalcontainers, then your login URL would behttps://universalcontainers.lightning.force.com. For more information, see My Domain in the Salesforce Help.

Trailhead: Explore Lightning Components Resources

Get up to speed with the fundamentals of Lightning components with Trailhead resources.

Whether youre a new Salesforce developer or a seasoned Visualforce developer, we recommend that you start with the followingTrailhead resources.

Lightning Components BasicsUse Lightning components to build modern web apps with reusable UI components. Youll learn core Lightning componentsconcepts and build a simple expense tracker app that can be run in a standalone app, Salesforce app, or Lightning Experience.

Quick Start: Lightning ComponentsCreate your first component that renders a list of contacts from your org.

Build an Account Geolocation AppBuild an app that maps your accounts using Lightning components.

9

Before You BeginQuick Start

https://developer.salesforce.com/signup?d=70130000000td6Nhttps://help.salesforce.com/apex/HTViewHelpDoc?id=domain_name_overview.htm&language=en_US#domain_name_overviewhttps://trailhead.salesforce.com/modules/lex_dev_lc_basicshttps://trailhead.salesforce.com/projects/quickstart-lightning-componentshttps://trailhead.salesforce.com/projects/account-geolocation-app

Build a Lightning App with the Lightning Design SystemDesign a Lightning component that displays an account list.

Build a Restaurant-Locator Lightning ComponentBuild a Lightning component with Yelps Search API that displays a list of businesses near a certain location.

Create a Component for Lightning Experience and the Salesforce MobileApp

Explore how to create a custom UI that loads contact data and interacts with Lightning Experience and the Salesforce app.

This tutorial walks you through creating a component that:

Displays a toast message (1) using the force:showToast event when all contacts are loaded successfully.

Updates the number of contacts (2) based on the selected lead source.

Filters the contacts using the lightning:select component (3) when a lead source (referral or social media) is selected.

Displays the contact data using the lightning:card component (4).

Navigates to the record when the Details button (5) is clicked.

10

Create a Component for Lightning Experience and theSalesforce Mobile App

Quick Start

https://trailhead.salesforce.com/projects/slds-lightning-components-workshophttps://trailhead.salesforce.com/projects/workshop-lightning-restaurant-locator

Heres how the component looks like in the Salesforce app. Youre creating two components, contactList and contacts, wherecontactList is a container component that iterates over and displays contacts components. All contacts are displayed incontactList, but you can select different lead sources to view a subset of contacts associated with the lead source.

11


Quick Start

In the next few topics, you create the following resources.

DescriptionResource

Contacts Bundle

The component that displays individual contactscontacts.cmp

The client-side controller action that navigates to a contact record using theforce:navigateToSObject event

contactsController.js

contactList Bundle

The component that loads the list of contactscontactList.cmp

The client-side controller actions that call the helper resource to load contact data and handles the leadsource selection

contactListController.js

12


Quick Start

DescriptionResource

The helper function that retrieves contact data, displays a toast message on successful loading of contactdata, displays contact data based on lead source, and update the total number of contacts

contactListHelper.js

Apex Controller

The Apex controller that queries all contact records and those records based on different lead sourcesContactController.apxc

Load the ContactsCreate an Apex controller and load your contacts. An Apex controller is the bridge that connects your components and your Salesforcedata.

Your organization must have existing contact records for this tutorial.

1. Click File > New > Apex Class, and then enter ContactController in the New Class window. A new Apex class,ContactController.apxc, is created. Enter this code and then save.

public with sharing class ContactController {@AuraEnabled

public static List getContacts() {List contacts =

[SELECT Id, Name, MailingStreet, Phone, Email, LeadSource FROM Contact];

//Add isAccessible() checkreturn contacts;

}}

ContactController contains methods that return your contact data using SOQL statements. This Apex controller is wiredup to your component in a later step. getContacts() returns all contacts with the selected fields.

2. Click File > New > Lightning Component, and then enter contacts for the Name field in the New Lightning Bundle popupwindow. This creates a component, contacts.cmp. Enter this code and then save.

{!v.contact.Phone}

{!v.contact.MailingStreet}

13

Load the ContactsQuick Start

This component creates the template for your contact data using the lightning:card component, which simply creates avisual container around a group of information. This template gets rendered for every contact that you have, so you have multipleinstances of a component in your view with different data. The onclick event handler on the lightning:button componentcalls the goToRecord client-side controller action when the buton is clicked. Notice the expression {!v.contact.Name}?v represents the view, which is the set of component attributes, and contact is the attribute of type Contact. Using this dotnotation, you can access the fields in the contact object, like Name and Email, after you wire up the Apex controller to thecomponent in the next step.

3. Click File > New > Lightning Component, and then enter contactList for the Name field in the New Lightning Bundlepopup window, which creates the contactList.cmp component. Enter this code and then save. If youre using a namespacein your organization, replace ContactController with myNamespace.ContactController. You wire up the Apexcontroller to the component by using the controller="ContactController" syntax.

ContactsContact

Viewer

{!v.totalContacts} Contacts ViewContacts Based on Lead Sources

14


-- Select a Lead Source --

Lets dive into the code. We added the init handler to load the contact data during initialization. The handler calls the client-sidecontroller code in the next step. We also added two attributes, contacts and totalContacts, which stores the list of contactsand a counter to display the total number of contacts respectively. Additionally, the contactList component is an attributeused to store the filtered list of contacts when an option is selected on the lead source dropdown menu. The lightning:layoutcomponents simply create grids to align your content in the view with Lightning Design System CSS classes.

The page header contains the {!v.totalContacts} expression to dynamically display the number of contacts based on thelead source you select. For example, if you select Referral and there are 30 contacts whose Lead Source fields are set toReferral, then the expression evaluates to 30.

Next, we create a dropdown menu with the lightning:select component. When you select an option in the dropdownmenu, the onchange event handler calls your client-side controller to update the view with a subset of the contacts. You createthe client-side logic in the next few steps.

In case youre wondering, the force:appHostable interface enables your component to be surfaced in Lightning Experienceand the Salesforce mobile app as tabs, which we are getting into later.

4. In the contactList sidebar, click CONTROLLER to create a resource named contactListController.js. Replace theplaceholder code with the following code and then save.

({doInit : function(component, event, helper) {

// Retrieve contacts during component initializationhelper.loadContacts(component);

},

handleSelect : function(component, event, helper) {var contacts = component.get("v.contacts");var contactList = component.get("v.contactList");

//Get the selected option: "Referral", "Social Media", or "All"var selected = event.getSource().get("v.value");

var filter = [];var k = 0;for (var i=0; i

k++;}

}else {

filter = contactList;}

}//Set the filtered list of contacts based on the selected optioncomponent.set("v.contacts", filter);helper.updateTotal(component);

}})

The client-side controller calls helper functions to do most of the heavy-lifting, which is a recommended pattern to promote codereuse. Helper functions also enable specialization of tasks, such as processing data and firing server-side actions, which is what weare covering next. Recall that the onchange event handler on the lightning:select component calls the handleSelectclient-side controller action, which is triggered when you select an option in the dropdown menu. handleSelect checks theoption value thats passed in using event.getSource().get("v.value"). It creates a filtered list of contacts by checkingthat the lead source field on each contact matches the selected lead source. Finally, update the view and the total number of contactsbased on the selected lead source.

5. In the contactList sidebar, click HELPER to create a resource named contactListHelper.js. Replace the placeholder codewith the following code and then save.

({loadContacts : function(cmp) {

// Load all contact datavar action = cmp.get("c.getContacts");action.setCallback(this, function(response) {

var state = response.getState();if (state === "SUCCESS") {

cmp.set("v.contacts", response.getReturnValue());cmp.set("v.contactList", response.getReturnValue());this.updateTotal(cmp);

}

// Display toast message to indicate load statusvar toastEvent = $A.get("e.force:showToast");if (state === 'SUCCESS'){

toastEvent.setParams({"title": "Success!","message": " Your contacts have been loaded successfully."

});}else {

toastEvent.setParams({"title": "Error!","message": " Something has gone wrong."

});}toastEvent.fire();

});$A.enqueueAction(action);

},

16


updateTotal: function(cmp) {var contacts = cmp.get("v.contacts");cmp.set("v.totalContacts", contacts.length);

}})

During initialization, the contactList component loads the contact data by:

Calling the Apex controller method getContacts, which returns the contact data via a SOQL statement

Setting the return value via cmp.set("v.contacts", response.getReturnValue()) in the action callback,which updates the view with the contact data

Updating the total number of contacts in the view, which is evaluated in updateTotal

You must be wondering how your component works in Lightning Experience and the Salesforce app. Lets find out next!

6. Make the contactList component available via a custom tab in Lightning Experience and the Salesforce app.

Add Lightning Components as Custom Tabs in Lightning Experience

Add Lightning Components as Custom Tabs in the Salesforce App

For this tutorial, we recommend that you add the component as a custom tab in Lightning Experience.

When your component is loaded in Lightning Experience or the Salesforce app, a toast message indicates that your contacts are loadedsuccessfully. Select a lead source from the dropdown menu and watch your contact list and the number of contacts update in the view.

Next, wire up an event that navigates to a contact record when you click a button in the contact list.

Fire the EventsFire the events in your client-side controller or helper functions. The force events are handled by Lightning Experience and theSalesforce mobile app, but lets view and test the components in Lightning Experience to simplify things.

This demo builds on the contacts component you created in Load the Contacts on page 13.

1. In the contacts sidebar, click CONTROLLER to create a resource named contactsController.js. Replace the placeholdercode with the following code and then save.

({goToRecord : function(component, event, helper) {

// Fire the event to navigate to the contact recordvar sObjectEvent = $A.get("e.force:navigateToSObject");sObjectEvent.setParams({

"recordId": component.get("v.contact.Id")})sObjectEvent.fire();

}})

The onclick event handler in the following button component triggers the goToRecord client-side controller when thebutton is clicked.

You set the parameters to pass into the events using the event.setParams() syntax. In this case, youre passing in the Id ofthe contact record to navigate to. There are other events besides force:navigateToSObject that simplify navigation within

17

Fire the EventsQuick Start

Lightning Experience and the Salesforce app. For more information, see Events Handled in the Salesforce mobile app and LightningExperience.

2. To test the event, refresh your custom tab in Lightning Experience, and click the Details button.

The force:navigateToSObject is fired, which updates the view to display the contact record page.

We stepped through creating a component that loads contact data using a combination of client-side controllers and Apex controllermethods to create a custom UI with your Salesforce data. The possibilities of what you can do with Lightning components are endless.While we showed you how to surface a component via a tab in Lightning Experience and the Salesforce app, you can take this tutorialfurther by surfacing the component on record pages via the Lightning App Builder and even Communities. To explore the possibilities,blaze the trail with the resources available at Trailhead: Explore Lightning Components Resources.

18

Fire the EventsQuick Start

CHAPTER 3 Creating Components

Components are the functional units of the Lightning Component framework.In this chapter ...A component encapsulates a modular and potentially reusable section of UI, and can range in granularityfrom a single line of text to an entire application.

Create LightningComponents in theDeveloper Console

Component Markup

ComponentNamespace

Component Bundles

Component IDs

HTML in Components

CSS in Components

ComponentAttributes

ComponentComposition

Component Body

Component Facets

Best Practices forConditional Markup

ComponentVersioning

Components withMinimum API VersionRequirements

Using Expressions

Using Labels

Localization

ProvidingComponentDocumentation

Working with BaseLightningComponents

Working with UIComponents

19

SupportingAccessibility

20

Creating Components


The Developer Console is a convenient, built-in tool you can use to create new and edit existing Lightning components and otherbundles.

1. Open the Developer Console.

Select Developer Console from the Your Name or the quick access menu ( ).

2. Open the New Lightning Bundle panel for a Lightning component.

Select File > New > Lightning Component.

3. Name the component.

For example, enter helloWorld in the Name field.

4. Optional: Describe the component.

Use the Description field to add details about the component.

5. Optional: Add component configurations to the new component.

You can select as many options in the Component Configuration section as you wish, or select no configuration at all.

6. Click Submit to create the component.

Or, to cancel creating the component, click the panels close box in the top right corner.

Example:

21

Create Lightning Components in the Developer ConsoleCreating Components

IN THIS SECTION:

Lightning Bundle Configurations Available in the Developer Console

Configurations make it easier to create a component or application for a specific purpose, like a Lightning Page or LightningCommunities Page, or a quick action or navigation item in Lightning Experience or Salesforce mobile app. The New Lightning Bundlepanel in the Developer Console offers a choice of component configurations when you create a Lightning component or applicationbundle.

SEE ALSO:


Lightning Bundle Configurations Available in the Developer Console

Lightning Bundle Configurations Available in the Developer ConsoleConfigurations make it easier to create a component or application for a specific purpose, like a Lightning Page or Lightning CommunitiesPage, or a quick action or navigation item in Lightning Experience or Salesforce mobile app. The New Lightning Bundle panel in theDeveloper Console offers a choice of component configurations when you create a Lightning component or application bundle.

Configurations add the interfaces required to support using the component in the desired context. For example, when you choose theLightning Tab configuration, your new component includes implements="force:appHostable" in the tag.

Using configurations is optional. You can use them in any combination, including all or none.

The following configurations are available in the New Lightning Bundle panel.

DescriptionMarkupConfiguration

Lightning component bundle

Creates a component for use as anavigation element in LightningExperience or Salesforce mobile apps.

implements="force:appHostable"Lightning Tab

22

Lightning Bundle Configurations Available in the DeveloperConsole

Creating Components

DescriptionMarkupConfiguration

Creates a component for use inLightning pages or the Lightning AppBuilder.

implements="flexipage:availableForAllPageTypes"and access="global"

Lightning Page

Creates a component for use on arecord home page in LightningExperience.

implements="flexipage:availableForRecordHome,force:hasRecordId" and access="global"

Lightning Record Page

Creates a component thats availablefor drag and drop in the CommunityBuilder.

implements="forceCommunity:availableForAllPageTypes"and access="global"

Lightning CommunitiesPage

Creates a component that can beused with a Lightning quick action.

implements="force:lightningQuickAction"Lightning Quick Action

Lightning application bundle

Creates an empty Lightning Outdependency app.

extends="ltng:outApp"Lightning OutDependency App

Note: For details of the markup added by each configuration, see the respective documentation for those features.

SEE ALSO:


Interface Reference

Configure Components for Custom Tabs

Configure Components for Custom Actions

Configure Components for Lightning Pages and the Lightning App Builder

Configure Components for Lightning Experience Record Pages

Configure Components for Communities

Component Markup

Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, andalso declares metadata about the component.

Let's start with a simple "Hello, world!" example in a helloWorld.cmp component.

Hello, world!

This is about as simple as a component can get. The "Hello, world!" text is wrapped in the tags, which appearat the beginning and end of every component definition.

23

Component MarkupCreating Components

Components can contain most HTML tags so you can use markup, such as and . HTML5 tags are also supported.

Note: Case sensitivity should be respected as your markup interacts with JavaScript, CSS, and Apex.

Use the Developer Console to create components.

Component Naming RulesA component name must follow these naming rules:

Must begin with a letter

Must contain only alphanumeric or underscore characters

Must be unique in the namespace

Cant include whitespace

Cant end with an underscore

Cant contain two consecutive underscores

SEE ALSO:

aura:component


Component Access Control

Create a Custom Renderer

Dynamically Creating Components

Component Namespace

Every component is part of a namespace, which is used to group related components together. If your organization has a namespaceprefix set, use that namespace to access your components. Otherwise, use the default namespace to access your components.

Another component or application can reference a component by adding in its markup. Forexample, the helloWorld component is in the docsample namespace. Another component can reference it by addin

Lightning Components Developer Guide

Documents

Transcript of Lightning Components Developer Guide