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

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

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

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

1_recordId;
2set recordId(recordId) {
3    if (recordId !== this._recordId) {
4        this._recordId = recordId;

モーダルウィンドウを開いて閉じる

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

1import { CloseActionScreenEvent } from "lightning/actions";

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

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

Note

一貫性のある UI を実現するための lightning-quick-action-panel の使用

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

1<template>
2  <lightning-quick-action-panel header="My action">
3    Here's some content for the modal body.
4
5    <div slot="footer">
6      <lightning-button variant="neutral" label="Cancel"></lightning-button>
7      <lightning-button variant="brand" label="Save" class="slds-m-left_x-small"></lightning-button>
8    </div>
9  </lightning-quick-action-panel>
10</template>

モーダル本文でのフォームの作成

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

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

1<template>
2  <lightning-quick-action-panel header="Edit Fields Action">
3    <lightning-record-edit-form
4      record-id={recordId}
5      object-api-name={objectApiName}
6      onsuccess={handleSuccess}>
7      <lightning-input-field field-name="Name"></lightning-input-field>
8      <lightning-input-field field-name="Phone"></lightning-input-field>
9      <lightning-button variant="neutral" label="Cancel"></lightning-button>
10      <lightning-button variant="brand" class="slds-m-left_x-small" label="Save" type="submit">
11      </lightning-button>
12    </lightning-record-edit-form>
13  </lightning-quick-action-panel>
14</template>

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

1import { LightningElement, api } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3import { CloseActionScreenEvent } from "lightning/actions";
4
5export default class QuickEditFormExample extends LightningElement {
6  @api recordId;
7  @api objectApiName;
8
9  handleSuccess(e) {
10    // Close the modal window and display a success toast
11    this.dispatchEvent(new CloseActionScreenEvent());
12    this.dispatchEvent(
13      new ShowToastEvent({
14        title: "Success",
15        message: "Record updated!",
16        variant: "success",
17      }),
18    );
19  }
20}

フッターのボタンを使用したカスタムフォームの作成

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

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

1<lightning-quick-action-panel header="Quick Contact Edit">
2  <template lwc:if={contact.data}>
3    <lightning-input
4      label="First Name"
5      value={firstname}
6      class="slds-m-bottom_x-small">
7    </lightning-input>
8    <lightning-input
9      label="Last Name"
10      value={lastname}
11      onchange={handleLastNameChange}
12      class="slds-m-bottom_x-small"
13      required>
14    </lightning-input>
15    <lightning-input
16      label="Phone"
17      type="tel"
18      value={phone}
19      class="slds-m-bottom_x-small">
20    </lightning-input>
21  </template>
22  <div slot="footer">
23    <lightning-button variant="neutral" label="Cancel" onclick={handleCancel}></lightning-button>
24    <lightning-button
25      variant="brand"
26      class="slds-m-left_x-small"
27      label="Save"
28      type="submit"
29      onclick={handleSubmit}
30      disabled={disabled}>
31    </lightning-button>
32  </div>
33</lightning-quick-action-panel>

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

1import { LightningElement, api, wire } from "lwc";
2import { getRecord, getFieldValue } from "lightning/uiRecordApi";
3import { updateRecord } from "lightning/uiRecordApi";
4import { CloseActionScreenEvent } from "lightning/actions";
5import { ShowToastEvent } from "lightning/platformShowToastEvent";
6import FNAME_FIELD from "@salesforce/schema/Contact.FirstName";
7import LNAME_FIELD from "@salesforce/schema/Contact.LastName";
8import PHONE_FIELD from "@salesforce/schema/Contact.Phone";
9
10const FIELDS = [FNAME_FIELD, LNAME_FIELD, PHONE_FIELD];
11
12export default class QuickEditExample extends LightningElement {
13  disabled = false;
14  @api recordId;
15  @api objectApiName;
16
17  @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
18  contact;
19
20  get firstname() {
21    return getFieldValue(this.contact.data, FNAME_FIELD);
22  }
23
24  get lastname() {
25    return getFieldValue(this.contact.data, LNAME_FIELD);
26  }
27
28  get phone() {
29    return getFieldValue(this.contact.data, PHONE_FIELD);
30  }
31
32  handleCancel(event) {
33    // Add your cancel button implementation here
34    this.dispatchEvent(new CloseActionScreenEvent());
35  }
36
37  handleLastNameChange(event) {
38    // Display field-level errors if last name field is empty.
39    if (!event.target.value) {
40      event.target.reportValidity();
41      this.disabled = true;
42    } else {
43      this.disabled = false;
44    }
45  }
46
47  handleSubmit(e) {
48    // Add your updateRecord implementation
49
50    // Close the modal window and display a success toast
51    this.dispatchEvent(new CloseActionScreenEvent());
52    this.dispatchEvent(
53      new ShowToastEvent({
54        title: "Success",
55        message: "Record updated!",
56        variant: "success",
57      }),
58    );
59  }
60}

ページに関する情報の取得

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

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

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

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

1<template>
2  <p>These two fields are auto-populated based on the record context:</p>
3  <p>RecordId: <i>{recordId}</i>, objectApiName: <i>{objectApiName}</i></p>
4  <p>{pageRefString}</p>
5</template>

1import { LightningElement, api, wire } from "lwc";
2import { CurrentPageReference } from "lightning/navigation";
3
4export default class RecordContextAction extends LightningElement {
5  @api recordId;
6  @api objectApiName;
7
8  @wire(CurrentPageReference)
9  pageRef;
10
11  get pageRefString() {
12    return JSON.stringify(this.pageRef);
13  }
14}

関連トピック

基本コンポーネントを使用したレコードの操作

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。