Create LWC Dynamically In LWC Using Lightning Flow On Button Click

Aura Component has the ability to create lightning components dynamically. Lightning Web Component does not had this functionality. So, Developers were using if:true|false directive as an alternative. The drawback with if:true|false directive is:-
1. Markup must exist in lightning web component inside if:true|false directive
2. Every time requirement changes, markup has to be updated results in code change
Now, We can launch flow from LWC directly, we got a better way to dynamically create LWC from Lightning Web Component. lightning-flow base component gives you the ability to launch a lwc placed inside flow with just a button click using startFlow method from another lightning web component.

Create LWC dynamically with Button Click

• Step 1 – Create a LWC which have a button
• Step 2 – Create a Flow and place another LWC inside the flow screen
• Step 3 – Launch the flow on button click, which results in dynamic creation of LWC component

Let’s create the required LWC and Flow, They are:-
1. launchFlowFromButton – LWC
2. LwcCalledInFlow – LWC
3. CallLwcInFlow – Lightning Flow

Its time to jump into the code.

launchFlowFromButton.html

The html file must have lightning-flow component. It will be invoked programmatically on button click.

<template>
    <lightning-flow onstatuschange={handleStatusChange}>
    </lightning-flow>
    <lightning-button label="Create LWC Dynamically Using Flow" onclick={handleClick}></lightning-button>
</template>

launchFlowFromButton.js

handleClick – This method fires on button click and invoke the flow which results in dynamic creation of LWC with Lightning Web Component
inputVariables – This getter will pass the input variable to flow

handleStatusChange – This function invokes when there is a status change in flow

import { LightningElement } from 'lwc';
export default class LaunchFlowFromButton extends LightningElement {
    handleClick() {
        this.template.querySelector('lightning-flow').startFlow('CallLwcInFlow', this.inputVariables);
    }

    get inputVariables() {
        return [];
    }

    handleStatusChange(event) {
        console.log('handleStatusChange', event.detail);
    }
}

lwcCalledInFlow.js-meta.xml

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

Let’s go through the lwc component that needs to be created dynamically on button click via flow.

lwcCalledInFlow.html

We have lightning-card which just shows a static message when this component is created dynamically from another lightning web component.

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            This component has been created dynamically from LWC using flow
        </h3>
        <div slot="footer">
            <lightning-badge label="Flow"></lightning-badge>
            <lightning-badge label="LWC"></lightning-badge>
            <lightning-badge label="Awesome"></lightning-badge>
        </div>
        <p class="slds-p-horizontal_small">Dynamic Ceation of LWC</p>
    </lightning-card>
</template>

lwcCalledInFlow.js

The JS file does not have any logic.

import { LightningElement } from 'lwc';
export default class LwcCalledInFlow extends LightningElement {}

lwcCalledInFlow.js-meta.xml

Make sure to enable the component to be used in lightning flow.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__FlowScreen</target>
  </targets>
</LightningComponentBundle>

Now, both the component is done, Let’s create the lightning flow where we will place the lwcCalledInFlow component.

Lightning Screen Flow – CallLwcInFlow

• Step 1 : Create a new screen flow
• Step 2 : give the API name to screen, Make sure to uncheck show header and show footer checkbox

• Step 3 : Add a screen, place the lwc in canvas as below and click done

• Step 4 : Save and Activate the flow, The flow will look like as below

Demo – Dynamic Creation of LWC using Flow on Button Click in LWC

Add the launchFlowFromButton component on lightning page to test it. You can see on button click, the component has been created dynamically via the flow. Basically, We are launching the flow on button click which results in dynamic creation of LWC.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.