LightningAlert, LightningConfirm, and LightningPrompt are used to create notifications from your Lightning web components. Chrome and Safari plan to end support for cross-origin use of the window.alert(), window.confirm() and window.prompt() native APIs.
Each new module creates a modal that functions like its API counterpart and works in cross-origin iframes.
LightningAlert, LightningConfirm, and LightningPrompt return a promise. Use
async/awaitor.then()for any code that you want to execute after the modal closes.
Table of Contents
Type of Notification in Lightning Web Component.
- L
ightningAlert LightningConfirmLightningPrompt
do you know What are Decorators in Lightning Web Component (LWC)? Decorators in LWC
LightningAlert :
LightningAlert creates an alert modal with an error message and an OK button. The .open( ) function returns a promise that resolves when the user clicks OK.
LightningAlert.html
<!-- LightningAlert.html -->
<template>
<lightning-button onclick={handleAlertClick} label="Open Alert Modal">
</lightning-button>
</template>
createNotification.js
// LightningAlert.js
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
export default class LightningAlert extends LightningElement {
async handleAlertClick() {
await LightningAlert.open({
message: 'this is the alert message',
theme: 'error', // a red theme intended for error states
label: 'Error!', // this is the header text
});
//Alert has been closed
}
}
ightningAlertLightningConfirm :
LightningConfirm creates a confirm modal with two buttons, OK and Cancel. The .open( ) function returns a promise that resolves to true when the user clicks OK and false when they click Cancel.
LightningConfirm.html
<!-- LightningConfirm.html -->
<template>
<lightning-button onclick={handleConfirmClick} label="Open Confirm Modal">
</lightning-button>
</template>
LightningConfirm.js
// LightningConfirm.js
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/confirm';
export default class LightningConfirm extends LightningElement {
async handleConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the confirm message',
variant: 'header',
label: 'Please Confirm',
theme: 'success',
//label: 'this is the aria-label value',
// setting theme would have no effect
}).then((result) => {
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
console.log('Lightning Confirm Result===>',result);
});
}
}
ightningConfirmLightningPrompt
LightningPromptLightningPrompt
LightningPrompt
LightningPrompt
<!-- LightningPrompt.html -->
<template>
<lightning-button onclick={handlePromptClick} label="Open Prompt Modal">
</lightning-button>
</template>
LightningPrompt
LightningPrompt
// LightningPrompt.js
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class LightningPrompt extends LightningElement {
handlePromptClick() {
LightningPrompt.open({
message: 'this is the prompt message',
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'Blog is fantastic', //this is optional
}).then((result) => {
console.log('Lightning Prompt Result===>',result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
}
ightningPromptFor any Queries/doubts comment below and for quick responses connect on LinkedIn and Twitter.