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
Embed a Flow in a Custom Aura Component
Reference Flow Output Variable Values in a Wrapper Aura Component
Set Flow Input Variable Values from a Wrapper Aura Component
Control a Flow’s Finish Behavior by Wrapping the Flow in a Custom Aura Component
Resume a Flow Interview from an 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

Newer Version Available

This content describes an older version of this product. View Latest

Embed a Flow in a Custom Aura Component

Once you embed a flow in an Aura component, use JavaScript and Apex code to configure the flow at run time. For example, pass values into the flow or to control what happens when the flow finishes. lightning:flow supports only screen flows and autolaunched flows.

A flow is an application, built with Flow Builder, that collects, updates, edits, and creates Salesforce information.

To embed a flow in your Aura component, add the <lightning:flow> component to it. 

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.init}" />
3    <lightning:flow aura:id="flowData" />
4</aura:component>
1({
2    init : function (component) {
3        // Find the component whose aura:id is "flowData"
4        var flow = component.find("flowData");
5        // In that component, start your flow. Reference the flow's API Name.
6        flow.startFlow("myFlow");
7    },
8})

When a page loads that includes a flow component, such as Lightning App Builder or an active Lightning page, the flow runs. Make sure that the flow doesn’t perform any actions – such as create or delete records – before the first screen.

Note