Toast notifications are a great way to provide instant feedback to users in Salesforce Lightning Experience. They appear as small, temporary pop-up messages that inform users about the success, error, or warning states of actions they perform within the app. In this post, we’ll explore how to create and customise Toast notifications in Lightning Web Components (LWC) to improve the user experience.

Table of contents

What is Toast Notification?

Toast notifications are brief, non-blocking messages that appear on the user interface to provide feedback about an operation. Salesforce provides a standard way to display these notifications in Lightning Experience using the ShowToastEvent method from the lightning/platformShowToastEvent module in LWC.

Types of Toast Notifications

Salesforce supports four types of Toast notifications:

Success: Indicates that an operation was successful.
Error: Alerts the user about an issue that needs their attention.
Warning: Warns the user about a potential problem.
Info: Provides additional information to the user.

Success Toast:

 showSuccessToast(){
        const evt = new ShowToastEvent({
        title: 'Toast Notification Success',
        message: 'Data load completed successfully',
        variant: 'success',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }

Error Toast:

showErrorToast(){
        console.log('Method clicked...');
        const evt = new ShowToastEvent({
        title: 'Toast Notification Error',
        message: 'Unexpected error, incomplete Data load',
        variant: 'error',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }

Warning Toast:

showWarningToast(){
       const evt = new ShowToastEvent({
        title: 'Toast Notification Warning',
        message: 'Data is inconsistent, and it may cause problems in the future',
        variant: 'warning',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }

Info Toast:

 showInfoToast(){
        const evt = new ShowToastEvent({
        title: 'Toast Notificaiton Info',
        message: 'Please wait for some time, Data loading in background',
        variant: 'info',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }

Understand Toast Options:

When creating a ShowToastEvent, you have the following options:

title: The title of the toast, displayed as a heading.
message: A string containing a message for the user.
messageData: url and label values that replace the {index} placeholders in the message string.
variant: The theme and icon displayed in the toast. Valid values are:
- info—(Default) A grey box with an info icon.
- success—A green box with a checkmark icon.
- warning—A yellow box with a warning icon.
- error—A red box with an error icon.

You can see the styling for each theme in the Lightning Design System documentation.

mode: Determines how persistent the toast is. Valid values are:
dismissible—(Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first.
pester—Remains visible for 3 seconds.
sticky—Remains visible until the user clicks the close button.

Implementing Toast Notifications in LWC:

To use Toast notifications in LWC, you need to import the ShowToastEvent from the lightning/platformShowToastEvent module and dispatch it in your component’s JavaScript file.

Step-by-Step Guide:

Create a Lightning Web Component:

Let’s create a simple LWC that shows a toast notification when a button is clicked.

sfdx force:lightning:component:create --type lwc --componentname ToastNotificationInLWC --outputdir force-app/main/default/lwc

Modify the HTML file:

<!– toastNotificationInLWC.html –>

<template>
    <lightning-card title="ToastExample" icon-name="custom:custom19" >
        <lightning-button label = "Error Toast" onclick={showErrorToast}></lightning-button>
        <lightning-button label = "Success Toast" onclick = {showSuccessToast}></lightning-button>
        <lightning-button label = "Warning Toast" onclick = {showWarningToast}></lightning-button>
        <lightning-button label = "Info Toast" onclick= {showInfoToast}></lightning-button>
    </lightning-card>
</template>

Edit the Javascript file:

Import the ShowToastEvent and create a method to display the Toast notifications.

// toastNotificationInLWC.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastNotificationInLWC extends LightningElement {
    
    showErrorToast(){
        console.log('Method clicked...');
        const evt = new ShowToastEvent({
        title: 'Toast Notification Error',
        message: 'Unexpected error, incomplete Data load',
        variant: 'error',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }

   showSuccessToast(){
        const evt = new ShowToastEvent({
        title: 'Toast Notification Success',
        message: 'Data load completed successfully',
        variant: 'success',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }
    showWarningToast(){
       const evt = new ShowToastEvent({
        title: 'Toast Notification Warning',
        message: 'Data is inconsistent, and it may cause problems in the future',
        variant: 'warning',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
    }
    showInfoToast(){
        const evt = new ShowToastEvent({
        title: 'Toast Notificaiton Info',
        message: 'Please wait for some time, Data loading in background',
        variant: 'info',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
} 

}

toastNotificationInLWC.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<masterLabel>ToastNotificationInLWC</masterLabel>
	<apiVersion>60.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
		<target>lightning__RecordPage</target>
	</targets>
</LightningComponentBundle>

Deploy and Test:

Deploy your component to Salesforce and add it to a Lightning page to test the Toast notifications.

sfdx force:source:deploy -p force-app/main/default/lwc/toastNotificationInLWC

Output

You can further customise Toast notifications by dynamically setting their properties based on the action performed. For example, you can display different messages for success or error scenarios based on conditions:

// Conditional toast notification
showToast(variant, title, message) {
    const event = new ShowToastEvent({
        title: title,
        message: message,
        variant: variant,
        mode: 'dismissable'
    });
    this.dispatchEvent(event);
}

Use the showToast method to display the appropriate message:

// Example of calling the custom showToast method
if (operationSuccess) {
    this.showToast('success', 'Operation Successful', 'The record has been saved.');
} else {
    this.showToast('error', 'Operation Failed', 'There was an error saving the record.');
}

Conclusion:

Toast notifications are an excellent way to keep users informed without disrupting their workflow. With just a few lines of code, you can create intuitive and responsive feedback mechanisms in your LWC applications. By leveraging these notifications effectively, you can greatly enhance the overall user experience in Salesforce Lightning Experience.

If you have any questions or need further clarification, feel free to leave a comment below.

Thanks for Reading! Happy Coding.