Mastering Toast Message Containers in Salesforce LWC

Hello friends, today we are going to discuss Mastering Toast Message Containers in Salesforce LWC. Managing Toast Notifications with lightning/toastContainer in LWR Sites. In Salesforce, the lightning/toastContainer module is a powerful tool for managing a list of toast components and their order. Each site page supports a single toast container, which can be used to create and manage toast notifications with lightning/toast.

Introducing Toast Notification Container
Salesforce has recently introduced an exciting new feature: the Toast Notification Container. This functionality allows developers to control the position of toast messages on the screen, providing greater flexibility and customization.

Positioning Toast Messages
With the Toast Notification Container, you can now position your toast messages in the following locations:

• Top Left
• Top Right
• Top Center
• Bottom Left
• Bottom Right
• Bottom Center

This added flexibility ensures that toast messages do not obstruct important content and are displayed in the most user-friendly manner.

Implementing Toast Notification Container
Here’s how you can set the toast container position to the top right corner of the screen when your Lightning Web Component loads:

Default Behavior:

• Position: Toast components display at the top center of the container.
• Order: The most recent toast appears at the top, while the oldest appears at the bottom.

Also, check this: Transforming Data in Flows

Key Highlights :

1. toastPosition: Change the position of the toasts within the container.
2. ontainerPosition: Adjust the position of the container relative to its parent element. This attribute has two values:
3. fixed: Positions the container relative to the initial containing block established by the viewport.
4. absolute: Positions the container relative to a positioned parent element.

Code :

Import this line..

import ToastContainer from 'lightning/toastContainer';

This example creates a basic toast container component that handles and displays all the page-level toast messages.

const toastContainer = ToastContainer.instance();

toastMessageContainer.html

<template>
    <lightning-card title="Toast Container" icon-name="utility:user">
         <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <lightning-button label="Top Right Error" onclick={showError}></lightning-button>
                <lightning-button label="Top Left Warning" onclick={showWarning}></lightning-button>
                <lightning-button label="Top Center Success" onclick={showSuccess}></lightning-button>
                <lightning-button label="Bottom Left Info" onclick={showInfoBottom}></lightning-button>
                <lightning-button label="Bottom Right Error" onclick={showErrorBottom}></lightning-button>
                <lightning-button label="Bottom Center Success" onclick={showSuccessBottom}></lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

toastMessageContainer.js

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

export default class ToastMessageContainer extends LightningElement {
    toastContainer;
    connectedCallback() {
        this.toastContainer = ToastContainer.instance();
        this.toastContainer.maxShown = 3;
    }
    showError() {
        this.toastContainer.toastPosition = 'top-right';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'error'
        });
        this.dispatchEvent(evt);
    }
    showWarning() {
        this.toastContainer.toastPosition = 'top-left';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'warning'
        });
        this.dispatchEvent(evt);
    }
    showSuccess() {
        this.toastContainer.toastPosition = 'top-center';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'success'
        });
        this.dispatchEvent(evt);
    }
    showInfoBottom() {
        this.toastContainer.toastPosition = 'bottom-Left';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'info'
        });
        this.dispatchEvent(evt);
    }
    showSuccessBottom() {
        this.toastContainer.toastPosition = 'bottom-center';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'success'
        });
        this.dispatchEvent(evt);
    }

    showErrorBottom() {
        this.toastContainer.toastPosition = 'bottom-right';
        const evt = new ShowToastEvent({
            title: 'Salesforce Toast',
            message: 'Salesforce Bolt LWC Stack Example',
            variant: 'error'
        });
        this.dispatchEvent(evt);
    }
}

Output :

Reference :

1. Toast Container