Create Prompt Notifications In Lightning web components

 In summer 22, Salesforce released a new module LightningPrompt to create alert notifications in LWC components. 

LWC Prompt Notification

SamplePromptNotification.html

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

SamplePromptNotification.js

import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';

export default class SamplePromptNotification extends LightningElement {
    handlePrompt() {
        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) => {
            //Prompt has been closed
            //result is input text if OK clicked
            //and null if cancel was clicked
        });
    }
}

SamplePromptNotification.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<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>
    </targets>
</LightningComponentBundle>

Sample Prompt screen:

prompt-notification

Also found above code in Tech Shorts Git repo

Labels:
LWC
Join the conversation