How to display different types of custom toast message as Error, Success, Info and warning toast notifications on click button, uses of ShowToastEvent property in Salesforce Lightning Web Component — LWC

[vijayk3327]

In this post we are going to learn about How to How to How to display different types of custom toast message as Error, Success, Info and warning toast message notifications on click button, uses of importing the ‘ShowToastEvent’ property in Javascript in Salesforce Lightning Web Component — LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcDisplayToastMsg.html

`

Display Toast Notifications in Lightning Web Component (LWC)

      <table class="slds-table slds-table_header-fixed slds-table_bordered slds-table_edit slds-table_resizable-cols" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border:1px #ddd solid;">
         <tbody> 
          <tr>
              <td style="width:30%; border-right:1px #ddd solid;"><lightning-button variant="destructive " label="Show Error" onclick={displayToastError}></lightning-button>    </td>
              <td style="width:70%; color:rgba(214, 5, 1, 1); font-weight:bold;">Display Error Toast Message Notifications</td>
          </tr>
          <tr>
            <td style="width:30%; border-right:1px #ddd solid;"><lightning-button variant="brand" label="Show Warning" onclick={displayToastWarning}></lightning-button></td>
            <td style="width:70%; color:rgb(243 114 4); font-weight:bold;">Display Warning Toast Message Notifications</td>
        </tr>
        <tr>
            <td style="width:30%; border-right:1px #ddd solid;"><lightning-button variant="success" label="Show Success" onclick={displayToastSuccess}></lightning-button></td>
            <td style="width:70%; color:rgb(21 136 0); font-weight:bold;">Display Success Toast Message Notifications</td>
        </tr>
        <tr>
            <td style="width:30%; border-right:1px #ddd solid;"><lightning-button variant="brand" label="Show Info" onclick={displayToastInfo}></lightning-button></td>
            <td style="width:70%; color:rgb(212 205 0); font-weight:bold;">Display Info Toast Message Notifications</td>
        </tr>
      </tbody> 
      </table>   
    <br/><br/>
    <p>To know more <strong>live demo</strong> in LWC, Use this <strong><a href="https://www.w3web.net/tutorial/salesforce-lwc/" target="_blank" rel="noopener noreferrer">link..</a></strong></p>
</div>

</lightning-card>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcDisplayToastMsg.js

` import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class LwcDisplayToastMsg extends LightningElement {
displayToastError() {
const toastEvt = new ShowToastEvent({
title: 'Error',
message: 'Some Error Occurred',
variant: 'error',
mode: 'dismissable'
});
this.dispatchEvent(toastEvt);
}
displayToastSuccess() {
const toastEvt = new ShowToastEvent({
title: 'Success',
message: 'Submitted Successfully ',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(toastEvt);
}
displayToastWarning() {
const toastEvt = new ShowToastEvent({
title: 'Toast Warning',
message: 'Some Problem Occurred',
variant: 'warning',
mode: 'dismissable'
});
this.dispatchEvent(toastEvt);
}
displayToastInfo() {
const toastEvt = new ShowToastEvent({
title: 'Toast Info',
message: 'Data running in background',
variant: 'info',
mode: 'dismissable'
});
this.dispatchEvent(toastEvt);
}
}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcDisplayToastMsg.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-