Custom Toast Notification component is very useful as you can’t show SF standard Toast everywhere. Salesforce standard Toasts have a limitation that these are visible only on one.app. That means only standard Record Pages, home pages will be able to show the toast. For lightning components added to the VF page, you need to use a custom component.
This component is all-in-one & can show toast notification on all types of screens. Additionally you can set your own auto alose time.
Custom Toast Notification component Features:
- Single unit component
- WIll work on Record Detail Page, Home Page, VF Page, all…
- Ability to set the Toast Auto Close Time.
- Use Toast for Success, Error, Info, and Warning.
Drawback:
The next toast will not be visible until the previous one is closed. That means only one toast notification will be visible at a time.
First We will create the CustomToast Lightning Web Component.
For creating a new LWC component, you need to use the VS Code IDE.
After creating the component open the customToast.html file and paste the below code.
|
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 |
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header --> <template> <template if:true={showToastBar}> <div class="slds-notify_container"> <div class={outerClass} role="status"> <span class="slds-assistive-text">{type}</span> <span class={innerClass} title={message}> <lightning-icon icon-name={getIconName} alternative-text="icon" styleclass="slds-icon slds-icon_small" variant="inverse" size="small"></lightning-icon> </span> <div class="slds-notify__content"> <h2 class="slds-text-heading_small">{message}</h2> </div> <div class="slds-notify__close"> <lightning-button-icon icon-name="utility:close" size="small" variant="border-filled" class="slds-button slds-button_icon slds-button_icon-inverse" alternative-text="next" onclick={closeModel} ></lightning-button-icon> </div> </div> </div> </template> </template> <!-- Code by CafeForce Website: http://www.cafeforce.com DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE --> |
Now open the JavaScript file customToast.js and paste the below code.
|
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 |
/* Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header */ import { LightningElement, api, track } from 'lwc'; export default class CustomToast extends LightningElement { @track type; @track message; @track showToastBar = false; @api autoCloseTime = 5000; @api showToast(type, message) { this.type = type; this.message = message; this.showToastBar = true; setTimeout(() => { this.closeModel(); }, this.autoCloseTime); } closeModel() { this.showToastBar = false; this.type = ''; this.message = ''; } get getIconName() { return 'utility:' + this.type; } get innerClass() { return 'slds-icon_container slds-icon-utility-' + this.type + ' slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top'; } get outerClass() { return 'slds-notify slds-notify_toast slds-theme_' + this.type; } } /* Code by CafeForce Website: http://www.cafeforce.com DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE */ |
Now we will call the component.
To use the component, first include this component in your Parent component where you want to show the Toast Notification. You can set your own Toast auto close time. The default time is 5 seconds.
|
1 2 3 4 5 6 |
<template> <c-custom-toast auto-close-time="8000"></c-custom-toast> <lightning-button onclick={showToast} label="Show Toast"></lightning-button> </template> |
Now when you want to show the Toast Notification, just get the customToast component and call its child method and pass the values.
For Success Toast Notification, use the below code-
|
1 2 3 4 5 |
showToast() { this.template.querySelector('c-custom-toast').showToast('success', 'This is a Success Message.'); } |
For Error Toast Notification, use the below code-
|
1 2 3 4 5 |
showToast() { this.template.querySelector('c-custom-toast').showToast('error', 'This is a Error Message.'); } |
To show Info Toast Notification, use the below code-
|
1 2 3 4 5 |
showToast() { this.template.querySelector('c-custom-toast').showToast('info', 'This is a Info Message.'); } |
For Warning Toast Notification, use the below code-
|
1 2 3 4 5 |
showToast() { this.template.querySelector('c-custom-toast').showToast('warning', 'This is a Warning Message.'); } |
Also Check:
For any queries or suggestions, comment below.
Cheers … Happy Coding … 🙂
