Set Toast Location in Salesforce

 

Salesforce recently introduced an additional feature to enhance the toast message functionality, known as Toast Notification Container. This feature allows you to control the positioning of toast messages.

You can now position your toast messages within a container in the following locations:

Top Left

Top Right

Top Center

Bottom Left

Bottom Right

Bottom Center

In the following code snippet, I have included functionality to set the toast container position to the top right corner of the screen when the Lightning Web Component loads:

ToastLocation.html:

<template>

 <lightning-card title="Toast Location" icon-name="utility:announcement">

         <div class="slds-var-m-around_medium">

            <div style="padding:10px">

                <lightning-button label="Success" onclick={showSuccess}></lightning-button>

            </div>

        </div>

    </lightning-card>

</template>

ToastLocation.js :

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent'

import ToastContainer from 'lightning/toastContainer';

export default class ShowToast extends LightningElement {

     connectedCallback() { 

        const toastContainer = ToastContainer.instance();

        toastContainer.maxShown = 3;

        toastContainer.toastPosition = 'bottom-right';

    }

    showSuccess() {

        const evt = new ShowToastEvent({

            title: 'Salesforce Toast',

            message: 'Salesforce Wallah LWC Example',

            variant: 'success'

        });

        this.dispatchEvent(evt);

    }

}

}

OUTPUT :- 

THANK YOU