[設定] でのコンポーネントの表示
売上予測ページのコンポーネントの作成
エクスペリエンスビルダーサイト
ユーティリティバー
Outlook および Gmail
スタンドアロンアプリケーション
Visualforce ページ
フォーム要素
ファイルを開く
アラートモーダル
確認モーダル
プロンプトモーダル
トースト通知
モバイルデバイス機能の使用
CRM Analytics ダッシュボード
確認モーダルを使用して、続行する前にユーザに応答を要求します。Lightning Experience に確認モーダルを表示するには、lightning/confirm モジュールから LightningConfirm をインポートし、目的の属性を使用して LightningConfirm.open() をコールします。
この確認モーダルは、ネイティブの window.confirm() 関数に代わるものであり、Chrome と Safari のクロスオリジン iframe ではサポートされていません。ネイティブの確認関数とは異なり、LightningConfirm.open() はページでの実行を停止せず、Promise を返します。モーダルが閉じた後で実行するコードには async/await または .then() を使用します。
Note

このサンプルコンポーネントは、スクリーンショットに表示されている確認モーダル UI を開くボタンを作成します。
1<!-- c/myApp.html -->
2<template>
3 <lightning-button onclick={handleConfirmClick} label="Open Confirm Modal"> </lightning-button>
4</template>確認モーダルを開くコンポーネントの JavaScript ファイルの lightning/confirm から LightningConfirm をインポートします。message、variant、および label 属性を持つ LightningConfirm イベントを作成し、ディスパッチします。.open() 関数は、[OK] をクリックしたときには true に解決し、[キャンセル] をクリックしたときには false に解決する Promise を返します。
1// c/myApp.js
2import { LightningElement } from "lwc";
3import LightningConfirm from "lightning/confirm";
4
5export default class MyApp extends LightningElement {
6 async handleConfirmClick() {
7 const result = await LightningConfirm.open({
8 message: "This is the confirmation message.",
9 variant: "headerless",
10 label: "This is the aria-label value",
11 // label value isn't visible in the headerless variant
12 });
13 // confirm modal has been closed
14 }
15}確認モーダルの属性についての詳細は、「コンポーネントの参照」を参照してください。
関連トピック
The Japanese Summer '24 guide is now live