Create Modal Popup in Salesforce LWC

Recently, I created a system management app in Salesforce using Lightning Web Component. In that, I got a requirement to display parent Account details on the contact record page using a pop-up modal. With this, users don’t need to navigate to the Account record page and can see the information in the modal popup.

While looking for solutions, I came across two methods to create a modal popup in Salesforce Lightning Web Component:

Create a modal popup using custom SLDS-based modals
Create a modal popup using lightning-modal component

Table of Contents

What is Modal Popup in Salesforce Lightning Web Component?

The Modal pop-up is a dialog box that appears over the current page to display additional information or to get user input. It doesn’t redirect the user and is often used for forms, confirmations, or additional detail views.

There are two ways to create show modals and popups: through styling and making a custom HTML modal, or using the Winter ’23 Modal Component feature, a library called lightning-modal tag.

Let’s explore both methods for creating a modal popup in Salesforce Lightning Web Component. In this example, we will create a modal popup using LWC that displays the account information on the Contact record page.

Create a Modal Popup in LWC Using Custom SLDS

In this method, we will use the Lightning Record API to retrieve Account details from the Contact’s AccountId. Then, expose the component on the Contact record page using recordId.

Now, open the VS Code IDE integrated with Salesforce org, and follow the steps below.

Create a Lightning Web Component and label it as contactAccountModal. Then, enter the code below in the HTML file to define the UI of the pop-up modal.

<template>
    <lightning-card title="Contact Details" icon-name="standard:contact">
        <div class="slds-p-horizontal_medium">
            <lightning-button
                label="View Parent Account"
                onclick={handleOpenModal}
                variant="brand"
            ></lightning-button>
        </div>
    </lightning-card>

    <template if:true={isModalOpen}>
        <section
            role="dialog"
            tabindex="-1"
            aria-modal="true"
            class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button
                        class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                        title="Close"
                        onclick={handleCloseModal}>
                        <lightning-icon icon-name="utility:close" size="small"></lightning-icon>
                    </button>
                    <h2 class="slds-text-heading_medium">Parent Account Details</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <template if:true={account}>
                        <p><strong>Name:</strong> {account.Name}</p>
                        <p><strong>Industry:</strong> {account.Industry}</p>
                        <p><strong>Phone:</strong> {account.Phone}</p>
                        <p><strong>Website:</strong> {account.Website}</p>
                    </template>
                    <template if:true={error}>
                        <p class="slds-text-color_error">{error}</p>
                    </template>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button
                        variant="neutral"
                        label="Close"
                        onclick={handleCloseModal}
                    ></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

In the above code, we have added a button “View Details“. When clicked, it triggers the handleOpenModal method in the JS to open the modal pop-up.

If isModalOpen is true, a modal (using SLDS styles) opens up with Account details on the contact record page. The modal popup will display the Account details: Name, Industry, Phone, and Website.

Next, enter the code below in the JS file to define the logic for fetching the account details of the current contact record. In this, we will also define the methods for opening and closing the pop-up modal.

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const CONTACT_FIELDS = ['Contact.AccountId'];
const ACCOUNT_FIELDS = ['Account.Name', 'Account.Industry', 'Account.Phone', 'Account.Website'];

export default class ContactAccountModal extends LightningElement {
    @api recordId; 
    isModalOpen = false;
    accountId;
    account;
    error;

    @wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
    wiredContact({ error, data }) {
        if (data) {
            this.accountId = data.fields.AccountId.value;
        } else if (error) {
            this.error = 'Error retrieving contact data.';
        }
    }

    @wire(getRecord, { recordId: '$accountId', fields: ACCOUNT_FIELDS })
    wiredAccount({ error, data }) {
        if (data) {
            this.account = {
                Name: data.fields.Name.value,
                Industry: data.fields.Industry.value,
                Phone: data.fields.Phone.value,
                Website: data.fields.Website.value,
            };
        } else if (error) {
            this.error = 'Error retrieving account data.';
        }
    }

    handleOpenModal() {
        this.isModalOpen = true;
    }

    handleCloseModal() {
        this.isModalOpen = false;
    }
}

In the above code, we have used two-wire methods. The first @wire method will get the contact’s accountId using recordid. The second @wire method will fetch Account details using the accountId.

The methods handleOpenModal and handleCloseModal will control the visibility of the pop-up modal. These methods will be triggered from the buttons that we have added in the UI of the component.

Make the component visible on Lightning pages by using the code below in the meta.xml file.

According to the scenario, we need to deploy this lightning web component on the contact records page. For this, I have selected targets as lightning__RecordPage, and Object as Contact.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Now, deploy the Lightning Web Component to the Contact record page. For this, navigate to the contact record page, click on the settings icon, and select Edit page.

Modal pop up in Salesforce Lightning Web Component

In the Lightning app builder, drag the created Lightning web component to the page region and click Save.

Now, on the contact record page, you will see the button View Parent Account. As we click on it, a pop-up modal will appear on the screen displaying the Account details of the current contact record.

This way, we can create a Modal Popup in Salesforce Lightning Web Component using the SLDS (Salesforce Lightning Design System).

Create a Modal Popup in LWC Using Lightning Modal Component

In Salesforce Lightning Web Component, the lightning-modal base component makes the modal creation easier compared to the SLDS model. In this, we don’t need to manage SLDS markup manually.

To set up a modal popup using the lightning-modal, we need to create two Lightning web components. The first one will be the modal component itself, which handles the logic of the modal. The second one will be the ‘parent’ or ‘host’ component, responsible for displaying the UI element (such as a button) that opens the modal as a pop-up.

Let’s take an example, where on the Account Record Page, we have a button. The button opens a modal popup showing all related Opportunity records for that Account using the new lightning-modal component.

Create the Modal Component

First, we will create the modal component that will display the UI of the pop-up modal. This component will display the modal structure using <lightning-modal-header>, <lightning-modal-body>, and <lightning-modal-footer>.

Create a Lightning Web Component and label it as ‘opportunityModal‘. Then, enter the code below in the HTML file.

<template>
    <lightning-modal-header label="Related Opportunities"></lightning-modal-header>
    <lightning-modal-body>
        <template if:true={opportunities.length}>
            <template for:each={opportunities} for:item="opp">
                <p key={opp.Id} class="slds-p-around_x-small">
                     <strong>{opp.Name}</strong> — {opp.StageName} | ${opp.Amount}
                </p>
            </template>
        </template>
        <template if:true={error}>
            <p class="slds-text-color_error">Error loading opportunities</p>
        </template>
        <template if:true={isEmpty}>
            <p>No related opportunities found.</p>
        </template>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button variant="neutral" label="Close" onclick={handleClose}></lightning-button>
    </lightning-modal-footer>
</template>

This modal will display a list of related Opportunities. If there’s an error loading data, it shows an error message. If no Opportunities exist for the Account, it displays a “No related opportunities found” message.

After this, enter the code below in the JS file.

import { LightningModal } from 'lightning/modal';
import { api } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

export default class OpportunityModal extends LightningModal {
    @api recordId; // Account Id
    opportunities = [];
    error;
    isEmpty = false;

    connectedCallback() {
        getOpportunities({ accountId: this.recordId })
            .then(result => {
                this.opportunities = result;
                this.isEmpty = result.length === 0;
            })
            .catch(error => {
                this.error = error;
            });
    }

    handleClose() {
        this.close();
    }
}

This component extends LightningModal, enabling modal functionality in LWC. It receives the recordId (Account Id) from the parent and fetches related Opportunities using an Apex method inside connectedCallback().

The handleClose() method closes the modal when the user clicks the close button.

Now, make the component exposed by setting isExposed to true in the meta.xml file.

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

With this, we have created the lightning modal. Now, to launch this modal as a popup, we need to create another Lightning web component that will be the host component of the modal component.

Create the Host Component

To display the modal component UI, we need to create a host component. This component is required to trigger the modal popup on the Account record page. Since lightning-modal components can’t be placed directly on a record page, we use a separate button component as a host or launcher.

In this, I’m fetching the real data from opportunities for that create an Apex controller class, OpportunityController, and enter the below code.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities(Id accountId) {
        return [
            SELECT Id, Name, StageName, Amount
            FROM Opportunity
            WHERE AccountId = :accountId
            ORDER BY CloseDate DESC
        ];
    }
}

To make the class accessible to the Lightning web component, we have added the @AuraEnabled annotation.

Create a Lightning Web Component and label it as ‘showOpportunities’. After this, enter the code below in the JS file.

import { LightningElement, api } from 'lwc';
import { LightningModal } from 'lightning/modal';
import OpportunityModal from 'c/opportunityModal';

export default class ShowOpportunities extends LightningElement {
    @api recordId; 

    async handleClick() {
        await OpportunityModal.open({
            size: 'medium',
            recordId: this.recordId
        });
    }
}

In the above code, we have imported the modal component using:

import OpportunityModal from 'c/opportunityModal';

In this, the record ID is automatically passed when this component is placed on a record page. When the button is clicked, it opens the opportunityModal using the new LightningModal.open() method.

After this, enter the code below in the HTML file.

<template>
    <lightning-button variant="brand" label="View Related Opportunities" onclick={handleClick}></lightning-button>
</template>

This component renders a single button. Clicking the button will open the modal popup with Opportunity data.

According to the scenario, the pop-up modal will display the related opportunities of an account. For this, we need to set the target as lightning__RecordPage and the object as Account in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>

Now, deploy the host Lightning Web Component to the Account record page, and you will see the “View Related Opportunities” button. As we click on it, the related Opportunities will be displayed in the modal popup.

This way, we can create a Modal popup in Salesforce Lightning Web Component using the Salesforce lightning-modal component.

Conclusion

In this Salesforce tutorial, we learned two ways to create modal popups in Salesforce LWC: one using custom SLDS and the other using the new lightning-modal component.

The SLDS method gives complete control over styling, while it is easy to create a modal pop-up using the lightning-modal with built-in structure. Both approaches enhance the user experience and are useful in scenarios such as displaying related record details in a pop-up, without requiring the user to leave the current page.

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK