Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Component IDs

A component has two types of IDs: a local ID and a global ID. You can retrieve a component using its local ID in your JavaScript code. A global ID can be useful to differentiate between multiple instances of a component or for debugging purposes.

Local IDs

A local ID is an ID that is only scoped to the component. A local ID is often unique but it’s not required to be unique.

Create a local ID by using the aura:id attribute. For example:

1<lightning:button aura:id="button1" label="button1"/>

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

Note

Find the button component by calling cmp.find("button1") in your client-side controller, where cmp is a reference to the component containing the button.

find() returns different types depending on the result.

  • If the local ID is unique, find() returns the component.
  • If there are multiple components with the same local ID, find() returns an array of the components.
  • If there is no matching local ID, find() returns undefined.

To find the local ID for a component in JavaScript, use cmp.getLocalId().

Global IDs

Every component has a unique globalId, which is the generated runtime-unique ID of the component instance. A global ID (1) is not guaranteed to be the same beyond the lifetime of a component, so it should never be relied on. A global ID can be useful to differentiate between multiple instances of a component or for debugging purposes.

Every component has a unique global ID.

To create a unique ID for an HTML element, you can use the globalId as a prefix or suffix for your element. For example:

1<div id="{!globalId + '_footer'}"></div>

In your browser’s developer console, retrieve the element using document.getElementById("<globalId>_footer"), where <globalId> is the generated runtime-unique ID.

To retrieve a component’s global ID in JavaScript, use the getGlobalId() function.

1var globalId = cmp.getGlobalId();