Get Flow Variable Values to a Lightning Component

Flow variable values can be displayed or referenced in a Lightning component. Once you’ve embedded your flow in a custom Lightning component, 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. For each flow variable, output access is controlled by:

The Input/Output Type variable field in the Cloud Flow Designer
The isInput field on FlowVariable in the Metadata API

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

Lightning Components Developer Guide

Get Flow Variable Values to a Lightning Component

Example

See Also