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.
-
Reference Flow Output Variable Values in a Wrapper Aura Component
When you embed a flow in an Aura component, you can display or reference the flow’s variable values. Use the onstatuschange action to get values from the flow’s output variables. Output variables are returned as an array.
-
Set Flow Input Variable Values from a Wrapper Aura Component
When you embed a flow in a custom Aura component, give the flow more context by initializing its variables. In the component’s controller, create a list of maps, then pass that list to the startFlow method.
-
Control a Flow’s Finish Behavior by Wrapping the Flow in a Custom Aura Component
By default, when a flow user clicks Finish, a new interview starts and the user sees the first screen of the flow again. By embedding a flow in a custom Aura component, you can shape what happens when the flow finishes by using the onstatuschange action. To redirect to another page, use one of the force:navigateTo* events such as force:navigateToObjectHome or force:navigateToUrl.
-
Resume a Flow Interview from an Aura Component
By default, users can resume interviews that they paused from the Paused Interviews component on their home page. To customize how and where users can resume their interviews, embed the lightning:flow component in a custom Aura component. In your client-side controller, pass the interview ID into the resumeFlow method.
See Also
j