(LWC版)フローでレコードをリダイレクトしてメッセージ表示をさせてみた

## 前書き
以前にauraを使用して「[フローでレコードをリダイレクトしてメッセージ表示をさせてみた](https://qiita.com/DEKA_PIYO/items/85edf7804f15d056d738)」という記事を書きましたが、LWCを使用して同じことができるようにしてみました。

## 各種コード
```xml:redirectUrlAndShowToastEvent.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="isRedirect" type="Boolean" required="true" label="リダイレクトするか" />
            <property name="object" type="String" label="オブジェクト" role="inputOnly" required="true" description="オブジェクトのAPI参照名を入力"></property>
            <property name="recordId" type="String" label="レコードId" role="inputOnly" required="true" description="レコードIdを入力" ></property>
            <property name="variant" type="String" label="トースト種類" role="inputOnly" required="true" description="success、warning、error、infoのいずれかを入力"/>
            <property name="title" type="String" label="トーストタイトル" role="inputOnly" required="true" />
            <property name="message" type="String" label="トーストメッセージ" role="inputOnly" description="タイトルのほかに必要に応じて入力" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
```

通常このコンポーネントはレコードの作成・編集後の最後に使用を想定しているものです。ポイントはisRedirectでリダイレクトの有無を設定して、遷移せずにトースト（メッセージ）を出すこともできるように設定値を出しております。その他、トーストを表示させるために必要な設定を作っています。

参考：[XML 設定ファイルの要素](https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/reference-configuration-tags.html)

以下はフロー上での見え方になります。
![redirectUrlAndShowToastEvent1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510376/82851bfe-6ac5-457b-9800-e4ad176e6269.png)

画面の通り、このコンポーネントは画面フロー上で使用するものになります。現状lwcではアクションとしてコンポーネントを設定することができません。

なおideaexchangeで要望が上がっています。

[Enable Local Actions in Flow using Lightning Web Components](https://ideas.salesforce.com/s/idea/a0B8W00000QN8AaUAL/enable-local-actions-in-flow-using-lightning-web-components)


```javascript:redirectUrlAndShowToastEvent.js
import { LightningElement,api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { FlowNavigationFinishEvent } from 'lightning/flowSupport';

export default class RedirectUrlAndShowToastEvent extends NavigationMixin(LightningElement) {
    @api isRedirect;
    @api object;
    @api recordId;
    @api variant;
    @api title;
    @api message;

    connectedCallback(){
        if(this.isRedirect){
            this.navigation(this.recordId, this.object);
        }
        this.showToastEvent(this.variant, this.title, this.message);
    }

    navigation(recordId, object){
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recordId,
                objectApiName: object,
                actionName: "view" 
            }
        })
    }

    showToastEvent(variant, title, message){
        const attributeFinishEvent = new FlowNavigationFinishEvent()
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
          });
        this.dispatchEvent(attributeFinishEvent);
        this.dispatchEvent(evt);
    }
}
```
connectedCallbackは最初に自動的に処理をさせたい場合に記述します。

参考：[connectedCallback() および disconnectedCallback()](https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/create-lifecycle-hooks-dom.html)

リダイレクトにかかわる処理は NavigationMixin をimportして使用します。
xml側で定義したrecordId, objectの値はフロー側で入力したものを使用してどのオブジェクトのどのレコードに遷移するかを設定できます。
参考：[基本的なナビゲーション](https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/use-navigate-basic.html)

トーストの表示は ShowToastEvent をimportして使用します。
xml側で定義したvariant（成功トースト、エラートースト等の設定）、title、message（任意）の値はフロー側で入力したものを使用して、どの種類のトーストを出すか、トーストのタイトル、メッセージを設定できます。

参考：[トースト通知](https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/use-toast.html)

showToastEvent内にFlowNavigationFinishEventを使用していますがこれはリダイレクトしないとき、このイベントを使用しないと画面フローが残った状態でトーストが表示されるので、不自然な画面が残らないように記述しています。
参考：[Flow Support](https://developer.salesforce.com/docs/component-library/bundle/lightning-flow-support/documentation)

## 使用イメージ
フローの詳細は割愛しますが、取引先から商談を作成するフローで商談作成後にそのレコードにリダイレクトします。

![リダイレクトテスト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510376/6f529134-3c99-4e1c-b5a2-1de75648028b.gif)