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>




24 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
  16. This blog provides a comprehensive overview of AWS training and certification. As someone starting their AWS journey, I found the guidance and resources mentioned here extremely valuable. The tips for exam preparation were especially helpful. Thanks for sharing! Please visit our website:- aws training and certification

    ReplyDelete
  17. Great Information Thanks for sharing.

    ELearn Infotech offers Python Training in Hyderabad Madhapur. Our Python course includes from Basic to Advanced Level Python Course. We have designed our Python course content based on students Requirement to Achieve Goal. We offer both class room Python training in Hyderabad Madhapur and Python Course Online Training with real time project.

    ReplyDelete

  18. MR Reporting Mobile App is now even more user friendly ensuring a delightful experience on mobile while Tracking DCR, TP, Expense status viewing and much more. CBO ERP Ltd provides best reporting software for pharma and MR/ Online Mobile MR Reporting software, Some Key Features Of “Pharma Mobile/Tablet MR Reporting Software” are as under:

    • Easy and fast reporting.
    • Acute & error free.
    • No waiting for the salary process.
    • No waiting for expense data.
    • No need to carry a visual aid inbuilt detailing system.
    • Non submitted DCR information by SMS to H.O. / Managers.
    https://www.cboerp.com/mr-reporting-software.php

    ReplyDelete