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.
Required Code – Pass LWC to lightning modal
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

- 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>
Demo – pass lwc component inside the body of the lightning modal using lightning flow
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
Schedule a 1:1 Meeting with me
Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.