Custom Toast Notification using Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil August 06, 2022

 In this blog I will show you how you may use a custom Lightning Web Component to display toast message in Salesforce.

Why we need it : We can not use toast messages at a few places but we can use LWC instead.

Functionality and features are same as the standard toast messages.

Please check below code - 


CustomToastNotification.html

 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
<template>
  <div class="slds-is-absolute" style="margin-left: 40%">
    <div class="slds-notify_container slds-is-relative">
      <template for:each={toastList} for:item="toast" for:index="index">
        <div key={toast.id}>
          <div class={toast.headerClass} role="status">
            <span class="slds-assistive-text">{toast.headerMessage}</span>
            <span
              class="
                slds-icon_container
                slds-icon-utility-success
                slds-m-right_small
                slds-no-flex slds-align-top
              "
              title="Description of icon when needed"
            >
              <lightning-icon
                icon-name={toast.iconName}
                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">{toast.message}</h2>
            </div>
            <div class="slds-notify__close">
              <lightning-button-icon
                data-index={index}
                icon-name="utility:close"
                size="small"
                variant="bare-inverse"
                class="slds-button"
                alternative-text="close"
                onclick={handleClose}
              ></lightning-button-icon>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>


CustomToastNotification.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
import { LightningElement, track, api } from "lwc";

export default class CustomToastNotification extends LightningElement {
  @track toastList = [];
  @track toastId = 0;
  @api timeout;
  @api sticky;
  @api
  showToast(type, message) {
    let toast = {
      type: type,
      headerMessage: type,
      message: message,
      id: this.toastId,
      iconName: "utility:" + type,
      headerClass: "slds-notify slds-notify_toast slds-theme_" + type
    };
    this.toastId = this.toastId + 1;
    this.toastList.push(toast);

    if (this.sticky === false) {
      setTimeout(() => {
        this.closeModal();
      }, this.timeout);
    }
  }
  closeModal() {
    let index = this.toastId - 1;
    if (index != -1) {
      this.toastList.splice(index, 1);
      this.toastId = this.toastId - 1;
    }
  }
  handleClose(event) {
    let index = event.target.dataset.index;
    if (index != -1) {
      this.toastList.splice(index, 1);
      this.toastId = this.toastId - 1;
    }
  }
}


How to use it in Parent Component?

CustomToastNotification.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <c-custom-toast-notification
    timeout={timeout}
    sticky={sticky}
  ></c-custom-toast-notification>
  <lightning-card title="Custom toast Events" icon-name="utility:user">
    <div class="slds-var-m-around_medium">
      <div>
        <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>


CustomToastNotification.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
import { LightningElement } from "lwc";

export default class CustomToastNotificationParent extends LightningElement {
  sticky = false;
  timeout = 3000;
  showError() {
    this.template
      .querySelector("c-custom-toast-notification")
      .showToast("error", "This is an Error Message.");
  }
  showWarning() {
    this.template
      .querySelector("c-custom-toast-notification")
      .showToast("warning", "This is a Warning Message.");
  }
  showSuccess() {
    this.template
      .querySelector("c-custom-toast-notification")
      .showToast("success", "This is a Success Message.");
  }
  showInfo() {
    this.template
      .querySelector("c-custom-toast-notification")
      .showToast("info", "This is a Info Message.");
  }
}


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