ヘッドレスクイックアクションの作成

ヘッドレスクイックアクションでは、Lightning Web コンポーネントでカスタムコードを実行します。画面アクションとは異なり、ヘッドレスアクションではモーダルウィンドウは開きません。

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

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

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

invoke() の実装

Lightning Web コンポーネントで、invoke() を常にヘッドレスクイックアクションの公開メソッドとして公開します。invoke() メソッドは、クイックアクションがトリガされるたびに実行されます。

1import { LightningElement, api } from "lwc";
2
3export default class HeadlessSimple extends LightningElement {
4  @api invoke() {
5    console.log("Hi, I'm an action.");
6  }
7}

Lightning Web コンポーネントの空のテンプレートを作成します。

1<template> </template>

長時間実行されるアクションでクイックアクションが並列で複数回実行されないようにするには、内部 Boolean フラグを追加します。

invoke() の戻り値の型は void です。Promise を返すとメソッドが非同期になりますが、返される Promise は無視されます。

次のコードでは、Boolean フラグを使用して二重実行をブロックし、Promise を使用して sleep が完了するのを待機します。戻り値の型が void の場合でも、コードは非同期で実行されます。

1import { LightningElement, api } from "lwc";
2
3export default class HeadlessAsync extends LightningElement {
4  isExecuting = false;
5
6  @api async invoke() {
7    if (this.isExecuting) {
8      return;
9    }
10
11    this.isExecuting = true;
12    await this.sleep(2000);
13    this.isExecuting = false;
14  }
15
16  sleep(ms) {
17    return new Promise((resolve) => setTimeout(resolve, ms));
18  }
19}

移動

Lightning Experience で別のページ、レコード、またはリストに移動するには、ナビゲーションサービスを使用します。

次の例では、取引先責任者ホームページに移動します。

1import { LightningElement, api } from "lwc";
2import { NavigationMixin } from "lightning/navigation";
3
4export default class navigateToRecordAction extends NavigationMixin(LightningElement) {
5  @api invoke() {
6    this[NavigationMixin.Navigate]({
7      type: "standard__objectPage",
8      attributes: {
9        objectApiName: "Contact",
10        actionName: "home",
11      },
12    });
13  }
14}

「ページ、レコード、リストへの移動」を参照してください。

イベントのディスパッチ

クイックアクションからカスタムイベントをディスパッチできます。次の例では、lightning/platformShowToastEvent モジュールによって指定されたイベントを使用して、2 つのトーストを順次ディスパッチします。

1import { LightningElement, api } from "lwc";
2import { ShowToastEvent } from "lightning/platformShowToastEvent";
3
4export default class DispatchEventAction extends LightningElement {
5  @api async invoke() {
6    let event = new ShowToastEvent({
7      title: "I am a headless action!",
8      message: "Hi there! Starting...",
9    });
10    this.dispatchEvent(event);
11
12    await this.sleep(2000);
13
14    event = new ShowToastEvent({
15      title: "I am a headless action!",
16      message: "All done!",
17    });
18    this.dispatchEvent(event);
19  }
20
21  sleep(ms) {
22    // eslint-disable-next-line @lwc/lwc/no-async-operation
23    return new Promise((resolve) => setTimeout(resolve, ms));
24  }
25}

「トースト通知」および「イベントを使用した通信」を参照してください。

The Japanese Summer '24 guide is now live

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