Using Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components

Using Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components

Raghavendhra Yarlagadda's photo
Raghavendhra Yarlagadda
·

4 min read

Table of contents

Hello there & Welcome back!

In this post we will be learning how to use Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components.

First, let us understand what CSS classes help us show or hide the SLDS Modal. According to the SLDS Modal Component Blueprint:

CSS Class

What does it do?

slds-fade-in-open

Allows the modal(white popup) to be visible

slds-backdrop_open

Allows the backdrop(grey overlay) to be visible

Hence, adding/removing these classes to the appropriate elements help us show/hide the Modal with some beautiful transition.

Let’s start building!

Component Markup HTML

lwcSldsModal.html

<template>
   <lightning-button variant="brand" label="Show Modal" title="Show Modal" onclick={showModal}
      class="slds-m-left_x-small"></lightning-button>

   <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
      aria-describedby="modal-content-id-1" class={modalClass}>
      <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={closeModal}>
               <lightning-icon icon-name="utility:close" alternative-text="Close Modal" variant="inverse" size="small">
               </lightning-icon>
            </button>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-modal__title slds-hyphenate">
               Modal Header
            </h2>
         </header>
         <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>
               Modal Content Here...
            </p>
         </div>
         <footer class="slds-modal__footer">
            <lightning-button variant="neutral" label="Close" title="Close" onclick={closeModal}>
            </lightning-button>
            <lightning-button variant="brand" class="slds-m-left_x-small" label="Save" title="Save"
               onclick={closeModal}>
            </lightning-button>
         </footer>
      </div>
   </section>
   <div class={modalBackdropClass}></div>
</template>

Notice that I have replaced the class attribute on Line 6 & Line 32 with 2 Getter Properties – modalClass & modalBackdropClass respectively. Let’s see why, in the JavaScript.

Component JavaScript

lwcSldsModal.js

import { LightningElement, track } from "lwc";

export default class LwcSldsModal extends LightningElement {

    //track whether the modal is open(true) or closed(false), closed by default
    @track isModalOpen = false;

    //add eventListner to handle keystrokes
    connectedCallback() {
        document.addEventListener("keydown", this.handleEscapeKey.bind(this));
    }

    //sets the isModalOpen property to true, indicating that the Modal is Open
    showModal() {
        this.isModalOpen = true;
    }

    //sets the isModalOpen property to false, indicating that the Modal is Closed
    closeModal() {
        this.isModalOpen = false;
    }

    handleEscapeKey(event){
        //check if the escape key was pressed and if the modal is open
        if(event.key === 'Escape' && this.isModalOpen){
            //close the modal
            this.closeModal();
        }
    }

    /* 
    can be used instead of the above two methods - showModal() & closeModal()
    just toggles the isModalOpen property - true if false, false if true 
    */
    toggleModal() {
        this.isModalOpen = !this.isModalOpen;
    }

    //compute the CSS classes of the Modal(popup) based on the value of isModalOpen property
    get modalClass() {
        return `slds-modal ${this.isModalOpen ? "slds-fade-in-open" : ""}`;
    }

    //compute the CSS classes of the Modal Backdrop(grey overlay) based on the value of isModalOpen property
    get modalBackdropClass() {
        return `slds-backdrop ${this.isModalOpen ? "slds-backdrop_open" : ""}`;
    }
}
JavaScript explanation:

  1. Line 5 – @track isModalOpen – boolean property is used to track if the modal is open or not, the modal is closed by default so, the property is defaulted to false.

  2. The showModal() method is called by the button that is used to open/show the modal and sets the isModalOpen to true.

  3. The closeModal() method is called by the button that is used to close/hide the modal and sets the isModalOpen to false.

  4. Optionally, instead of using two methods (showModal() and closeModal()) to open or close the modal
    we can just use the single toggleModal() method to toggle the modal (open if closed & close if opened)

  5. Line 10 – Adds functionality to close the modal when escape key is pressed on the keyboard, which calls the handleEscapeKey() function to handle the functionality

    1. Once we get hold of the keydown event, we verify if the key pressed is the Escape key

    2. Next, we also verify if our modal is open

    3. If both the conditions are true, we close the modal

  6. The two getters functions – modalClass and modalBackdropClass – compute and return the CSS classes of the modal and the backdrop depending on the value of isModalOpen property,

    1. If the isModalOpen = false,

      • get modalClass() returns 'slds-modal’

      • get modalBackdropClass() returns 'slds-backdrop'

    2. And if the isModalOpen = true,

      • get modalClass() returns 'slds-modal slds-fade-in-open’

      • get modalBackdropClass() returns 'slds-backdrop slds-backdrop_open'

  7. Line 41 & Line 46 are strings with template literals and ternary condition.

Component Configuration

Nothing fancy, just exposing the component to be available in Lightning App Builder for App Page, Record Page & Home Page.

lwcSldsModal.js-meta.xml

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcSldsModal">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

That’s it! We have our shiny new modal with beautiful transitions!

Some useful resources:

  1. Learn Lightning Web Components with Trailhead

    https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components

  2. More on Getters in LWC

    https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_getter

    https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_public

  3. Template literals (Template strings)
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Happy Coding!

For more Salesforce Dev Content, Please Like & Subscribe to My Facebook Page with the links below.

Thank you, See you in the next one & Peace!

SalesforceJavaScriptlwc