Alert, Confirm, and Prompt Modules in LWC

The Web Hypertext Application Technology Working Group (WHATWG) updated the HTML specification in early 2021 to remove support for the alert(), confirm(), and prompt() APIs when used in a third-party context.

This change was first introduced with the release of Chromium 92, resulting in numerous cases raised by Salesforce customers. Later, it was also made available in Safari 15 and iOS 15. Because of the impact on Salesforce customers, the Salesforce team contacted Apple and the Chromium project to request that this change be reversed. They agreed to temporarily roll back the change. But APIs are once again going to be removed.

Advertisements

To address this issue in any LWC or Aura component, Salesforce has introduced LightningAlert, LightningConfirm, and LightningPrompt.

So now to generate notifications from your Lightning web components, use the new modules LightningAlert, LightningConfirm, and LightningPrompt instead of native APIs. Chrome and Safari intend to discontinue cross-origin support for the native APIs window.alert(), window.confirm(), and window.prompt(). Each new module generates a modal that works in cross-origin iframes and functions similarly to its API counterpart.

The below examples show how to use LightningAlert, LightningConfirm, and LightningPrompt in Lightning web components.

LightningAlert

<template>
<lightning-card title="LightningAlert" icon-name="utility:alert">
&nbsp;&nbsp;
<lightning-button onclick={handleAlertClick} label="Open Alert Modal"> </lightning-button>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert'; //this module needs to import.
export default class AlertComponent extends LightningElement {
async handleAlertClick() {
await LightningAlert.open({
message: 'This is the alert message from LWC',
theme: 'error', // a red theme intended for error states
label: 'Error!', // this is the header text
});
//Alert has been closed
}
}
Advertisements

LightningConfirm

This example generates a confirm modal without a header and two buttons, “OK” and “Cancel.” When the user clicks “OK,” the.open() function returns a promise that resolves to true and false.

<template>
<lightning-card title="LightningConfirm" icon-name="utility:check">
&nbsp;&nbsp;
<lightning-button onclick={handleConfirmClick} label="Open Confirm Modal">
</lightning-button>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/confirm';
export default class ConfirmComponent extends LightningElement {
async handleConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
variant: 'headerless',
label: 'this is the aria-label value',
// setting theme would have no effect
});
//result is true if OK was clicked
//and false if cancel was clicked
console.log('Result: '+ result);
//Confirm has been closed
}
}
Advertisements

LightningPrompt

In this example, a prompt modal with a header, message, and two buttons is created. If the user enters text and clicks “OK” in the prompt, the.open() function returns a promise that resolves to the input value; however, if the user clicks “Cancel,” the promise resolves to null.

<template>
<lightning-card title="LightningPrompt" icon-name="utility:prompt">
&nbsp;&nbsp;
<lightning-button onclick={handlePromptClick} label="Open Prompt Modal"></lightning-button>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class PromptComponent extends LightningElement {
handlePromptClick() {
LightningPrompt.open({
message: 'this is the prompt message',
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'initial input value', //this is optional
}).then((result) => {
console.log('Result: '+ result);
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
}

Join 153 other subscribers
Advertisements
Advertisements

Arun Kumar

Arun Kumar is a Certified Salesforce developer and Salesforce Champions (Platform Champions), a Computer Science graduate, working on the Salesforce platform and providing customer solutions using force.com as a Salesforce consultant/developer. He is the founder of SFDCLessons. :)

Leave a Reply