Creating reusable, dynamic components is the backbone of efficient development in Salesforce Lightning Web Components (LWC). The modal window is one of the most used components in custom lightning development. It is used to gather user input, display messages, or show dynamic content pulled from Apex classes. A modal window gives us a user-friendly way to interact with users without navigating away from the current view. This post will provide step-by-step details to create Generic Modal Window in Lightning Web Component.
What is a Modal Window?
A modal window is a UI overlay that appears on top of the main content, typically used for user communication. Modals are extensively used to:
- Display forms (e.g., creating or editing records).
- Confirm actions (e.g., delete, submit, prompt).
- Show notifications or messages.
- Render dynamic content fetched asynchronously.
Importance of Modals in Salesforce Applications
In Salesforce development, the modal window plays a crucial role in boosting the user experience without breaking the flow. Below are key advantages:
- Seamless UX: Modals avoid page reloads, improving interactivity.
- Consistency: Using a standard modal component boosts maintainability.
- Performance: Developers conserve time by recycling a common modal across elements.
Creating Generic Modal Windows in Lightning Web Component
We can create a Lightning Modal component using the LWC lightning/modal module. We have to extend LightningModal using helper lightning-modal-* components to provide a header, footer, and the body of the modal.
- lightning-modal-header: This will be used to add the header for the model component.
- lightning-modal-body: This will be used to add the body section for the model component.
- lightning-modal-footer: This helper component will be used to create a footer section for the model component.
To create a generic/reusable component, we will create public properties to add content dynamically.
Generic Modal Component Code
How to use this Modal Dialog Component?
LightningModal module provides a method open() to open a model. This will return a promise result of user interaction on the Model dialog. This method will create a the new instance of dialog every time. When we close the modal, it will destroy the dialog instance.
Test Component
Let us test the above component with a normal dialog box where header, body, and footer text will be shown. On clicking the button, dialog will be shown.
Opening LWC (Lightning Web Component) in Dialog
Let us say we want to display some form control or other custom component in the dialog. In that scenario, we have to pass components in the body section.
To handle this use case, we will change in generic modal dialog. We will add capability to show component in LWC (Lightning Web Component). We will render LWC dynamically using lwc:component.
Read Here to dynamically instantiate component: Dynamically Instantiate Components in LWC
Test Component to show another component in LWC Dialog
We have an accountSelector component developed to show accounts in the datatable. We want to display this component in the above generic dialogue.
Let us show this component in the above generic dialog box. For this, we will pass the component name in dialog open method.
References
Related Posts
- How to Export Data in Excel with SheetJS in LWC
- Ultimate Guide to URL Accessibility in LWC
- Generic Notification Component in LWC
- Reusable Custom Calendar LWC using FullCalendar Js Library
- Custom Toast with custom duration In LWC
- Dynamic Interaction Between Two LWCs
- Sending Wrapper object to Apex from LWC
- HeatMap Chart In LWC
- Generate and Create Signature in LWC
- Option Group in LWC Select
- Generate OTP in LWC
- Show Category wise Knowledge Article using LWC
- Custom Salesforce Knowledge Component using LWC
- How to Implement Basic Queueable Chaining in Salesforce Apex
