Newer Version Available
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.
Example
This example uses the JavaScript controller to pass the flow's accountName and numberOfEmployees variables into attributes on the component. Then, the component displays those values in output components.
1<aura:component>
2 <aura:attribute name="accountName" type="String" />
3 <aura:attribute name="numberOfEmployees" type="Decimal" />
4
5 <p><lightning:formattedText value="{!v.accountName}" /></p>
6 <p><lightning:formattedNumber style="decimal" value="{!v.numberOfEmployees}" /></p>
7
8 <aura:handler name="init" value="{!this}" action="{!c.init}"/>
9 <lightning:flow aura:id="flowData" onstatuschange="{!c.handleStatusChange}" />
10</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
9 handleStatusChange : function (component, event) {
10 if(event.getParam("status") === "FINISHED") {
11 // Get the output variables and iterate over them
12 var outputVariables = event.getParam("outputVariables");
13 var outputVar;
14 for(var i = 0; i < outputVariables.length; i++) {
15 outputVar = outputVariables[i];
16 // Pass the values to the component's attributes
17 if(outputVar.name === "accountName") {
18 component.set("v.accountName", outputVar.value);
19 } else {
20 component.set("v.numberOfEmployees", outputVar.value);
21 }
22 }
23 }
24 },
25})