Call Flow from Lightning Component

Call Flow from Lightning Component

In this section, we will call a Flow from a Lightning Component. Same Assignment: Create a Contact by Flow calling from Lightning Component.

Step 1: Create a flow from Cloud Flow Designer. Already, we have created the flow in the last session. If you have missed out, Please click on the link to open the last session: Contact Creation Flow.

Step 2: Create a Lightning Component bundle named “createContactfromFlow“.

createContactfromFlow.cmp | calling a Flow from Lightning Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">	
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:card >
    	<lightning:flow aura:id="createContactFlowId" onstatuschange="{!c.handleStatusChange}"/>
    </lightning:card>
</aura:component>

createContactfromFlowController.js | to start flow with input parameters

({
	doInit : function(component, event, helper) {
		var createContactFlowId = component.find("createContactFlowId");
        var inputVariables = [
            {
                name:"accountId",
                type:"String",
                value:component.get("v.recordId")
            }
        ];
        
        createContactFlowId.startFlow("Contact_Creation_Flow", inputVariables);
	},

    handleStatusChange : function(component, event, helper) {
        if(event.getParam("status") === "FINISHED") {
         /*var outputVariables = event.getParam("outputVariables");
          var outputVar;
          for(var i = 0; i < outputVariables.length; i++) {
             outputVar = outputVariables[i];
             if(outputVar.name === "contactId") {
                var urlEvent = $A.get("e.force:navigateToSObject");
                urlEvent.setParams({
                   "recordId": outputVar.value,
                   "isredirect": "true"
                });
                urlEvent.fire();
             }
          }*/
          $A.get('e.force:refreshView').fire();

       }
    }
})

Clarification

doInit: Initialize and starting the flow by aura:id. Now, we have the Input variable/attribute named “accountId” in the Flow. So, we need to send the current Account record Id to this flow input variable. Please check the syntax createContactFlowId.startFlow(“Contact_Creation_Flow”, inputVariables); “Contact_Creation_Flow” is the API Name of the flow.

handleStatusChange: Salesforce has provided the functionality on flow called “onstatuschange” on lightning:flow. When the Status of flow has been changed, at that point of time respective function will be invoked.Here, the function’s name is “handleStatusChange”. We are doing refresh the related list of the current Account, when Status of the flow has been changed to “FINISHED“. You can redirect to the created record’s detail page. This code is commented out. You can check.

Step 3: Please place this Lightning Component in the Lightning Record Page of the Account record.

5,161 total views, 1 views today