•  

    Flows in Lightning Web Components

    Hi All, in this article we will learn to call a flow from LWC component.

    Important concepts to be learned are:

    1. Send Events to an Enclosing Aura Component.

    2. Workaround to call a flow from LWC component which is sending flow input params if any required.

    3. Control a Flow’s Finish Behaviour by Wrapping the Flow in a Custom Lightning Component.

     

    You can see we are getting the account Name in our toast message via flow output variables.

    <!-- auraDomEventListener.cmp -->
    
    <!--
    
     * @File Name          : auraContainerComponent.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 23/1/2020, 7:27:50 pm
    
     * @Modification Log   : 
    
     * Ver       Date            Author                 Modification
    
     * 1.0    10/15/2019   Somnath Sharma     Initial Version
    
     -->
    
    <aura:component implements="flexipage:availableForAllPageTypes">
    
        <aura:attribute name="showModal" type="Boolean" default="false"/>
    
    
        <lightning:card title="Create Account" iconName="action:new_account">
    
           
    
            <div class="slds-m-around_medium">
    
                <lightning:layout>   
    
                    <lightning:layoutItem size="4">
    
                           <!-- This is an LWC component 
    
                        The enclosing Aura component wrapper adds a handler for the custom event. Notice that the event handler, 
    
                        onflowLaunch, matches the event name with “on” prefixed to it.-->
    
                    <c:lwcChild onflowLaunch="{!c.handleFlowLaunch}"/> 
    
                    </lightning:layoutItem>    
    
                    <lightning:layoutItem size="8">
    
                            <lightning:flow aura:id="flow" onstatuschange="{!c.statusChange}"/>  
    
                    </lightning:layoutItem>
    
                </lightning:layout>
    
            </div>
    
        </lightning:card>
    
    </aura:component>
    

     

    ({
    
        handleFlowLaunch : function(component, event, helper) {
    
            //the enclosing Aura component can capture the event and handle it.
    
            /**
    
             * The Aura component’s controller receives the event. You can handle the event however you’d like. This component operates on the
    
             *  eventParams array passed 
    
             * in the details property of the Lightning web component event.
    
             */
    
            var eventData = event.getParam('eventParams');
    
            component.set("v.showModal",eventData.showFlow);
    
            var inputVariables = [];
    
            if(eventData.showFlow){
    
                var flow = component.find("flow");
    
                flow.startFlow("CreateAccLwc", inputVariables);
    
            }
    
        },
    
        statusChange : function (cmp, event) {
    
            if (event.getParam('status') === "FINISHED") {
    
                var outputVariables = event.getParam("outputVariables");
    
                window.console.log('flow data',JSON.stringify(outputVariables) );
    
                for(var i = 0; i < outputVariables.length; i++) {
    
                   var outputVar = outputVariables[i];
    
                    if(outputVar.name === "accInfoCreated") {
    
                      var toastEvent = $A.get("e.force:showToast");
    
                      toastEvent.setParams({
    
                          "title": "Success!",
    
                          "message":outputVar.value.Name+"-Account Record Created Successfully",
    
                          "type":"success"
    
                      });
    
                      toastEvent.fire();
    
                }
    
            }
    
            }
    
          }
    
    })

     

    <!--
    
     * @File Name          : lwcChild.html
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 23/1/2020, 7:31:11 pm
    
     * @Modification Log   : 
    
     * Ver       Date            Author             Modification
    
     * 1.0    10/15/2019   Somnath Sharma     Initial Version
    
     -->
    
    <template> 
    
        <lightning-button variant="brand" label="Click To Launc Flow " title="Click To Launc Flow From LWC Button" 
          onclick={launcFlow} class="slds-m-left_x-small">
        </lightning-button>
    
    </template>

     

    /**
    
     * @File Name          : lwcChild.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 23/1/2020, 7:31:19 pm
    
     * @Modification Log   : 
    
     * Ver       Date            Author                 Modification
    
     * 1.0    10/15/2019   Somnath Sharma     Initial Version
    
     **/
    
    import { LightningElement } from 'lwc';
    
    export default class LwcChild extends LightningElement {
    
        launcFlow(){
    
        /**
    
         * 
    
         * To communicate from child to parent, dispatch an event. Lightning web components fire DOM events. An enclosing Aura component can listen for these events, just like an 
    
         * enclosing Lightning web component can. 
    
         */    
    
       let eventParams = {
    
        showFlow: true,
    
        inputFlowParams: ' ',  
    
    };
    
    const flowLaunchEvent = new CustomEvent('flowLaunch', {
    
        detail: {
    
            eventParams
    
        },
    
    });
    
    // Fire the custom event
    
    this.dispatchEvent(flowLaunchEvent);
    
        }
    
    }

     

    <?xml version="1.0" encoding="UTF-8"?>
    
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcChild">
    
        <apiVersion>47.0</apiVersion>
    
        <isExposed>true</isExposed>
    
        <targets>
    
            <target>lightning__RecordPage</target>
    
            <target>lightning__AppPage</target>
    
            <target>lightning__HomePage</target>
    
        </targets>
    
    </LightningComponentBundle>

Comments

  • (no comments)

Post Comments