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">

	<lightning-button onclick={handleAlertClick} label="Open Alert Modal"> </lightning-button>
	</lightning-card>
	</template>

view raw alertComponent.html hosted with ❤ by GitHub

	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
	}
	}

view raw alertComponent.js hosted with ❤ by GitHub

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">

	<lightning-button onclick={handleConfirmClick} label="Open Confirm Modal">
	</lightning-button>
	</lightning-card>
	</template>

view raw confirmComponent.html hosted with ❤ by GitHub

	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

	}
	}

view raw confirmComponent.js hosted with ❤ by GitHub

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">

	<lightning-button onclick={handlePromptClick} label="Open Prompt Modal"></lightning-button>
	</lightning-card>
	</template>

view raw promptComponent.html hosted with ❤ by GitHub

	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
	});
	}
	}