Toast notification pops up to alert users of a success, error, or warning.
We need to import ShowToastEvent from the lightning/platformShowToastEvent module to
display a toast notification in Lightning Experience or Experience Builder sites.
The important point to note is ShowToastEvent isn’t supported on login pages in Experience
Builder sites.
Success Toast:
showNotification() {
const evt = new ShowToastEvent({
title: 'Success Message',
message: 'Record inserted successfully ',
variant: 'success',
mode:'dismissible'
});
this.dispatchEvent(evt);
}
Error Toast:
showNotification() {
const evt = new ShowToastEvent({
title: 'Error Message',
message: 'Record inserted failed ',
variant: 'error',
mode:'dismissible'
});
this.dispatchEvent(evt);
}
Warning Toast:
showNotification() {
const evt = new ShowToastEvent({
title: 'Warning Message',
message: 'Some problem occured ',
variant: 'warning',
mode:'dismissible'
});
this.dispatchEvent(evt);
}
Info Toast:
showNotification() {
const evt = new ShowToastEvent({
title: 'Information Message',
message: 'Operation running in background ',
variant: 'info',
mode:'dismissible'
});
this.dispatchEvent(evt);
}
Let us understand the use with an example below.
<template>
<lightning-card title="Testing Toast In LWC">
<lightning-button
label="Success Toast"
onclick={successToastFunction}></lightning-button>
<lightning-button label="Error
Toast" onclick={errorToastFunction}></lightning-button>
<lightning-button
label="Warning Toast"
onclick={warningToastFunction}></lightning-button>
<lightning-button
label="Information Toast"
onclick={informationToastFunction}></lightning-button>
</lightning-card>
</template>
import { LightningElement
} from 'lwc';
import { ShowToastEvent }
from 'lightning/platformShowToastEvent';
export default class TestingToastInLwc extends LightningElement {
successToastFunction() {
const evt = new ShowToastEvent({
title: 'Success Message',
message: 'Record inserted successfully ',
variant: 'success',
mode:'dismissible'
});
this.dispatchEvent(evt);
}
errorToastFunction() {
const evt1 = new ShowToastEvent({
title: 'Error Message',
message: 'Record inserted failed ',
variant: 'error',
mode:'dismissible'
});
this.dispatchEvent(evt1);
}
warningToastFunction() {
const evt2 = new ShowToastEvent({
title: 'Warning Message',
message: 'Some problem occured ',
variant: 'warning',
mode:'dismissible'
});
this.dispatchEvent(evt2);
}
informationToastFunction() {
const evt3 = new ShowToastEvent({
title: 'Information Message',
message: 'Operation running in background ',
variant: 'info',
mode:'dismissible'
});
this.dispatchEvent(evt3);
}
}
No comments:
Post a Comment