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 ActionsBut 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

 When you embed a flow in a Lightning component, give the flow more context by initializing its variables, sObject variables, collection variables, or sObject collection variables. In the component’s controller, create a list of maps, then pass that list to the startFlow method on the component. Now, let’s start modifying the code to pass the default values when the flow is launched from the component as shown below.
({
    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();
                }
            }