Control Flow Behavior with Lightning Component
Introduction
In this blog post is the extension for this two posts Salesforce Flow Actions and Invoking Flow From Lightning Component. In this post, I am going to explain how to set up the flow with input and output variable and finish behavior from the Lightning component.This is more or less similar to control the flow behavior from the visualforce. I am going to reuse the same flow which I created for the Salesforce Flow Actions. But create a different input and output variable to store the values instead of using screen input variable to store the value.
Go to developer console and create a new Lightning component with below code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<lightning:flow aura:id="flowId" onstatuschange="{!c.handleStatusChange}" />
</aura:component>
Here is the basic code for the controller.
({
init : function (component) {
var flow = component.find("flowId");
flow.startFlow("SOinser");
},
handleStatusChange : function (component, event) {
},
})
Set Flow Variables
({
init : function (component) {
var flow = component.find("flowId");
var inputVariables = [
{ name : "salesorderid", type : "String", value: "1234" },
{ name : "poid", type : "String", value:"PO#123" },
{ name : "orderamountid", type : "Currency", value:9000 },
{ name : "disid", type : "Number", value:12 },
{ name : "shipingid", type : "Currency", value: 120 }
];
flow.startFlow("SOinser" , inputVariables);
},
handleStatusChange : function (component, event) {
},
})
In the above controller code, we have used inputVariables array to hold the default values and passed it to the startFlow method as the second argument. You can see the flow has populated the values as shown below.
Even if you would like to populate a value form the apex class you will be able to do it as shown below.Create a server-side apex controller as shown below and refer from the component
public class TestFlow {
@AuraEnabled
public static Account getAccountId(){
return [Select Id , Name from Account Limit 1];
}
}
In the Component controller, you can modify the code as shown below. It’s going to fetch server-side data on the initialization of the component and populate it the flow as an input variable.
var action = component.get("c.getAccountId");
action.setCallback(this, function(response) {
var inputVariables = [
{
name : "account",
type : "SObject",
value: response.getReturnValue()
}
];
flow.startFlow("myFlow", inputVariables);
});
Below table shows some of the data types and its valid values format.
| Flow Variable Type | Type | Valid Values |
| Text | String | { name : “textVar”, type : “String”, value: “Passing String” } |
| Number | Number | { name : “numVar”, type : “Number”, value: 30 }, |
| Currency | Currency | { name : “cncyVar”, type : ” Currency “, value: 30.12 }, |
| Boolean | Boolean | { name : “boolVar”, type : ” Boolean “, value: true }, |
| Date | Date | { name : “dateColl”, type : “String”, value: [ “2016-10-27”, “2017-08-01” ] }, |
| Date/Time | DateTime | { name : “dateTimeColl”, type : “String”, value: [ “2016-10-27”, “2017-08-01:00:00:00:T” ] }, |
| sObject | SObject | 1 .{ name : “account”, type : “SObject”, value: {“Id” : component.get(“v.accountId”),”Rating” : “Warm”}}
2. { name : “account”, type : “SObject”, value: value: response.getReturnValue()}} |
Get Flow Variable
Even you can able to get the 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. Now here is the mockup code that will display the result to component from the flow variables
<aura:attribute name="salesorderid" type="String" />
<aura:attribute name="poid" type="Decimal" />
<aura:attribute name="orderamountid" type="Currency" />
<aura:attribute name="disid" type="Number" />
<aura:attribute name="shipingid" type="Currency" />
<p><lightning:formattedText value="{!v.salesorderid}" /></p>
<p><lightning:formattedText value="{!v.poid}" /></p>
<p><lightning:formattedText value="{!v.orderamountid}" /></p>
<p><lightning:formattedText value="{!v.shipingid}" /></p>
Now from the controller handleStatusChange method you can able get the flow status by calling event.getParam(“status”) and event.getParam(“outputVariables”) return the output variables as shown below .
handleStatusChange : function (component, event) {
if(event.getParam("status") === "FINISHED") {
console.log('Runing');
var outputVariables = event.getParam("outputVariables");
console.log(outputVariables) ;
var outputVar;
for(var i = 0; i < outputVariables.length; i++) {
outputVar = outputVariables[i];
if(outputVar.name === "salesorderid") {
component.set("v.salesorderid", outputVar.value);
}
}
}
}
Here is display result value console for the same.
Set Finish Behavior
By default, when a flow user clicks Finish, the component starts a new interview and the user sees the first screen of the flow again. However, 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 as shown below on handleStatusChange controller method.
if(outputVar.name === "redirect") {
var urlEvent = $A.get("e.force:navigateToSObject");
urlEvent.setParams({
"recordId": outputVar.value,
"isredirect": "true"
});
urlEvent.fire();
}
}
