Final Up to date on July 7, 2022 by Rakesh Gupta
Massive Concept or Enduring Query:
- show alert, affirmation, or immediate utilizing the lightning internet element when performing particular actions?
Goals:
After studying this weblog, you’ll have the ability to:
- Perceive the distinction between alert, affirmation, or immediate mannequin dialog
- Add an alert modal inside your lightning internet element
- Add a affirmation modal inside your lightning internet element
- Add a immediate modal inside your lightning internet element
- Monitor the results of consumer motion for mannequin dialog
- and far more
Up to now written just a few articles on Lightning Net Part. Why not test them out if you are at it?!
- How to Implement Conditional Rendering in Lightning Web Component
- Pass lightning-input field Value from a Button Click to Lightning Web Component Controller
- Reset lightning-input Field on Button Click in Lightning Web Component
Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). Thus far, she has created this form, discovered the best way to go user-entered values to the lightning internet element controller, and reset the enter fields when a consumer clicks on the cancel button, as proven under:
Now she desires to supply a capability to evaluation their cancel button motion by displaying a affirmation pop-up as proven under. If customers choose the OK button, then reset the enter subject worth; in any other case, don’t take any motion.
Alert Notification Field
The alert popup field is principally used to popup a message or a warning for the consumer. The first goal of the alert perform is to show a message to the consumer containing any essential info.
Use LightningAlert in your parts to speak a state that impacts all the system, not only a characteristic or web page. LightningAlert.open() doesn’t halt execution on the web page; it returns a Promise. Use async/await or .then() for any code you need to execute after the alert has closed.
Import LightningAlert from the lightning/alert module within the element that can launch the alert modal, and name LightningAlert.open() together with your desired attributes.
The above instance creates an alert modal with an error message and an OK button. The .open() perform returns a promise that resolves when the consumer clicks OK.
<!-- lighntingInputExample.html -->
<template>
<type>
<div
class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
<b>Lightning-Enter Instance</b></div>
<div class="slds-box slds-theme_default">
<lightning-input
sort="e-mail"
label="Electronic mail Handle"
worth={emailvalue}
onchange={handleEmailChange}>
</lightning-input>
<lightning-input
sort="tel"
identify="cell"
label="Cellular"
worth={mobilevalue}
onchange={handleMobileChange}>
</lightning-input>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Impartial"
label="Cancel"
class="slds-m-left_x-small"
onclick={handleCancel}>
</lightning-button>
<lightning-button
variant="model"
class="slds-m-left_x-small"
label="Subsequent"
onclick={handleNext}>
</lightning-button>
</div>
</div>
</type>
</template>
//lighntingInputExample.js
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/verify';
export default class InputExample extends LightningElement() {
emailvalue ="username@instance.com";
mobilevalue= "000-000-0000";
handleEmailChange(occasion){
this.emailvalue = occasion.goal.worth;
}
handleMobileChange(occasion){
this.mobilevalue = occasion.goal.worth;
}
handleNext() {
}
async handleCancel(){
await LightningAlert.open({
message: 'that is the alert message',
theme: 'error',
label: 'Error!',
variant: 'header',
});
}
}
Immediate Notification Field
The immediate popup field is a option to show a message and get information from the consumer. The immediate field is used to get a single information from the consumer, which could be used to carry out duties based mostly on the reply. The immediate field can be utilized for duties like asking the identify of the consumer or age, gender, and so on.
The lightning/immediate module helps you to create a immediate modal inside your element. Use LightningPrompt in your parts to ask the consumer to supply info earlier than persevering with.
Import LightningAlert from the lightning/immediate module within the element that can launch the immediate modal, and name LightningPrompt.open() together with your desired attributes.
This instance creates a immediate modal with a header, message, and two buttons. If the consumer enters textual content and clicks OK within the immediate, the .open() perform returns a promise that resolves to the enter worth. If the consumer clicks Cancel, the perform returns a promise that resolves to null.
<!-- lighntingInputExample.html -->
<template>
<type>
<div
class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
<b>Lightning-Enter Instance</b></div>
<div class="slds-box slds-theme_default">
<lightning-input
sort="e-mail"
label="Electronic mail Handle"
worth={emailvalue}
onchange={handleEmailChange}>
</lightning-input>
<lightning-input
sort="tel"
identify="cell"
label="Cellular"
worth={mobilevalue}
onchange={handleMobileChange}>
</lightning-input>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Impartial"
label="Cancel"
class="slds-m-left_x-small"
onclick={handleCancel}>
</lightning-button>
<lightning-button
variant="model"
class="slds-m-left_x-small"
label="Subsequent"
onclick={handleNext}>
</lightning-button>
</div>
</div>
</type>
</template>
//lighntingInputExample.js
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/verify';
export default class InputExample extends LightningElement() {
emailvalue ="username@instance.com";
mobilevalue= "000-000-0000";
handleEmailChange(occasion){
this.emailvalue = occasion.goal.worth;
}
handleMobileChange(occasion){
this.mobilevalue = occasion.goal.worth;
}
handleNext() {
}
async handleCancel(){
const consequence = await LightningPrompt.open({
message: 'What's your gender?',
theme: 'warning',
label: 'Please Reply!',
variant: 'header',
defaultValue: '',
});
if(consequence=='male'){
//add logic for male
}
else if (consequence=='feminine'){
// add logic for feminine
}
else{
//logic for remaining
}
}
}
Automation Champion Strategy (I-do):
Now let’s return to our authentic use case, the place Rachel desires to supply a capability to evaluation their cancel button motion by displaying a affirmation pop-up. If customers choose the OK button, then reset the enter subject worth; in any other case, don’t take any motion. Earlier than going forward, let’s spend a couple of minutes understanding a affirmation notification field and the best way to implement it within the lightning internet element controller.
Affirmation Notification Field
The verify popup field shows a message to the customers asking for his or her affirmation to proceed with an occasion they’ve triggered. An instance of the verify field could be the popup on the consumer’s browser to substantiate their motion.
The verify popup field permits customers to decide on by offering customers with a two-button choice. When customers click on the button, the duty linked to the clicked button is carried out. The 2 buttons which the verify field gives are OK and Cancel.
lightningInputExample.js-meta.xml
A lightning internet element can be utilized to construct customized pages for Lightning Expertise and the Salesforce cell app rapidly with point-and-click instruments. Ensure so as to add the appropriate goal for it.
This configuration file makes the element obtainable for all Lightning web page varieties however restricts help on desktops.
<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__RecordPage</goal>
<goal>lightning__AppPage</goal>
<goal>lightning__HomePage</goal>
</targets>
</LightningComponentBundle>
lightningInputExample.html
Each UI element will need to have an HTML file with the foundation tag <template>. The template incorporates two lightning-input tags that create enter for e-mail and cell. The template consists of two lightning-button. The primary button (Subsequent) is used to go the worth to JavaScript Part, whereas the second button (Cancel) is used to reset the enter fields.
When a consumer clicks on the Cancel button will name a JavaScript methodology handleCancel() which can use LightningConfirm.open() that can launch the verify modal.
<!-- lighntingInputExample.html -->
<template>
<type>
<div
class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
<b>Lightning-Enter Instance</b></div>
<div class="slds-box slds-theme_default">
<lightning-input
sort="e-mail"
label="Electronic mail Handle"
worth={emailvalue}
onchange={handleEmailChange}>
</lightning-input>
<lightning-input
sort="tel"
identify="cell"
label="Cellular"
worth={mobilevalue}
onchange={handleMobileChange}>
</lightning-input>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Impartial"
label="Cancel"
class="slds-m-left_x-small"
onclick={handleCancel}>
</lightning-button>
<lightning-button
variant="model"
class="slds-m-left_x-small"
label="Subsequent"
onclick={handleNext}>
</lightning-button>
</div>
</div>
</type>
</template>
lightningInputExample.js
This JavaScript controller creates a verify modal with two buttons, OK and Cancel. The .open() perform returns a promise that resolves to true (and reset enter fields) when a consumer clicks OK and false (do nothing) when the consumer clicks Cancel.
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/verify';
export default class InputExample extends LightningElement() {
emailvalue ="username@instance.com";
mobilevalue= "000-000-0000";
handleEmailChange(occasion){
this.emailvalue = occasion.goal.worth;
}
handleMobileChange(occasion){
this.mobilevalue = occasion.goal.worth;
}
handleNext() {
alert('e-mail '+ this.emailvalue);
alert('Cellular '+ this.mobilevalue);
}
async handleCancel(){
const consequence = await LightningConfirm.open({
message: 'Are you certain you need to reset fields?',
variant: 'header',
label: 'Please Verify',
theme: 'error',
});
if(consequence==true){
this.emailvalue = "username@instance.com";
this.mobilevalue = "000-000-0000";
}
}
}
Formative Evaluation:
I need to hear from you!
What’s one factor you discovered from this put up? How do you envision making use of this new information in the actual world? Be happy to share within the feedback under.
