Dynamic popup/modal using Lightning-modal in Lightning Web Components(LWC)

This post explains how to open the popup using Lightning web components (LWC).

• Created the lwcmodal component this component has the lighting modal base components to open the popup/modal.
• import LightningModal from lightning/modal. The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the lightning/modal module.

LWCModal Component

lwcmodal.html

<template>
	<lightning-modal-header label={label}></lightning-modal-header>
	<lightning-modal-body>
		<lightning-datatable key-field="id" data={conData} columns={columns}>
		</lightning-datatable>
	</lightning-modal-body>
	<lightning-modal-footer>
		<lightning-button variant="brand" label="OK" onclick={handleOkay}></lightning-button>
	</lightning-modal-footer>
</template>

lwcmodal.js

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class Lwcmodal extends LightningModal {
    @api conData;
    @api columns;
    @api label;

    handleOkay(event) {
        this.close('okay');
    }
}

• LightningModal provides a .open() method which opens a modal and returns a promise that asynchronously resolves with the result of the user’s interaction with the modal.
• Use this.close(result) to close the modal, where the result is anything you want to return from the modal. The .close() operation is asynchronous to display a brief fade-out animation before the modal is destroyed. The result data can’t be modified after the close operation begins.

The .open() method lets you assign values to the modal's properties. LightningModal provides these properties.

label - Required. Sets the modal's title and assistive device label. If the modal has a header, set the label in the lightning-modal-header component. If the modal doesn't have a header, set the label property when opening the modal.

size - Determines how much of the viewport width the modal uses. Supported values are small, medium, and large, which you can set when you open the modal. The default value is medium. The length of the modal is determined by the amount of content.

description - Sets the modal's accessible description. It uses the aria-description attribute where supported, or falls back to aria-describedby. If you set a custom description value, include the label name at the beginning of your description, because some screen readers only read the description and not the label.

disableClose - Prevents closing the modal by normal means like the ESC key, the close button, or .close(). For example, you could briefly set disableClose to true while a completed form is saving, so the user doesn't dismiss the modal early.

dynamicmodal.html

<template>
    <lightning-card  variant="Narrow">
        <p class="slds-p-horizontal_small">When clicking the button it opens the dynamic modal.<br/>
            <lightning-button variant="brand" onclick={handleContactData} label="Show Contact Data"></lightning-button>
        </p>
    </lightning-card>
</template>

dynamicmodal.js

import { LightningElement } from 'lwc';
import MyModal from "c/lwcmodal";
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';

export default class Dynamicmodal extends LightningElement {
    consData;

    columns = [
        { label: 'First Name', fieldName: 'FirstName', type:'text' },
        { label: 'Last Name', fieldName: 'LastName', type: 'text' },
        { label: 'Name', fieldName: 'Name', type: 'text' },
        { label: 'Email', fieldName: 'Email', type: 'email' },
    ];
    connectedCallback() {
        getContacts().then(res => {
            console.log('res => ', res);
            this.consData = res;
        })
            .catch(error => {
                console.log('error => ', error);
            });
    }

    async handleContactData() {
        const result = await MyModal.open({
            label: 'Contact Data',
            size: 'large',
            columns: [...this.columns],
            conData : [...this.consData]
        });
        // if modal closed with X button, promise returns result = 'undefined'
        // if modal closed with OK button, promise returns result = 'okay'
        console.log('result ==> ',result);
    }
}

Apex class

public inherited sharing class LWCExampleController {

    @AuraEnabled(Cacheable = true)
    public static List<Contact> getContacts() {
        return [SELECT Id, Name, FirstName, LastName, Email 
                FROM Contact 
                WHERE Email != null 
                ORDER BY CreatedDate DESC NULLS LAST limit 10];
    }
}

Example