LWC での Toast メッセージ

  • LWC で Toast メッセージを表示するために、共通の Util クラスを作成することができます。

  • Toast メッセージのタイトル、メッセージ、種類(success, warning, error)などを指定することができます。

  • Toast メッセージを表示するために必要な import を記述する。

実装例

以下は、Toast メッセージを表示する共通の Util

import { ShowToastEvent } from "lightning/platformShowToastEvent";

/**
 * メッセージ表示
 * @param {window} that
 * @param {string} title タイトール
 * @param {string} message メッセージ
 * @param {string} variant タイプ info、success、warning、error
 */
export const showToast = (that, title, message, variant) => {
  const event = new ShowToastEvent({
    title: title,
    message: message,
    variant: variant,
  });
  that.dispatchEvent(event);
};

/**
 * 情報メッセージを表示
 * @param {*} that this
 * @param {*} message メッセージ
 */
export const showInfoToast = (that, message) => {
  showToast(that, "Info", message, "info");
};

/**
 * 成功メッセージを表示
 * @param {*} that this
 * @param {*} message メッセージ
 */
export const showSuccessToast = (that, message) => {
  showToast(that, "Success", message, "success");
};

/**
 *エラーメッセージを表示
 * @param {*} that this
 * @param {*} message メッセージ
 */
export const showErrorToast = (that, message) => {
  showToast(that, "Error", message, "error");
};

/**
 * ワーニングメッセージを表示
 * @param {*} that this
 * @param {*} message メッセージ
 */
export const showWarningToast = (that, message) => {
  showToast(that, "Warning", message, "warning");
};