A modal popup is how you pull the user's attention onto one thing, either to show information or to collect input, while the rest of the page waits. In Salesforce Lightning Web Components you can build one that sits properly inside the rest of your application's UI. Here is the step-by-step.
Step 1: Create a new LWC component
Start with the component itself. Navigate to the LWC component's folder in your Salesforce org and click the "New" button, give your component a name, then click "Submit".
Step 2: Import the required modules
To build a modal popup you need two modules imported into your component's JavaScript file, LightningElement and track. Add the following line of code to that file:
import { LightningElement, track } from 'lwc';
Step 3: Define the modal content
Next comes the content the modal will display. That lives in an HTML template inside your component's file. Here is what the markup might look like:
<template>
<template if:true={isModalOpen}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
Modal Content
</div>
<footer class="slds-modal__footer">
<lightning-button label="Cancel" onclick={closeModal}></lightning-button>
<lightning-button label="Save" variant="brand" onclick={saveModal}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
Step 4: Define the event handlers
To show and hide the modal popup you need event handlers. They fire on user actions, usually a button click. Here is what the JavaScript might look like:
export default class MyComponent extends LightningElement {
@track isModalOpen = false;
showModal() {
this.isModalOpen = true;
}
hideModal() {
this.isModalOpen = false;
}
}
The @track decorator makes sure the isModalOpen property is tracked and updated in the UI when its value changes. The showModal() and hideModal() methods are what show and hide the modal popup, respectively.
Step 5: Trigger the modal popup
The final step is triggering the popup, which means adding a button or some other UI element that calls the event handlers you defined in Step 4. Here is what the markup might look like:
<template>
<lightning-button label="Open Modal" onclick={openModal}></lightning-button>
<template if:true={isModalOpen}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
Modal Content
</div>
<footer class="slds-modal__footer">
<lightning-button label="Cancel" onclick={closeModal}></lightning-button>
<lightning-button label="Save" variant="brand" onclick={saveModal}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
The button in this example calls its click handler when it is clicked, and the modal popup is displayed once the isModalOpen property is set to true.
Conclusion
Modal popups are an important tool in interface design, and that is the whole pattern behind one: SLDS markup, a single boolean in the component, and handlers on each end of it. It is enough to put a modal anywhere in your application's UI where you need the user looking at one thing at a time.
Leave a Comment