Hello friends, today I am going to discuss how to show Notifications with New Alert, Confirm, and Prompt in LWC Salesforce. Instead of native APIs, use LightningAlert, LightningConfirm, and LightningPrompt modules to create notifications from your Lightning web components. The window.alert(), window.confirm(), and window.prompt() native APIs will no longer be supported cross-origin. Modules create modals that work similarly to their API counterparts and work cross-origin.
Also, check this: Custom validation in Lightning Web Component
Key Highlights :
- We can show user-friendly alert messages or notifications.
- No need the use the window. alert().
- We also have an input field with an alert popup.
Code :
LightningAlert: The alert modal of this example includes an error message and an “OK” button.
<template>
<lightning-button onclick={handleAlert} label="Open Alert Modal" variant="brand">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
export default class TechdicerLightningAlert extends LightningElement {
async handleAlert() {
await LightningAlert.open({
message: 'this is the alert message',
theme: 'error', // more would be success, info, warning
label: 'Error!', // this is the header text
});
//Alert has been closed
}
}
LightningConfirm : The example above creates a confirmation modal with two buttons, “OK” and “Cancel”. When a user clicks “OK”, a promise is returned that resolves to true, and when they click “Cancel”, a promise is returned that resolves to false.
<template>
<lightning-button onclick={handleConfirm} label="Open Confirm Modal" variant="brand">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/confirm';
export default class TechdicerLightningConfirm extends LightningElement {
async handleConfirm() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
theme: 'info', // more would be success, info, warning
//variant: 'headerless',
label: 'Header',
// setting theme would have no effect
});
console.log(result);
if(result){
//put your logic
}
//Confirm has been closed
//result is true if OK was clicked
//and false if cancel was clicked
}
}
LightningPrompt: This example creates a prompt modal with a header, message, and two buttons. If the user inputs text and clicks “OK” in the prompt, the .open() the function returns a promise that resolves to the input value, but if the user clicks “Cancel” it resolves to null.
<template>
<lightning-button onclick={handlePrompt} label="Open Prompt Modal">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class TechdicerLightningPrompt extends LightningElement {
handlePromptClick() {
LightningPrompt.open({
message: 'this is the prompt message',
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'Techdicer', //this is optional
}).then((result) => {
console.log(result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
}
FullCode :
LWCNotification.HTML :
<template>
<lightning-card variant="Narrow" title="LWC Alert Notifications" icon-name="standard:account">
<div class="slds-p-horizontal_small" style="text-align:center">
<lightning-button variant="destructive" label="Error Alert" title="Error Alert"
onclick={handleErrorAlertClick} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="success" label="Success Alert" title="Successful action"
onclick={handleSuccessAlertClick} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="brand" label="Info Alert" title="Info Alert" onclick={handleInfoAlertClick}
class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-card>
<div style="height:3rem"></div>
<lightning-card variant="Narrow" title="LWC Action Notifications" icon-name="standard:account">
<div class="slds-p-horizontal_small" style="text-align:center">
<lightning-button variant="brand" label="Info Confirm Alert" title="Info Confirm Alert" onclick={handleInfoConfirmClick}
class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="success" label="Success Confirm Alert" title="Success Confirm Alert" onclick={handleSuccessConfirmClick} class="slds-m-left_x-small">
</lightning-button>
<lightning-button variant="destructive" label="Error Confirm Alert" title="Error Confirm Alert"
onclick={handleErrorConfirmClick} class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-card>
<div style="height:3rem"></div>
<lightning-card variant="Narrow" title="LWC Action Notifications with Message" icon-name="standard:account">
<div class="slds-p-horizontal_small" style="text-align:center">
<lightning-button variant="brand" label="Info Confirm Alert" title="Info Confirm Alert" onclick={handleInfoPromptClick}
class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="success" label="Success Confirm Alert" title="Success Confirm Alert" onclick={handleSuccessPromptClick} class="slds-m-left_x-small">
</lightning-button>
<lightning-button variant="destructive" label="Error Confirm Alert" title="Error Confirm Alert"
onclick={handleErrorPromptClick} class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-card>
</template>
LWCNotification.JS :
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
import LightningConfirm from 'lightning/confirm';
import LightningPrompt from 'lightning/prompt';
export default class LWCNotification extends LightningElement {
async handleErrorAlertClick() {
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
});
//you can also pass param and reuse the method
//this.handleLightningAlert('this is the alert message', 'error', 'Error!');
}
async handleSuccessAlertClick() {
await LightningAlert.open({
message: 'this is the Success alert message',
theme: 'success', // a green theme intended for success states
label: 'Success', // this is the header text
});
//you can also pass param and reuse the method
//this.handleLightningAlert('this is the Success alert message', 'success', 'Success');
}
async handleInfoAlertClick() {
await LightningAlert.open({
message: 'this is the info alert message',
theme: 'info', // a green theme intended for success states
label: 'Information', // this is the header text
});
//Alert has been closed
}
async handleSuccessConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
theme: 'success',
//variant: 'headerless',
label: 'Confirm with Action',
// setting theme would have no effect
});
console.log(result);
//Confirm has been closed
//result is true if OK was clicked
//and false if cancel was clicked
}
async handleErrorConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
theme: 'error',
//variant: 'headerless',
label: 'Confirm with Action',
// setting theme would have no effect
});
console.log(result);
//Confirm has been closed
//result is true if OK was clicked
//and false if cancel was clicked
}
async handleInfoConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
theme: 'info',
//variant: 'headerless',
label: 'Confirm with Action',
// setting theme would have no effect
});
console.log(result);
//Confirm has been closed
//result is true if OK was clicked
//and false if cancel was clicked
}
handleSuccessPromptClick() {
LightningPrompt.open({
message: 'this is the prompt message',
theme: 'success',//other theme error, info
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'Techdicer', //this is optional
}).then((result) => {
console.log(result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
handleErrorPromptClick() {
LightningPrompt.open({
message: 'this is the prompt message',
theme: 'error',//other theme error, info
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'Techdicer', //this is optional
}).then((result) => {
console.log(result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
handleInfoPromptClick(){
LightningPrompt.open({
message: 'this is the prompt message',
theme: 'info',//other theme error, info
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'Techdicer', //this is optional
}).then((result) => {
console.log(result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
async handleLightningAlert(message, theme, label){
await LightningAlert.open({
message: message,
theme: theme, // a red theme intended for error states
label: label, // this is the header text
});
}
}
Output :
Reference :
What’s your Reaction?
+1
+1
+1
+1
+1
+1
Total views : 1095157
2 comments
hey ,
is it possible to add new line in confirm box ? meaning i want 2 line message in confirm box.
Did you try html encode message