Skip to main content

LWC Model PopUp

Requirement :



Create a LWC to open Model Popup.
Or in other words
On button click open Model PopUp.

cmpShowModelPopUp.html

<template>
    <lightning-card 
        title="LWC Model" 
        icon-name="custom:custom2">
        <div class="slds-theme_default">
            <div class="slds-p-around_medium">
                <lightning-button 
                    label="Show LWC Modal" variant="brand" 
                    onclick={handleOpenModal}>
                </lightning-button>
            </div>
            <template if:true={isOpenModal}>
                <div style="height: 500px;">
                    <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">
                                <button 
                                class="slds-button 
slds-button_icon slds-modal__close 
slds-button_icon-inverse" 
                                title="Close" 
                                onclick={handleCloseModal}>
                                    <lightning-icon 
                                        icon-name="utility:close"
                                        variant="inverse" 
                                        alternative-text="Close" 
                                        size="medium">
                                    </lightning-icon>
                                    <span 
                                        class="slds-assistive-text">
                                        Close
                                    </span>
                                </button>
                                <h2 id="modal-heading-01" 
                                class="slds-text-heading_medium slds-hyphenate">
                                    LWC Modal Example
                                </h2>
                            </header>
                            <div 
                            class="slds-modal__content slds-p-around_medium" 
                            id="modal-content-id-1">
                                <div 
                                class="slds-text-heading_small 
slds-text-align_center">
                                    Welcome to Gyanender Model
                                </div>
                            </div>
                            <footer class="slds-modal__footer">
                                <lightning-button 
                                    label="Cancel" 
                                    variant="neutral" 
                                    onclick={handleCloseModal}>
                                </lightning-button>
                            </footer>
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
            </template>
        </div>
    </lightning-card>
</template>

cmpShowModelPopUp.js
import {LightningElement, track} from 'lwc';
export default class cmpShowModelPopUp extends LightningElement {
    @track isOpenModal = false;
    handleOpenModal() {
        this.isOpenModal = true;
    }
    handleCloseModal() {
        this.isOpenModal = false;
    }
}

cmpShowModelPopUp.js-meta.xml
<?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>
        <target>lightning__Tab</target>
      </targets>
</LightningComponentBundle>

Output:

Other Useful Blog

Lightning Component

Happy Learning !!


Comments

Post a Comment

Popular posts from this blog

LWC Decorators

Decorators : ‹ › In LWC decorators are used to add functionality to a property or function. There are three types of decorators : 1. @track 2. @api 3. @wire @track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared. @api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared. For ex : parent component can set the value of the properties in the child component. @wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class. LWC Properties : There are two type of LWC properties. 1. Reactive Properties 2. Non-Reactive Properties Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties. 1. Public properties  -
Post a Comment
Read more

LWC Show Records In Table

Requirement : ‹ › Create a LWC component which will show the most recently created 10 Opportunity from the org and show them in table having Name , Close Date , Stage Name , Type and Create . or in other words Show Opportunity data in table format. cmpOpportunityRecords.html < template >      < lightning-card   title = "Opportunity Records"   icon-name = "standard:opportunity" >                  < lightning-datatable                            data = {data}                columns = {columns}                key-field = "Id" >          </ lightning-datatable >      </ lightning-card > </ template > cmpOpportunityRecords.js import  {  LightningElement  , api , wire , track  }  from   'lwc' ; import   getOpportunity   from   '@salesforce/apex/cmpOpportunityRecordsCls.getOpportunity' ; export   default   class   DevCmpShowRecords   extends   LightningElement  {     @ track   columns  =
Post a Comment
Read more

LWC Life Cycle

Requirement : ‹ › LWC Life Cycle : Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle. LWC lifecycle contains the following phases: 1. constructor() 2. connectedCallback() 3. disconnectedCallback() 4. render() 5.renderedCallback() 6. errorCallback(error,stack) 1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called. First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute. 2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM. 3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM. 4. render(): render(
Post a Comment
Read more