Creating standard Alert, Confirm, Prompt dialogs in LWC

Jump to code examples

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:

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


References

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com