Solution: Use LightningPrompt module to show prompt box in lightning web component.
Example:
showPromptBoxInLWC.html
<template>
<lightning-card>
<lightning-button label="Show Prompt Dialog" onclick={showPrompt}></lightning-button>
</lightning-card>
</template>
showPromptBoxInLWC.js
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class ShowPromptBoxInLWC extends LightningElement {
async showPrompt() {
await LightningPrompt.open({
message:'Welcome to Lightning Prompt in LWC',
label:'Are you intrested to Learn Lightning Prompt?'
}).then((result) => {
console.log('Prompt: ',result);
});
}
}
showPromptBoxInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
