How to create Alerts using LightningAlert LWC?

Hello Friends! In this article, you will learn how to create beautiful-looking Alert dialogs in Lightning web components using the brand-new LightningAlert component from the LWC framework.

How to create Alert using LightningAlert LWC?


Use Case

You have a requirement to show an error message with an Ok button based on the user input or action. For example when the user enters invalid input. Another example could be, "you want to show a success alert to the user on completion of some process".


Properties of LightningAlert

There are three variants of the lightning alert, 

  • success - Shows a green-themed alert.
  •  error - Shows a red-themed alert.
  • warning - Shows an orange-themed alert.

You can change the variant by setting the theme attribute as mentioned below. There are three properties you can set on the alert component.

  1. message - the message you want to display on dialog.
  2. theme - this is used to change the variant of the component.
  3. label - this is the header label for the dialog.


Steps for creating an alert using LightningAlert

  1. Import the lightning alert component.
    import LightningAlert from "lightning/alert";
    
  2. Write an async function to open LightningAlert. Set the message, theme, and label attributes as per your requirement.
    async handleSuccessAlertClick(value) {
        await LightningAlert.open({
            message: "You entered:" + value,
            theme: "success", // a red theme intended for error states
            label: "Success!" // this is the header text
        });
    }
    
  3. Call the function handleSuccessAlertClick.


Code Sample for LightningAlert

This code show example for the Error variant, but you can change it as per your requirements.

lightningAlertDemo.js

import { LightningElement } from "lwc";
import LightningAlert from "lightning/alert";

export default class LightningAlertDemo extends LightningElement {
    async handleErrorAlertClick() {
        await LightningAlert.open({
            message: "Add your error message here!",
            theme: "error",
            label: "Error!"
        });
    }
}

lightningAlertDemo.html

<template>
    <lightning-button
        onclick={handleErrorAlertClick}
        label="Show Error Dialog"
    >
    </lightning-button>
</template>

Output

LightningAlert output


Related Posts


You can find all the code from this post on this GitHub repo: Lightning Dialogs.

Thanks for reading! Let me know in the comments if this was helpful!


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