Toast Message Updates | Close Actions, Hyperlinks, Toast Library Lightning Web Components Salesforce

Kapil September 16, 2023


Recently Salesforce has introduced some new updates in Toast Message functionality in it's winter'24 release.

In this blog you will learn about these new features in the Toast Message.

1. Toast Library: Now you can use the toast library 'lightning/toast' to use toast messages instead of PlatformToastEvent as it's not available in LWR sites.

2. Hyperlinks: Latest toast messages updates comes with a Hyperlink as well. You can add multiple Hyperlinks in your toast message title & message text.

3. Close Action: You can now trigger something on the close action of your toast message. It could be useful to track user activities and perform action accordingly.


Example

In below example I have created a toast message using the new toast library. I am also using a toast container library to have these toast messages to a specific place.

Please check below code and video tutorial - 


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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>


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
44
45
46
47
48
49
50
51
52
import { LightningElement } from 'lwc';
import ToastContainer from 'lightning/toastContainer';
import Toast from 'lightning/toast';

export default class ToastMessageContainer extends LightningElement {
    connectedCallback() {
        const toastContainer = ToastContainer.instance();
        toastContainer.maxShown = 4;
        toastContainer.toastPosition = 'top-right';
    }
    showError() {
        Toast.show(
            {
                label: 'Sample Toast Title at {0}',
                labelLinks: [
                    {
                        url: 'https://www.salesforcebolt.com',
                        label: 'Salesforce Bolt'
                    }
                ],
                message:
                    'Do like, share and subscribe on {0}. Follow the {1} for new updates.',
                messageLinks: [
                    {
                        url: 'https://www.youtube.com/SalesforceBolt',
                        label: 'YouTube'
                    },
                    {
                        url: 'https://www.salesforcebolt.com',
                        label: 'Blog'
                    }
                ],
                mode: 'sticky',
                variant: 'error',
                onclose: () => {
                    console.log('###Toast Close');
                }
            },
            this
        );
    }
    showWarning() {
        //Show Warning Toast
    }
    showSuccess() {
        //Show Success Toast

    }
    showInfo() {
        //Show Info Toast
    }
}


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