So far, in the previous subsections, we explored how a Lightning Component can be part of the Flow builder. In this section, we will explore how you can embed the Flow inside a custom Lightning Component and pass variables in and out from the Flows to the custom Lightning Components.

To embed the Flow inside the Lightning Component, use the lightning:Flow tag and assign an aura:id. The following code snippet shows how to declare a markup that can render Flow inside the Lightning Component:

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <lightning:Flow aura:id="myFlow" onstatuschange="{!c.handleStatusChange}" />
</aura:component>

The JavaScript code to render the Flow and then handle the status change is as follows:

({
   init : function (component) {
      // Find the component whose aura:id is "myFlow"
      var Flow = component.find("myFlow");
      // In that component, start your Flow. Reference the Flow's Unique Name.
      Flow.startFlow("myFlow");//Assumes Flow unique name is myFlow
   },
                                
   handleStatusChange : function (component, event) {
      if(event.getParam("status") === "FINISHED") {
         // Get the output variables and iterate over them
         var outputVariables = event.getParam("outputVariables");
         var outputVar;
         for(var i = 0; i < outputVariables.length; i++) {
            outputVar = outputVariables[i];
            // Pass the values to the component's attributes
            if(outputVar.name === "x") {
               
            } else {
               
            }
         }
      }
   },
})

Notice that the handleStatusChange event is fired every time the Flow navigates, and event.getParam("status") and event.getParam("outputVariables") provide status and the output variables from the Flow.

To pass variables when a Flow is started, use input variables as parameters. Check the following syntax and the expected format:

var inputvariables = [

   {
     name : "var1", //This assumes var1 is a Flow builder generated variable
     type : "FlowDataType", // Data type can be String, number, Array, Sobject, Boolean 
     value : valueToSet
   },
   {
     name : "var2",//This assumes var1 is a Flow builder generated variable
     type : "FlowDataType", 
     value : [ value1, value2] //Not value can be an Array and an Sobject Array as well
     }

]

 var Flow = component.find("myFlow");
      // In that component, start your Flow. Reference the Flow's Unique Name.
      Flow.startFlow("myFlow",inputVariables);

The following is a diagrammatic representation of the preceding concepts:

Let's apply the preceding concept and extend the LocationFinder Flow. We have to customize the finish action to open a window with the latitude and longitude populated on Google Maps. The URL to open a Google Map is as follows:

https://maps.google.com/maps?&z=15&q=latitude + '+' + longitude + '&ll=' + latitude + '+' + longitude

Since we have the Flow already working, let's just wrap the Flow inside the Lightning Component and handle the event to detect the FINISHED status and open another window with Google Maps with latitude and longitude.

The component markup is as follows. Notice that we need the unique ID of the Flow:

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <lightning:Flow aura:id="myFlow" onstatuschange="{!c.handleStatusChange}" />
</aura:component>

The controller code to handle the override finish behavior is as follows:

({
    init : function(component, event, helper) {
        // Find the component whose aura:id is "myFlow"
        var Flow = component.find("myFlow");
        // In that component, start your Flow. Reference the Flow's Unique Name.
        Flow.startFlow("LocationFinder");//Assumes Flow unique name is myFlow
    },

    handleStatusChange : function (component, event) {
        if(event.getParam("status") === "FINISHED") {
           // Get the output variables and iterate over them
           var outputVariables = event.getParam("outputVariables");
           var outputVar;
           var latitude;
           var longitude;
           for(var i = 0; i < outputVariables.length; i++) {
              outputVar = outputVariables[i];
              // Pass the values to the component's attributes
              if(outputVar.name === "latitude") {
                latitude = outputVar.value;
              } else if (outputVar.name === "longitude"){
                longitude = outputVar.value;
              }
            }
            var mapURL = 'https://maps.google.com/maps?&z=15&q=' + latitude + '+' + longitude + '&ll=' + latitude + '+' + longitude;
            window.open(mapURL,"_target");
        }
     },
})