Blog

Toast notifications are a crucial part of providing timely information and feedback to users in web applications. With the Salesforce Winter’24 release, you can now leverage the power of <strong>lightning/toast</strong> and <strong>lightning/toastContainer</strong> modules to create and manage toast notifications on Lightning Web Runtime (LWR) sites. In this blog post, we will dive into the process of creating and managing toast notifications using these modules.

Introduction to Toast Notifications

Toast notifications are small, non-intrusive messages that provide users with important information, alerts, or updates about their actions in a web application. Salesforce’s Experience Cloud now allows you to utilize the <strong>lightning/toast</strong> module to create these notifications with ease.

Getting Started

To begin, you’ll need to create a Lightning Web Component (LWC) that will handle the toast notifications. Let’s call it <strong>MyToastComponent</strong>.

myToastComponent.html

This HTML template defines the layout of the component. Inside a lightning-card, there are three lightning-button elements. Each button triggers a different toast notification when clicked.

myToastComponent.js

This JavaScript module (myToastComponent.js) contains the logic for creating and displaying toast notifications. Here’s a step-by-step breakdown of its key parts:

1. Imports: Import necessary modules from the lightning namespace, including ToastContainer, Toast, and LightningAlert.
2. Class Definition: The MyToastComponent class extends LightningElement and contains the component’s functionality.
3. toastContainer Initialization: In the connectedCallback method, the toastContainer property is initialized with ToastContainer.instance() to obtain an instance of the toast container.
4. showToast1(), showToast2(), showToast3() Methods: These methods are responsible for displaying different toast notifications with varying configurations. Each method sets the maxToasts and toastPosition properties of the toastContainer based on the desired positioning of the toast notifications.
5. Toast.show() Method: Within each showToast method, the Toast.show() method is called to display a toast notification. The method takes an object as its first parameter, which defines the content and behavior of the toast notification. Key attributes used in the Toast.show() method include:
   • label: The title of the toast.
   • labelLinks: An array of links displayed in the title.
   • message: The message content of the toast.
   • messageLinks: An array of links displayed in the message.
   • mode: The mode of the toast (e.g., sticky).
   • variant: The appearance variant of the toast (e.g., success, warning, error).
   • onclose: A callback function executed after the toast is closed.
6. LightningAlert: Within the onclose callback of showToast1(), a LightningAlert component is opened to display an alert message. This is an additional visual confirmation after the toast is closed.

In this code snippet, we first import the required modules, namely <strong>ToastContainer</strong> and <strong>Toast</strong>, from the <strong>lightning/toastContainer</strong> and lightning/toast packages, respectively. Inside the connectedCallback function, we initialised the <strong>toastContainer</strong>.

The <strong>showToast</strong> function demonstrates how to create a toast notification. It includes parameters such as <strong>label</strong>, <strong>labelLinks</strong>, <strong>message</strong>, and <strong>messageLinks</strong> that allow you to customize the content of the toast. The mode attribute sets the display mode, and variant specifies the appearance of the toast. The onclose callback can be used to execute actions when the toast is closed.

Working with ToastContainer

The lightning/toastContainer module enables you to manage and display a container that holds your toast notifications. This provides more control over how the toast notifications are presented to users. With lightning/toastContainer, you can:

• Set the maximum number of toasts in the container using the maxToasts attribute.
• Position the container using the containerPosition attribute.
• Position the toast components within the container using the toastPosition attribute.

Important Note

While using lightning/platformShowToastEvent is a common method for displaying toast notifications in Salesforce Lightning Web Components, it’s essential to note that this approach is not supported on LWR sites. Instead, you should use the lightning/toast and lightning/toastContainer modules as described in this blog post.

In conclusion, creating and managing toast notifications using the lightning/toast and lightning/toastContainer modules on Salesforce LWR sites offers a powerful way to communicate important information to users in a user-friendly and non-disruptive manner. By leveraging these modules, you can enhance the user experience and streamline communication in your web applications.

References:

https://developer.salesforce.com/docs/component-library/bundle/lightning-toast-container/documentation