Name: Display Toast Notification with an Icon, Label, Message, and Links
Brand: sfdclesson.com
SKU: sfdclesson-com-3
Availability: OnlineOnly

critic

Display Toast Notification with an Icon, Label, Message, and Links

preview

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 lightning/toast and lightning/toastContainer 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.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 lightning/toast module to create these notifications with ease.To begin, you’ll need to create a Lightning Web Component (LWC) that will handle the toast notifications. Let’s call it MyToastComponent.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.view rawmyToastComponent.htmlhosted with ❤ by GitHubview rawmyToastComponent.jshosted with ❤ by GitHubThis JavaScript module (myToastComponent.js) contains the logic for creating and displaying toast notifications. Here’s a step-by-step breakdown of its key parts:Imports: Import necessary modules from the lightning namespace, including ToastContainer, Toast, and LightningAlert.Class Definition: The MyToastComponent class extends LightningElement and contains the component’s functionality.toastContainer Initialization: In the connectedCallback method, the toastContainer property is initialized with ToastContainer.instance() to obtain an instance of the toast container.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.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: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 ToastContainer and Toast, from the lightning/toastContainer and lightning/toast packages, respectively. Inside the connectedCallback function, we initialised the toastContainer.The showToast function demonstrates how to create a toast notification. It includes parameters such as label, labelLinks, message, and messageLinks 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.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: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/documentationAbout the blogSFDCLessons is a blog where you can find various Salesforce tutorials and tips that we have written to help beginners and experienced developers alike. we also share my experience and knowledge on Salesforce best practices, troubleshooting, and optimization. Don’t forget to follow us on:NewsletterSubscribe to our email newsletter to be notified when a new post is published.Join 1,236 other subscribersSFDC Lessons FB pageJoin 1,236 other subscribersFollow SFDC Lessons on WordPress.combloggers like this:

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 lightning/toast and lightning/toastContainer 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.Toast notifications are small, non-intrusive messages that provide users with important information, alerts, or updates about their actions in a web application....

Display Toast Notification with an Icon, Label, Message, and Links

No article scores yet.

CRITIC REVIEWS

PUBLIC REVIEWS