Lightning Web コンポーネントのモーダル機能開発を試してみました。Youtube動画の「codeLive: How to Build Modals With Lightning Web Components」のサンプルコードを動かしてみる感じでやってみました。
codeLive: How to Build Modals With Lightning Web Components - YouTube
機能の動作イメージ
動作イメージはこんな感じです。
初期表示
ボタンクリックしてモーダル表示
Color Pickerの操作
Selectボタンクリック時の値渡し
モーダル側のコード
メモ
JSファイル内で次の宣言を行うことでモーダルの基本的な処理が適用されてそれに対して拡張できる感じ。
import LightningModal from 'lightning/modal';
extends LightningModal
呼び出し元画面のコード
メモ
呼び出し元画面側のJSファイルでは次のようにモーダル側のLWCをインポートすることで変数アクセスや処理呼び出しが可能になります。
import myColorPickerModal from 'c/myModalColorPicker';
考え方は次のとおり。
import <任意の変数名> from 'c/<モーダル側のLWC名>';
また、11か月前に公開の動画内では await処理をつかってモーダルのopen処理を呼び出していましたが、最新版ではその書き方はできませんでした。戻り値は次のように.thenを宣言して行います。
}).then((result) => {
this.selectedColor = result;
});
参考サイト
動画の内容のテキスト版はこちら。
