Toast Message Container in Lightning Web Component Salesforce | Summer 23 | LWC Stack ☁️⚡️

Kapil April 29, 2023


 We have been playing with toast messages functionality from a long time. From displaying the toast messages like Success, Error, Info & Warning to creation of custom toast messages for communities and Lightning Web Components.

Recently Salesforce has introduced another add-on functionality in this toast message event. The functionality is Toast Notification Container using which you will be able to justify the position of the toast message.

Now you can set your toast message in a container on below locations

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

In below code I have added the toast container position to the top right corner of the screen on the load of my Lightning Web Component.

ToastMessageContainer.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<template>
    <lightning-card title="Toast Container" icon-name="utility:user">
         <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <lightning-button label="Error" onclick={showError}></lightning-button>
                <lightning-button label="Warning" onclick={showWarning}></lightning-button>
                <lightning-button label="Success" onclick={showSuccess}></lightning-button>
                <lightning-button label="Info" onclick={showInfo}></lightning-button>
            </div>
        </div>
    </lightning-card>
</template>


ToastMessageContainer.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import ToastContainer from 'lightning/toastContainer';

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


Output


Checkout Complete Video Tutorial below



 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)

Tags:

Post a Comment

0 Comments