【Salesforce】LWC のLightning Alert

lightning/alert モジュール

lightning/alert モジュールを使用すると、コンポーネントに警報モードを作成できます。機能やページだけでなく、コンポーネント上で LightningAlert を使用してシステム全体に影響を与える状態を伝えます。

~~window.alert()~~ ではなく、LightningAlert.open()を使用すると、より一貫したユーザーエクスペリエンスが得られます。同様の機能がありますが、LightningAlert.open()はクロスソース iframe で動作し、Chrome と Safari は alert()メソッドをサポートしていません。window.alert()と異なり、LightningAlert.open()はページ上の実行を停止せず、Promise に戻ります。アラートが閉じた後に実行するコードの場合は、async/await または.then()を使用します。

import LightningAlert from the 'lightning/alert' でコンポーネントにalertは開始します、必要な属性を使用して LightningAlert.open()を呼び出します。

この例では、エラー・メッセージと OK ボタンを使用したアラート・モードを作成します。open()関数は、OKをクリックしたときに解析される promise を返します。

<template>
  <lightning-button onclick="{handleAlertClick}" label="show alert">
  </lightning-button>
</template>

import { LightningElement } from "lwc";
import LightningAlert from "lightning/alert";

export default class MyAlert extends LightningElement {
  async handleAlertClick() {
    await LightningAlert.open({
      message: "this is the alert message",
      theme: "error", // a red theme intended for error states
      label: "Error!", // this is the header text
    });
    //Alert has been closed
  }
}

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

コンポーネントスタイル

LightningAlert は次の属性をサポートしています。

message：アラートに表示されるメッセージテキスト。
label：タイトルテキスト、アリアラベルとしても使用されます。デフォルトの文字列はAlertです。
variant：2 つの値、header、および headerless。デフォルトは header です。
theme：ヘッダーの色のテーマ。プロパティは、SLDS で次のオプションをサポートしています。
- default: white
- shade: gray
- inverse: dark blue
- alt-inverse: darker blue
- success: green
- info: gray-ish blue
- warning: yellow
- error: red
- offline: black