Lightning Web components(LWC) Toast Messages
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.
|
1 |
import { ShowToastEvent } from 'lightning/platformShowToastEvent'; |
2. Create a ShowToastEvent with a few parameters, and dispatch it
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 |
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
|
1 |
sfdx force:lightning:component:create --type lwc -n Notification -d force-app/main/default/lwc |
Here is the Notification.html code
|
1 2 3 4 5 6 7 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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
|
1 2 3 4 5 6 7 8 9 |
<?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.
