アラートモーダルを使用して、ユーザの処理を停止し、ユーザのシステム、機能、またはページに影響する緊急エラーを伝達します。Lightning Experience にアラートモーダルを表示するには、lightning/alert モジュールから LightningAlert をインポートし、目的の属性を使用して LightningAlert.open() をコールします。
このアラートモーダルは、ネイティブの window.alert() 関数に代わるものであり、Chrome と Safari のクロスオリジン iframe ではサポートされていません。ネイティブのアラート関数とは異なり、LightningAlert.open() はページでの実行を停止せず、Promise を返します。モーダルが閉じた後で実行するコードには async/await または .then() を使用します。
Note
このサンプルコンポーネントは、スクリーンショットに表示されているアラートモーダル UI を開くボタンを作成します。通常、エラー状態によってアラートモーダルの表示がトリガされます。
1<!-- c/myApp.html -->
2<template>
3 <lightning-button onclick={handleAlertClick} label="Open Alert Modal"> </lightning-button>
4</template>アラートモーダルを開くコンポーネントの JavaScript ファイルの lightning/alert から LightningAlert をインポートします。message、theme、および label 属性を持つ LightningAlert イベントを作成し、ディスパッチします。.open() 関数は、[OK] をクリックしたときに解決する Promise を返します。
1// c/myApp.js
2import { LightningElement } from "lwc";
3import LightningAlert from "lightning/alert";
4
5export default class MyApp extends LightningElement {
6 async handleAlertClick() {
7 await LightningAlert.open({
8 message: "This is the alert message.",
9 theme: "error", // a red theme intended for error states
10 label: "Error!", // this is the header text
11 });
12 // alert modal has been closed
13 }
14}アラートモーダルの属性についての詳細は、「コンポーネントの参照」を参照してください。
関連トピック
The Japanese Summer '24 guide is now live
j