Hello, friends today we will learn to Create Lightning Web Component(LWC) Toast Messages in Salesforce. Toast Messages use to show alert messages like success, error, and warning. It is used to show some useful information.
For this, We import ShowToastEvent from the lightning/platformShowToastEvent module.
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
Toast message parameters :
- title: Title of the Toast (Required)
- Message : Message of Toast
- mode : Default value is ‘dismissable’, it automatic invisible. Use ‘sticky’, remains visible until you click the close button.
- variant : Toast styles like Success, Error, Info.
Check LWC Quick Action
TechDicerLWCToastMessage.html :
<template>
<h1> Show Toast In LWC </h1>
<lightning-button label="Success" onclick={showSuccessToast}></lightning-button><br/>
<lightning-button label="Error" onclick={showErrorToast}></lightning-button><br/>
<lightning-button label="Warning" onclick={showWarningToast}></lightning-button><br/>
<lightning-button label="Information" onclick={showInfoToast}></lightning-button><br/>
</template>
TechDicerLWCToastMessage.js :
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class TechDicerLWCToastMessage extends LightningElement {
showErrorToast() {
const evt = new ShowToastEvent({
title: 'Error Title',
message: 'This is an error message',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showSuccessToast(){
const evt = new ShowToastEvent({
title: 'Success Title',
message: 'This is a success message',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showWarningToast(){
const evt = new ShowToastEvent({
title: 'Warning Title',
message: 'This is a warning message',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
showInfoToast() {
const evt = new ShowToastEvent({
title: 'Info Title',
message: 'This is an information message',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(evt);
}
}
You can also create Reusable method and use :
TechDicerLWCToastMessageReusable.js :
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class TechDicerLWCToastMessage extends LightningElement {
showErrorToast() {
this.ShowToast('Error Title', 'This is an error message', 'error', 'dismissable');
}
showSuccessToast(){
this.ShowToast('Success', 'This is an success message', 'success', 'dismissable');
}
showWarningToast(){
this.ShowToast('Warning', 'This is an warning message', 'warning', 'dismissable');
}
showInfoToast() {
this.ShowToast('Info', 'This is an information message', 'info', 'dismissable');
}
ShowToast(title, message, variant, mode){
const evt = new ShowToastEvent({
title: title,
message:message,
variant: variant,
mode: mode
});
this.dispatchEvent(evt);
}
}
What’s your Reaction?
+1
1
+1
+1
+1
+1
+1
Total views : 1113318