Creating standard Alert, Confirm, Prompt dialogs in LWC

Jump to code examples

• Lightning Alert Code Example
• Lightning Prompt Code Example
• Lightning Confirm Code Example

Hello Trailblazers! The most popular JavaScript functions alert(), prompt() and confirm() are deprecated by HTML specification to use on cross domains, meaning that only the code residing in the top-level domain of your website can use these functions. This can be problematic where you have embedded Salesforce sites, Chatbots, and experiences that are using these functions on the external systems.

Also, it can be difficult to find which part of your codebase is impacted by this change. Also, these functions might even get completed deprecated. To overcome these situations Salesforce has introduced custom components for the same in the Summer 2022 release.

These components are:

• LightningAlert - Used to display alert messages with an Ok button.
• LightningPrompt - Used to show a prompt dialog for users to enter a value.
• LightningConfirm - Used to show a confirmation dialog with Ok and Cancel buttons.

These components were much needed to create consistent and developer-friendly User Interfaces. Before jumping into the solutions, here are the reasons that you should know and use these components in your code.

• Looks much more professional than the browser prompts.
• Follows the SLDS styles.
• These components are standardized and consistent across different browsers, meaning no matter which browser you are using it will look the same. Unlike Chrome prompts looks different from Mozilla Firefox.
• Customizable with different variants like success, error and warning.
• Can replace the Lightning Toasts in some situations.
• Developers have better controls.
• Available for Aura Framework, Canvas, and Visualforce(Workaround).
  
• Makes you a better developer as you choose better than good.

Sample code for LightningAlert, LightningPrompt, and LightningConfirm:

I wrote separate articles on how to use these components in Lightning web components, linked below:

• How to create an Alert using LightningAlert LWC?
• How to create a Prompt using LightningPrompt LWC?
• How to create a Confirm dialog using LightningConfirm LWC?

Also, you can find all the code from all these posts on this GitHub repo: Lightning Dialogs.

References

• Preparing Your Components for the Removal of alert()/confirm()/prompt()
• Create Notifications with New Alert, Confirm, and Prompt Modules