Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Get Your Aura Components Ready to Use on Lightning Pages
Use Aura Components in Experience Builder
Use Aura Components with Flows
Considerations for Configuring Components for Flows
Customize Flow Screens Using Aura Components
Create Flow Local Actions Using Aura Components
Configure the Component Markup and Design Resource for a Flow Action
Configure the Client-Side Controller for a Flow Local Action
Cancel an Asynchronous Request in a Flow Local Action
Embed a Flow in a Custom Aura Component
Display Flow Stages with an Aura Component
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Use Aura and Lightning Web Components Outside of Salesforce with Lightning Out (Beta)
Lightning Container
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.

Configure the Component Markup and Design Resource for a Flow Action

Make your custom Aura components available as flow local actions by implementing the lightning:availableForFlowActions interface.

We recommend that you omit markup from local actions. Local actions tend to execute quickly, and any markup you add to them will likely disappear before the user can make sense of it. If you want to display something to users, check out Customize Flow Screens Using Aura Components instead.

Tip

Here’s sample code for a simple “Hello World” component that sets a couple of attributes.

1<aura:component implements="lightning:availableForFlowActions" access="global">
2   <aura:attribute name="greeting" type="String" access="global" />
3   <aura:attribute name="subject" type="String" access="global" />
4</aura:component>

Mark your resources, such as a component, with access="global" to make the resource usable outside of your own org. For example, you want a component to be usable in an installed package or by a Lightning App Builder user or an Experience Builder user in another org.

Note

To make an attribute’s value customizable in Flow Builder, add it to the component's design resource. That way, flow admins can pass values between that attribute and the flow when they configure the corresponding Core Action element.

With this sample design resource, flow admins can customize the values for the “Hello World” component’s attributes.

1<design:component>
2   <design:attribute name="greeting" label="Greeting" />
3   <design:attribute name="subject" label="Subject" />
4</design:component>

A design resource describes the design-time behavior of a Lightning component—information that visual tools require to allow adding the component to a page or app. Adding this resource is similar to adding it for the Lightning App Builder.

When admins reference this component in a flow, they can pass data between the flow and the Aura component. Use the Set Input Values tab to set an attribute using values from the flow. Use the Store Output Values tab to store an attribute’s value in a flow variable.