Newer Version Available

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

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.

The variable must allow output access. If you reference a variable that doesn’t allow output access, attempts to get the variable are ignored.

Note

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})