NEW Winter '23 Modal Component | Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil October 15, 2022


In this blog I will show you how you can use the new Winter '23 modal in a Lightning Web Component. I have used it personally and trust me it's not just an ordinary modal it is a complete library!

Use modals to interrupt a user's workflow and draw attention to an important message. A modal, which displays the message on top of the current app window, requires a user to interact with it to regain control over the app.

Create a modal component in response to a user action, such as clicking a button or link. The modal blocks interaction with everything else on the page until the user acts upon or dismisses the modal.

Unlike other components, this component doesn't use a lightning-modal tag or extend LightningElement. There is no lightning-modal component. Instead, you create a modal by extending LightningModal and using these helper lightning-modal-* components to provide a header, footer and the body of the modal.

  • lightning-modal-body
  • lightning-modal-header
  • lightning-modal-footer

To create a modal component, 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.

Please checkout the code snippet and video tutorial below:


lightningModalLWC.html

1
2
3
4
5
6
7
8
<template>
    <lightning-modal-header label={headerText}></lightning-modal-header>
    <lightning-modal-body>{content}</lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
        <lightning-button label="NOT OK" onclick={handleNotOkay}></lightning-button>
    </lightning-modal-footer>
</template>


lightningModalLWC.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class LightningModalLWC extends LightningModal {
    @api content;
    @api headerText;
    handleOkay() {
        this.close('okay');
    }
    handleNotOkay() {
        this.close('Not Okay');
    }
}


Container.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<template>
  <lightning-card title="Winter 23 Modal" icon-name="custom:custom19">
    <div class="slds-var-m-around_medium">
      <lightning-button
        label="Show modal"
        onclick={handleShowModal}
      ></lightning-button>
      <br/>
      Result from modal: {result}
    </div>
  </lightning-card>
</template>


Container.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { LightningElement } from 'lwc';
import lightningModalLWC from 'c/lightningModalLWC';


export default class Container extends LightningElement {
    showModal = true;
    result;
    async handleShowModal() {
         this.result = await lightningModalLWC.open({
            size: 'large',
            description: 'Accessible description of modal\'s purpose',
            content: 'Passed into content api',
            headerText:'I am a dynamic header.'
        });
        console.log(result);
    }
}


Headerless Modal

To use the headerless modal you just have to remove the <lightning-modal-header> tag from your modal. In modal component the header label is a required attribute so in case of headerless modal you can pass label from the modal open call in the parent component as shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { LightningElement } from 'lwc';
import lightningModalLWC from 'c/lightningModalLWC';


export default class Container extends LightningElement {
    showModal = true;
    result;
    async handleShowModal() {
        this.result = await lightningModalLWC.open({
            label:'Passing label in case of headerless modal',
            size: 'large',
            description: 'Accessible description of modal\'s purpose',
            content: 'Passed into content api',
            headerText:'I am a dynamic header.'
        });
        console.log(result);
    }
}


Use the disableClose Attribute

disableClose temporarily turns off the ability to dismiss the modal by normal means like the ESC key, the close button, or this.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.

Preventing a modal's close should be a temporary state. Use disableClose for less than 5 seconds. Accessibility is affected if you trap keyboard focus inappropriately. See No Keyboard Trap for more information.

When the process using disableClose finishes successfully, dismiss the modal. If the process using disableClose fails, re-enable the ability to dismiss the modal with disableClose = false, or give feedback to help the user resolve the issue.

While disableClose is true, disable any processes or UI buttons that might call Modal.close().

To implement it you just have to add this.disableClose=true; in your component.


Output

Official Doc: https://developer.salesforce.com/docs/component-library/bundle/lightning-modal/documentation


Checkout the complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments