Final Up to date on November 28, 2022 by Rakesh Gupta
Huge Concept or Enduring Query:
- How do you employ the lightning net part to show the modal window?
Targets:
After studying this weblog, you’ll have the ability to:
- Perceive the distinction between alert and mannequin
- Show a modal with an overlay on the button click on
- Show one other lightning net part contained in the mannequin
- Conceal the modal when closed by the consumer
- and way more
Previously written a number of articles on Lightning Net Element. Why not examine them out while you’re at it?!
- Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component
- Using Lightning Web Component to Show an Alert Banner
Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel obtained a process to design a lightning net part that has buttons with the choice to open the next varieties:
-
- Submit Lead
- Submit Tackle Change
- Provoke KYC
What’s lightningModel?
The modal is a window that’s displayed over the present utility and deactivates the performance of the remainder of the content material. Modals are sometimes used to direct customers’ consideration to take motion or view a message from the appliance.
What’s the Distinction between an Alert and a Mannequin?
An alert is a small window that typically prevents customers from doing something on a web page till they’ve dismissed it.
A lightningModal part overlays a message modal on high of the present app window. A modal interrupts a consumer’s workflow and attracts consideration to the message. The distinction is that modals want direct interplay to be dismissed. Modals are one of the simplest ways to insert a message or a lightning net part into the appliance.
Let’s say you’ve gotten a button with a name to motion that claims Provoke KYC, and whenever you click on it, a container (LWC) exhibits up with a listing of actions that have to be triggered. It allows you to do extra work with out exhibiting all of the work upfront.
In contrast to different elements, lightningModal part doesn’t use a lightning-modal tag or prolong LightningElement. There isn’t any lightning-modal part. As an alternative, you create a modal by extending LightningModal and utilizing this helper lightning-modal-* elements to supply a header, footer, and the modal’s physique.
- lightning-modal-body
- lightning-modal-header
- lightning-modal-footer
To create a modal part, import LightningModal from lightning/modal. The part has entry to the conventional LWC assets in addition to the particular container, helper elements, strategies, and occasions of the lightning/modal module.
Automation Champion Strategy (I-do):
To unravel the above enterprise requirement might be creating beneath lightning net elements. We may even learn to go lwc inside a lightningModal base part.
- baseLightningModal
- lightningModalExample
baseLightningModal Element
This mannequin lightning net part will use to submit a lead. We are going to name this mannequin type from lightningModalExample and go the worth to the content material property.
baseLightningModal.html
The modal’s HTML template makes use of helper lightning-modal-* elements to supply a modal’s header, footer, and physique. On this instance, the content material for the modal physique comes from the content material property we outlined within the modal’s JavaScript file.
The lightning-modal-header and lightning-modal-footer elements are optionally available however beneficial. The lightning-modal-* elements render within the order they seem within the template. Place the lightning-modal-body part after lightning-modal-header and earlier than the lightning-modal-footer part.
<template>
<lightning-modal-header label={content material}></lightning-modal-header>
<lightning-modal-body>
<type>
<div class="slds-box slds-theme_default">
<lightning-input
identify="firstName"
label="First Identify"
worth="">
</lightning-input>
<lightning-input
identify="lastName"
label="Final Identify"
worth="">
</lightning-input>
<lightning-input
kind="date"
identify="birthdate"
label="Birthdate"
worth="">
</lightning-input>
<lightning-input
kind="e-mail"
identify="emailAddress"
label="Electronic mail Tackle"
worth="">
</lightning-input>
<lightning-input
kind="tel"
identify="cellular"
label="Cellular"
worth="">
</lightning-input>
</div>
</type>
</lightning-modal-body>
<lightning-modal-footer>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Impartial"
label="Cancel and shut"
class="slds-m-left_x-small"
onclick={handleClose}>
</lightning-button>
<lightning-button
variant="model"
class="slds-m-left_x-small"
label="Save"
onclick={handleSave}>
</lightning-button>
</div>
</lightning-modal-footer>
</template>
baseLightningModal.js
On this instance, the content material property passes knowledge to the modal from the invoking part i.e., lightningModalExample.
import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class MyModal extends LightningModal {
@api content material;
handleClose() {
this.shut('accomplished');
}
handleSave() {
}
}
baseLightningModal.js-meta.xml
Each part will need to have a configuration file. The configuration file defines the metadata values for the part, together with supported targets and the design configuration for Lightning App Builder and Expertise Builder.
<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__RecordPage</goal>
<goal>lightning__AppPage</goal>
<goal>lightning__HomePage</goal>
</targets>
</LightningComponentBundle>
lightningModalExample Element
upon the button click on, it is going to open the baseLightningModal part. It additionally passes the worth to the content material property.
lightningModalExample.html
The HTML template for this app incorporates a bunch of buttons that opens the modal.
<template>
<div class="slds-box slds-theme_default">
<lightning-button-group>
<lightning-button onclick={handleLead} label="Submit Lead" aria-haspopup="modal"></lightning-button>
<lightning-button label="Submit Tackle Change"></lightning-button>
<lightning-button label="Provoke KYC"></lightning-button>
</lightning-button-group>
</div>
</template>
lightningModalExample.js
LightningModal supplies an.open() methodology that opens a modal and returns a promise that asynchronously resolves with the results of the consumer’s interplay with the modal. LightningModal Offers these properties
- Label
- Measurement
- Description
- disableClose
It invokes the .open() methodology in a handleClick()operate sure to the app button’s onclick attribute, and makes use of async and await key phrases to deal with the promise returned by .open(). This instance overrides the dimensions worth by setting it to giant and units the modal’s user-defined property content material.
import { LightningElement } from 'lwc';
import myModal from 'c/baseLightningModal';
export default class MyApp extends LightningElement {
async handleLead() {
const end result = await myModal.open({
dimension: 'small',
description: 'Accessible description of modal's objective',
content material: 'Lead Era Type',
});
console.log(end result);
}
}
lightningModalExample.js-meta.xml
Each part will need to have a configuration file. The configuration file defines the metadata values for the part, together with supported targets and the design configuration for Lightning App Builder and Expertise Builder.
<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
<apiVersion>56.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__RecordPage</goal>
<goal>lightning__AppPage</goal>
<goal>lightning__HomePage</goal>
</targets>
</LightningComponentBundle>
Proof of Idea
Formative Evaluation:
I wish to hear from you!
What’s one factor you realized from this put up? How do you envision making use of this new information in the true world? Be at liberty to share within the feedback beneath.
