SFDC：Lightning Web Componentのモーダル機能開発を試してみました

初期表示

ボタンクリックしてモーダル表示

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;
});