Monday, 3 August 2020

Modal/Popup in Lightning Web Component (LWC)

In this post we will talk about how to create modal/Popup in Lightning web Component (LWC). Currently "lightning:overlayLib" is not available in LWC, the only way to show modals and popups is through styling and making a custom html modal. Modals/Popup Box are used to display content in a layer above the app. Mostly used to creation or editing of a record, as well as various types of messaging and wizards.


If you want to know how to create Modal in Lightning aura component, please refer to this post.


Modal / Popup Example Lightning Web component(LWC)


You can take a help from SLDS for creating the modals. Code has following three main part
  • section
  • header
  • footer

Create Lightning web component in your sandbox or developer org.

modalDemoInLWC.html
<template>
    <lightning-button variant="success" label="Open popup"
                        title="Open popup" onclick={showModalBox}>
    </lightning-button>

   <!-- modal start -->      
   <template if:true={isShowModal}>

            <!--
                I Used SLDS for this code
                Here is link https://www.lightningdesignsystem.com/components/modals/
            --> 

    <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">
        <!-- modal header start -->
          <header class="slds-modal__header">
             <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>
                <lightning-icon icon-name="utility:close"
                   alternative-text="close"
                   variant="inverse"
                   size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
             </button>
             <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Welcome in Apex Hours</h2>
          </header>
      
          <!-- modal body start -->
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <p>Modal/Popup in Lightning Web Component (LWC) Demo</p>
          </div>

          <!-- modal footer start-->
          <footer class="slds-modal__footer">
             <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>
          </footer>
       
       </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
 </template>
 <!-- modal end -->

</template>
  • Enable and disable the modal with template if:true
  • Use section role='dialog'

modalDemoInLWC.js
import { LightningElement,track } from 'lwc';

export default class ModalDemoInLWC extends LightningElement {
    @track isShowModal = false;

    showModalBox() {  
        this.isShowModal = true;
    }

    hideModalBox() {  
        this.isShowModal = false;
    }
}

modalDemoInLWC.js-meta.js
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>




19 comments:

  1. when be use this modal in UtilityBar it is not displayed in Full Screen. Is there any way we can display it in full Screen.

    ReplyDelete
  2. Very nice blog
    Please read my new blog : Salesforce Mms Integration

    ReplyDelete
  3. Thank you for sharing this useful information available to us.it will have the potential to attract a significant number of user.
    NareshIT

    ReplyDelete
  4. Wonderful blog article , Thanks for sharing with us
    Java training in Hyderabad

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Hello! Many factors influence the professionalism of your text, including the correct use of the verb tense. Therefore, you should pay attention to the tense in which you use verbs in your text! Check any type of text online and absolutely free with our online tool! This will save you time and effort! https://www.verbtensechecker.com/essay-tense-checker/

    ReplyDelete
  7. Struggling to find the time to revise or proofread your text? Look no further than the online tense detector! This software accurately detects and suggests fixes for improper tense usage. Unlike manual proofreading, which may overlook certain words, this tool identifies all errors and provides recommendations for improvement. To begin using it, click here. Source: https://www.tensedetector.com/essay-tense-checker/

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Hello, everyone! With the right tool at your fingertips, you can focus on putting your thoughts into words - without punctuation errors. You can save your precious time and learn something new. You don't have to worry about such problems anymore, focus on other important aspects. Just try it and see for yourself.
    https://www.freepunctuationchecker.com/improve-your-grammar-with-our-adverb-checker/

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. We appreciate you sharing this important information with us.
    Best institute for react js in Hyderabad

    ReplyDelete
  13. A huge shoutout to the creators of the ADM-201 Dumps Guide study guide. This resource is a game-changer! Its well-organized content and insightful explanations not only simplified my preparation but also ensured my success in the Salesforce Certified Administrator (SP23) exam. It's a must-have for all aspiring candidates!"

    ReplyDelete
  14. I consider this post to be highly informative and incredibly valuable. I want to express my gratitude for the dedication you've put into creating such a knowledgeable article. Your efforts in crafting this content are truly commendable, and I appreciate the insights it provides. Thank you for sharing this valuable information.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete