HomeFlowControl Flow Behavior with Lightning Component

Control Flow Behavior with Lightning Component

By October 25, 2017 Flow 0 Comments

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

Here is the basic code for the controller.

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.

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

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.

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

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 .

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.

 

 

Related Posts