Control Flow Behavior with Lightning Component


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}" />

Here is the basic code for the controller.

    init : function (component) {
        var flow = component.find("flowId");
    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 {
    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") {
            var outputVariables = event.getParam("outputVariables");
            console.log(outputVariables) ;
            var outputVar;
            for(var i = 0; i < outputVariables.length; i++) {
                outputVar = outputVariables[i];
                if( === "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( === "redirect") {
                    var urlEvent = $A.get("e.force:navigateToSObject");
                        "recordId": outputVar.value,
                        "isredirect": "true"



Invoking Flow From Lightning Component


In this blog, I am going to explain how to include a flow in your Lightning component.what I am going to do here is I am creating a Lightning component that will contain flow to create a sales order from the account.

Create a Flow 

Now I am going to create a flow to insert the sales order from the flow screen. We are using two flow elements in this example namely screen and record create elements.Go to flow from the setup menu and click on the new flow . from the Palette drag and drop the screen element into the flow  as shown below

From the add field sections add the different filed to store the sales order data into the object as shown below and click OK after adding all the fields labels

Now drag and drop the records create element flow to insert data into the sales order object. Select the Sales Order object from the Assignments 

perform the field mappings from  the screen input as shown below

Connect the flow element and set the screen element as flow starting element.

Save the flow as shown below and activate the flow.

Create a lighting component 

Go to developer console and create a new Lightning component “Flow Demo”  with the 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" />

And Controller is here below.

    init : function (component) {
        // Find the component whose aura:id is "flowId"
        var flow = component.find("flowId");
        // In that component, start your flow. Reference the flow's Unique Name.

Understand the code

  • We used <lightning: flow> component to add the flow onto the UI with aura: id.
  • From the controller init method get the flow aura: id of the lightning: flow component to set the flow.
  • Invoke your flow from flow.startFlow(“SOinser”) method of component  .








Salesforce Flow Actions


In this blog post, I am going to explain how to create a Salesforce  1 and lightning action using the flows. With the new support on flows with Action on your Lightning pages and Salesforce 1, you can invoke flow directly from action rather than using URL to invoke   To create a flow action, select Flow (Beta) from the Action Type dropdown when you create an object-specific action. You can add flow actions to an object’s page layout using the page layout editor.


  • Flow actions support only flows that include screens. Make sure the flow that you want to use has a type “Flow”.
  • Flow Status The flow must be active.
  • Flow actions are available only as object-specific actions.
  • Flow actions send the record ID to your flow automatically if the flow includes a Text input variable called recordId
  • ActionsPackaging and other deployment options aren’t supported for flow actions.

Here what we are going to do now is set up an action that is going to create a beta customer and its deployment from the action. Here is the data model for the same.

Data model Setup


Create a new child Object Beta Customer from the account with the following details

Beta Customer with Auto Number (Plugin__c) and list of fields are here below.

API Name Type
Product_Name__c Text
Beta_Status__c Picklist Active, Closed, On-Hold, Closed
Beta_Start_Date__c Date
Beta_End_Date__c Date
Version__c Text

Beta Deployment with Auto Number and list of fields are here below.

API Name Type
Site_Status__c Picklist Closed, On-Hold, Planned, Active
Beta_Site_Update_Date__c Date
 Plugin Master-Detail(Beta Product)  Master Details
Internal_Comments__c Text Area
Customer_Feedback__c Text Area
Beta_Site_Update_Date__c Date

Designing Flow

Now we are going to design the flow to invoke from the action . Go to Flow designer  from the setup and create a new flow from there . From the Palette drag  and drop the screen to designer as show below .Enter the name of the screen name as “Beta Customer Setup”

Go to Add Fields sections click on the Textbox to add it the screen. 

Double click the new text box from Field Settings and add the Label and Unique name with Product Id as shown below. Repeat the same steps and add two new fields to screen namely start date and end date of type date.

Now Add the new Dropdown list from the add fields and name it as Beta Status.

from the choice, set select the picklist choice and complete it as shown below.

Click on the OK now to complete the screen setup.
From the flow designer palette drag and drop the record create the element to the screen as shown below and name it as “Insert Beta”. From the assignment, section choose the “Plugins__c” from the custom object list as shown below.

Map all the files to the object from the screen input fields and screen input choice type . after mapping all the fields screen should look like as below.

Create a new variable name “betaId” to store the inserted object id as shown below.

Click OK to save.

Drag and Drop the screen element from the Palette and name it as beta deployment as shown below.

Add the new filed “Drop down list type to screen and name it as “Site_Status” from the choice setting create a new pick list choice from the Object and Custom field  as status shown below and click OK

And add the Beta_Site_Update_Date filed of type date  and Internal_Comments, Customer_Feedback of type Long Text Area to the screen.

Click on OK  as shown below.

Now connect all the element as shown below and make Beta Customer Setup as the starting element to the flow.

Save the flow as shown below.

Creating Object Actions

now go to Setup–>Customize-> Account-> Buttons links and actions ->create a new action as shown below and add it to the page layout

After adding it to the page layout, you can see the action on the account record page which allows you to save the two records beta customer and beta deployment with the same action.

With the flows with the quick action, you can easily achieve the more actions on the lightning experience and salesforce 1 without writing any sort of code.