Lightning ComponentsDeveloper Guide

Version 42.0, Spring 18

@salesforcedocsLast updated: April 19, 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 .