How To Add Confirmation, Prompt and Alert Dialog Box in LWC

In this article we will see the how to Add Confirmation, Prompt and Alert Dialog Box in LWC.

We display confirmation dialog box to end user before doing any destructive action like deletion of the record. We ask to give input(prompt) if required or warn(alert) or then confirm with success message after deletion of the record.

To address this scenario in any LWC, Salesforce has introduced LightningAlert, LightningConfirm, and LightningPrompt. So now to generate notifications from your Lightning web components, we can use the new modules LightningAlert, LightningConfirm, and LightningPrompt instead of native APIs.

The LightningConfirm/ LightningAlert/ LightningPrompt  Component

These component shows a modal popup with a header, message, and two buttons Ok and cancel. There are three different parameters to this component.

1.message – the message you want to display on dialog.

2.label – this is the header label for the dialog.

3.variant – there are two variants of the confirm dialog default (with  header) and headerless (without header).

Let’s see the below example to implement these one by one:

LightningAlert

<template>
    <lightning-card title="LightningAlert" icon-name="utility:alert">
        &nbsp;&nbsp;
        <lightning-button onclick={handleAlert} label="Open Alert Modal Box"> </lightning-button>
    </lightning-card>
</template>

AlertComponentInLwc.Js

/*
* @description: alert message in lwc component
* @author: sfdc4u.com
*/
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert'; //this module needs to import.
export default class AlertComponentInLwc extends LightningElement {
    async handleAlert() {
        await LightningAlert.open({
            message: 'This is the alert message from sfdc4u.com',
            theme: 'error', // a red theme intended for error states
            label: 'Error!', // this is the header text
        });
        
    }
}

alertComponentInLwc.js-meta.xml

<?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
  	</targets>
 </LightningComponentBundle>

Now let’s add this LWC component on the home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your alertComponentInLwc component and drag it on right-hand side top.
• Click Save and activate.

Output:

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="Lightning Confirm" icon-name="utility:check">
        &nbsp;&nbsp;
        <lightning-button onclick={handleConfirm} label="Open Confirm Modal Box">
        </lightning-button>
    </lightning-card>
</template>

ConfirmComponentInLwc.Js

/*
* @description: confirm message in lwc component
* @author: sfdc4u.com
*/
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/confirm';
export default class ConfirmComponentInLwc extends LightningElement {

    async handleConfirm() {
        const result = await LightningConfirm.open({
            message: 'Prompt Message from sfdc4u.com',
            variant: 'headerless',
            label: 'this is the aria-label value',
        });
       
        console.log('Result: '+ result);// Result is True if Ok is clicked or False otherwise
               
    }
}

Now let’s add this LWC component on the home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your confirmComponentInLwc component and drag it on right-hand side top.
• Click Save and activate.

Output:

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="Lightning Prompt" icon-name="utility:prompt">
        &nbsp;&nbsp;
        <lightning-button onclick={handlePrompt} label="Open Prompt Modal Box"></lightning-button>
    </lightning-card>
</template>

PromptComponentInLwc.js

/*
* @description: prompt message in lwc component
* @author: sfdc4u.com
*/
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class PromptComponentInLwc extends LightningElement {
    handlePrompt() {
        LightningPrompt.open({
            message: 'Please enter your favorite website name:',
            label: 'Please Respond', // this is the header text
            defaultValue: 'initial input value', //this is optional
        }).then((result) => {
            console.log('Result: '+ result);
            
        });
    }
}

Now let’s add this Lightning Web Component on the home page.

• Go to the Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your promptComponentInLwc component and drag it on right-hand side top.
• Click Save and activate.

Output:

Reference : Salesforce.com

Also Read: Implement Conditional Rendering in LWC