Lightning Web Components でクイックアクションを作成する

Salesforce の Summer '21 メジャーバージョンアップで、[Lightning Web Components (LWC) を使用してカスタムクイックアクションが作成できる](https://help.salesforce.com/articleView?id=release-notes.rn_lwc_quick_actions.htm&release=232&type=5)ようになりました。この記事では、LWC を使用したクイックアクションの基本的な作成方法や注意事項について解説します。

## 作成方法
以下のように `js-meta.xml` ファイルを作成します。`actionType` を `ScreenAction` にするとモーダル表示、`Action` にすると Headless (クイックアクション呼び出し時にモーダルを表示せずバックグラウンドで処理を実行する) のアクションを作成することができます。

```exampleQuickAction.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordAction</target>
    </targets>
     <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>ScreenAction</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>
```

Headless アクションの場合は、HTML ファイルは作成せず、代わりに JavaScript ファイルにパブリックな `invoke` 関数を作成します。この関数がアクション実行時に呼び出されます。

```exampleHeadlessAction.js
import { LightningElement, api } from 'lwc';

export default class ExampleHeadlessAction extends LightningElement {
  @api invoke() {
    // Do something
  }
}
```

### クイックアクションの設定

コンポーネントをデプロイ後、クイックアクションの種別で `Lightning Web コンポーネント` を選択し、デプロイしたコンポーネントを選択します。ページレイアウトに保存したクイックアクションを配置してください。なお `lightning__RecordAction` という名前からも分かる通り、グローバルアクションには対応していません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/75da892e-8c69-ec4e-0159-90f0ac3d24a2.png" width="400">

### ScreenAction でモーダルのヘッダー・フッターをカスタマイズする
ScreenAction で [SLDS に従ったモーダル](https://www.lightningdesignsystem.com/components/modals/) を定義するには、基本コンポーネント `<lightning-quick-action-panel>` を使用することができます。このコンポーネントには `header` および `footer` 属性が用意されているため、これを用いてヘッダーやフッターに任意のコンテンツを配置することができます。[Aura コンポーネントの場合](https://deveoper.salesforce.com/docs/component-library/bundle/force:lightningQuickAction/documentation)はこの部分をカスタマイズするには CSS を上書きするなどつらい対応が必要でしたが、便利になりました。

```exampleQuickAction.html
<template>
  <lightning-quick-action-panel header="テスト">
    ここにモーダルコンテンツを記載する
    <div slot="footer">
      <lightning-button variant="neutral" label="ボタン1"></lightning-button>
      <lightning-button variant="brand" label="ボタン2" class="slds-m-left_x-small"></lightning-button>
    </div>
  </lightning-quick-action-panel>
</template>
```

![Header/Footerを指定したクイックアクションの例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/bcb9ab89-65d1-0f0f-e47c-dcd872ad9397.png)

### コンテキストを取得する
Lightning レコードページ内に配置するカスタムコンポーネントと同様に、パブリックな `recordId` 変数および `objectApiName` 変数が利用できます。

```exampleQuickActionWithContextVariables.js
import { LightningElement, api } from 'lwc';

export default class HelloQuickAction extends LightningElement {
  @api recordId; // e.g., 0010I00002Y9U6YQAV
  @api objectApiName; // e.g., Account
}
```

### モーダルウィンドウを閉じる
以下のイベントを用いるとプログラムでモーダルを閉じることができます。

```javascript
import { CloseActionScreenEvent } from 'lightning/actions';
// 中略
close() {
  this.dispatchEvent(new CloseActionScreenEvent());
}
```

## 既知の不具合・制限
以下は Summer '21 リリース直後に検知した事象です。将来のアップデートにより解消される可能性があります。

### 一度作成した LWC クイックアクションの actionType は変更できない
一度コンポーネントをデプロイした後に、`targetConfig` の `actionType` を `Action` から `ScreenAction` に、またはその逆に変更した場合、コンポーネントはデプロイできません。

```
=== Deploy Errors
PROJECT PATH                                                     ERRORS                                    
───────────────────────────────────────────────────────────────  ──────────────────────────────────────────
force-app/main/default/lwc/helloQuickAction/helloQuickAction.js  既存の Lightning Web コンポーネントアクションの種別は変更できません
```

### recordId と objectApiName がコンポーネント初期化時に取得できない
`connectedCallback()` 内では `recordId` および `objectApiName` が `undefined` になってしまいます。初期化時にレコードにアクセスする必要がある場合は `@wire` で代替すると良いでしょう。Screen Action の場合は URL から取得する方法もあります。

[参考 - Spring 21 LWC Quick Action Release (salesforce.stackexchange.com)]( https://salesforce.stackexchange.com/questions/343582/spring-21-lwc-quick-action-release)

### モバイル・エクスペリエンスサイト (コミュニティ) で使用できない

ページレイアウトに配置した LWC クイックアクションは標準の Salesforce モバイルアプリケーションや、エクスペリエンスサイトの標準のレコード詳細ページには表示されません。

## 参考リンク
* [RFC - Lightning Quick Actions API (lightning/actions)](https://rfcs.lwc.dev/rfcs/lbc-api/0000-lwc-custom-quick-actions-api)