Home
Lightning Web components(LWC) Toast Messages

Lightning Web components(LWC) Toast Messages

By February 2, 2019 Lightning Web Components 0 Comments

Let’s discuss here how to use the toast notification in Lightning web component.  A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also simply provide information. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning-platform-show-toast-event module. You can style a toast to provide information, an error, a success, or a warning. You can also configure the visibility of the toast. It can remain visible for three seconds, until the user clicks to dismiss it, or a combination of both. To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEventfrom lightning/platformShowToastEvent. Create a ShowToastEvent with a few parameters, and dispatch it. The app handles the rest.

1. Import ShowToastEvent from lightning/platformShowToastEvent. Create and dispatch a ShowToastEvent event with title, message, variant, and mode properties.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

2. Create a ShowToastEvent with a few parameters, and dispatch it

showToast() {
        const event = new ShowToastEvent({
            title: 'Get Help',
            message: 'Salesforce documentation is available in the app. Click ? in the upper-right corner.',
        });
        this.dispatchEvent(event);
    }

 

Show Error Toast 

use this code to show the error toast message

const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Warning Toast 

Use this code to show the warning Toast

 const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
       this.dispatchEvent(evt);

Show Success Toast 

Use this code to show the success toast message

 const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Info Toast 

Use this code to show the info toast

const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Here is the complete code the custom lightning web component .create a new lightning web component using the SFDX command

sfdx force:lightning:component:create --type lwc -n Notification -d force-app/main/default/lwc

Here is the Notification.html code

<template>
    <h1> Notifications </h1>
    <lightning-button label="Show error" onclick={showErrorToast}></lightning-button>
    <lightning-button label="Show warning" onclick={showWarningToast}></lightning-button>
    <lightning-button label="Show success" onclick={showSuccessToast}></lightning-button>
   <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>
</template>

Here is the Notification.js JavaScript controller

import {
    LightningElement
} from 'lwc';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';
export default class Notification extends LightningElement {
    showErrorToast() {
            const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showWarningToast() {
            const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
            this.dispatchEvent(evt);
        }
        showSuccessToast() {
            const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showInfoToast() {
            const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
}

Use this Notification.js-meta.xml configuration files

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

</LightningComponentBundle>

Push the changes to scratch org and add this component to the record page and you can able to see the different toast notification based on the button click.

 

 

 

 

 

Related Posts