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

前書き

以前にauraを使用して「フローでレコードをリダイレクトしてメッセージ表示をさせてみた」という記事を書きましたが、LWCを使用して同じことができるようにしてみました。

各種コード

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 設定ファイルの要素

以下はフロー上での見え方になります。

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

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

Enable Local Actions in Flow using Lightning Web Components

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()

リダイレクトにかかわる処理は NavigationMixin をimportして使用します。
xml側で定義したrecordId, objectの値はフロー側で入力したものを使用してどのオブジェクトのどのレコードに遷移するかを設定できます。
参考：基本的なナビゲーション

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

参考：トースト通知

showToastEvent内にFlowNavigationFinishEventを使用していますがこれはリダイレクトしないとき、このイベントを使用しないと画面フローが残った状態でトーストが表示されるので、不自然な画面が残らないように記述しています。
参考：Flow Support

使用イメージ

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