画面クイックアクションの作成

画面クイックアクションはモーダルウィンドウに表示されます。独自のマークアップを提供するか、lightning-quick-action-panel コンポーネントを使用して、Lightning Design System に基づく一貫したユーザーインターフェースを維持します。

コンポーネントを画面クイックアクションとして使用できるようにするには、対象を設定します。「クイックアクション用のコンポーネントの設定」を参照してください。

レコードページの他の Lightning Web コンポーネントとは異なり、LWC クイックアクションは connectedCallback()recordId を渡しません。recordId にアクセスする必要がある場合は、コードに recordId の値を設定します。

画面クイックアクションではモーダルウィンドウで Lightning Web コンポーネントが開きます。たとえば [キャンセル] ボタンを作成する目的でプログラムでモーダルウィンドウを閉じるには、カスタムイベント CloseActionScreenEvent をディスパッチする UI を作成します。lightning/actions モジュールからイベントをインポートします。

次のセクションには、完全なコードサンプルが含まれています。

カスタムフッターボタンを使用して画面クイックアクションを作成した場合、[X] ボタンを押してもモーダルが閉じるだけで、閉じるときに追加のロジックを実行するためのフックはありません。画面のクイックアクションに [キャンセル] で実行されるロジックがある場合、そのロジックはパネルを閉じるときにバイパスされます。

一貫性のある Salesforce UI を提供するには、Lightning Web コンポーネントを lightning-quick-action-panel コンポーネントでラップします。これにより、Salesforce Lightning Design System でモーダルブループリントを使用してヘッダー、本文、フッターの一貫性が実現されます。

モーダル本文を作成する方法の 1 つは、lightning-input-field コンポーネントによって項目値が入力された lightning-record-edit-form コンポーネントを使用する方法です。キャンセルボタンと送信ボタンは lightning-record-edit-form コンポーネント内でネストする必要があるため、この方法では、フッタースロットは必要ありません。

次の例では、フッターを使用せずに lightning-record-edit-form の名前項目と電話項目に入力するフォームを作成します。**「Edit Fields Action (項目アクションを編集)」**というテキストが含まれるヘッダーを含めてモーダルウィンドウを表示します。

ユーザーが送信ボタンをクリックすると、handleSuccess イベントハンドラーがコールされます。このハンドラーによって、CloseActionScreenEvent 関数を使用してモーダルウィンドウが閉じられます。

lightning-input コンポーネントと lightning-button コンポーネントを使用してモーダル本文でフォームを作成できます。この方法では、lightning-quick-action-panel コンポーネントのフッタースロットを使用してボタンを含めます。

次の例では、前の例と同じように取引先責任者レコードでクイックアクション用のフォームを作成し、レコードフォームコンポーネントを使用しないため、フッターのボタンを使用します。この項目には、getRecord ワイヤーアダプターを使用して内部値が表示されます。

[姓] 項目が空白の場合、[保存] ボタンは無効になります。[保存] ボタンをクリックするとモーダルウィンドウが閉じ、正常に保存された場合はトーストが表示されます。レコードの変更内容を保存するには、updateRecord(recordInput, clientOptions) をコールします。

標準の LWC 機能を使用して、ナビゲーションサービスからのページ参照、レコード ID、現在のレコードのオブジェクト API 参照名を含めて、現在のページに関する情報を取得できます。

ページ参照を返すには、CurrentPageReferencelightning/navigation からインポートします。「ページ、レコード、リストへの移動」を参照してください。

レコード ID およびオブジェクト API 参照名を取得するには、recordIdobjectApiName をプロパティとして公開します。「コンポーネントでのレコードコンテキストの認識」「コンポーネントでのオブジェクトコンテキストの認識」を参照してください。

次の例では、レコード ID および現在のレコードのオブジェクト API 参照名を表示します。また、現在のページとその状態を記述する現在のページ参照も返します。

関連トピック