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  .