Dynamically pass LWC to lightning modal by using lightning flow

Salesforce recently launched a standard base component lightningModal which was missing for a long time. lightning:overlayLib in Aura component allows you to dynamically pass the html markup or aura component inside the body of the lightning modal whereas lightningModal base lwc component does allows you only to pass the public attribute values. Recently, I got to know a way of creating lightning web component(LWC) dynamically. This opens the way to pass lwc dynamically into lightningModal base component as well with help of lightning flow.

We will be creating below lightning web components to understand how to pass lwc inside a lightningModal base component.

lwcCalledInFlow
dynamicModal
modalCaller

We will also create a lightning screen flow( with name CallLwcInFlow ) to which will be created dynamically to pass the lwc component to body of the modal.

lwcCalledInFlow.html

We have lightning-card in the html which just shows a static message along with lightning icon and badge in the footer of the card. We will call this component inside flow.

<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>

Create 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

Dynamically pass LWC to lightning modal by using lightning flow

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

dynamicModal.html

We have used newly launched lightning modal base component. The body of the modal is lightning flow which will be launched when modal is opened. Lightning flow calls the lwc inside it and display on the UI. This way, we are passing lwc dynamically to modal body.

<template>
    <lightning-modal-header label={header}></lightning-modal-header>
    <lightning-modal-body>
        <lightning-flow if:true={flowName} onstatuschange={handleStatusChange} flow-api-name={flowName}
            flow-input-variables={inputVariables}>
        </lightning-flow>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="Close" onclick={handleClose}></lightning-button>
    </lightning-modal-footer>
</template>

dynamicModal.js

We have exposed the few public property so that anybody can set the header label, flow api name to be launched inside the modal body and input variable for the flow.

import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class DynamicModal extends LightningModal {
    @api header;
    @api flowName;
    @api inputVariables;

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

    handleClose() {
        this.close('return value');
    }
}

dynamicModal.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

modalCaller.html

The lightning button will call the modal on click. The logic to open the modal is in js file.

<template>
    <lightning-card title="MiscModal" icon-name="custom:custom19">
        <div class="slds-var-m-around_medium">
            <lightning-button onclick={handleShowModal} aria-haspopup="true" label="Show modal">
            </lightning-button>
        </div>
    </lightning-card>
</template>

modalCaller.js

We have imported the reusable modal component and opened it on click of the button. We are also passing the public attribute values of the modal component.

import { LightningElement } from 'lwc';
import dynamicModal from 'c/dynamicModal';
export default class ModalCaller extends LightningElement {
    async handleShowModal() {
        this.result = await dynamicModal.open({
            size: 'small',
            description: 'understand how you can pass lwc dynamically to modal',
            header: 'Modal which accept lwc as body',
            flowName: 'CallLwcInFlow',
            inputVariables: this.inputVariables
        });
    }

    get inputVariables() {
        return [];
    }
}

modalCaller.js-meta.xml

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

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.

GET IN TOUCH