top of page
Writer's pictureSaurabh Singh

Alert, Confirm, and Prompt in LWC

Lightning/alert module is a new module introduced by Salesforce to create alert notifications in Lightning web components. It replaces the native window.alert () API that is going to be discontinued by Chrome and Safari for cross-origin use. Lightning/alert module generates a modal that works in cross-origin iframes and functions similarly to the window.alert () API.


1. To use Lightning/alert module, you need to import it from the lightning/alert module in the component that will launch the alert modal, and call LightningAlert.open () with your desired attributes. The.open () function returns a promise that resolves when the user clicks OK. You can use async/await or.then () for any code you want to execute after the alert has closed.


Here is an example of how to use Lightning/alert module in a Lightning web component.


<template>

<lightning-card title="LightningAlert" icon-name="utility:alert">

<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

}

}


2. To use LightningAlert.Confirm, you need to import it from the lightning/confirm module in the component that will launch the confirm modal, and call LightningConfirm.open () with your desired attributes.


The.open () function returns a promise that resolves to true if the user clicks “OK” and false if the user clicks “Cancel”. You can use async/await or.then () for any code you want to execute based on the user’s choice.


Here is an example of how to use LightningAlert.Confirm in a Lightning web component.


<template>

<lightning-card title="LightningConfirm" icon-name="utility:check">

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

</lightning-button>

</lightning-card>

</template>


import { LightningElement } from 'lwc';

import LightningConfirm from 'lightning/confirm'; //this module needs to import.


export default class ConfirmComponent extends LightningElement {

async handleConfirmClick() {

const result = await LightningConfirm.open({

message: 'Are you sure you want to delete this record?',

variant: 'headerless',

label: 'Delete confirmation',

});

if (result) {

//User clicked OK

//Do something

} else {

//User clicked Cancel

//Do something else

}

}

}


3. LightningAlert.Prompt is a module that generates a prompt modal with an input field and two buttons, “OK” and “Cancel”. It is similar to the native window.prompt () API, but it works in cross-origin iframes. You can use it to ask the user for some input before performing an action.


To use LightningAlert.Prompt, you need to import it from the lightning/prompt module in the component that will launch the prompt modal, and call LightningPrompt.open () with your desired attributes. The.open () function returns a promise that resolves to the value entered by the user if they click “OK” and null if they click “Cancel”. You can use async/await or.then () for any code you want to execute based on the user’s input.


Here is an example of how to use LightningAlert.Prompt in a Lightning web component.


<template>

<lightning-card title="LightningPrompt" icon-name="utility:edit">

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

</lightning-button>

</lightning-card>

</template>


import { LightningElement } from 'lwc';

import LightningPrompt from 'lightning/prompt'; //this module needs to import.


export default class PromptComponent extends LightningElement {

async handlePromptClick() {

const result = await LightningPrompt.open({

message: 'Enter your name',

theme: 'success',

label: 'Name',

defaultValue: 'John Wick',

});

if (result) {

//User entered some value and clicked OK

//Do something with result

} else {

//User clicked Cancel

//Do something else

}

}

}


This example creates a prompt modal with a success theme and a message asking the user to enter their name. The input field has a default value of “John Wick”. You can customize the message, theme, label, defaultValue, and other attributes of the prompt modal according to your needs.

Subscribe to SFDC BLOGS

©2019 by SFDC Blogs.

bottom of page