Salesforce LWCでリダイレクトコンポーネントを作ってみた

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の13日目の記事です。12日後に立派なSalesforceエンジニアになるために今日からはLightning Web Component (LWC)でいくつか実際に簡単なコンポーネントを作ってみたいと思います。

何を作る？

画面フロー内でリダイレクト処理を行うためのコンポーネントを作る。

画面フローを使ってレコードの登録画面を作り、入力された値を保存することができるが、保存後に今保存されたレコードの詳細ページに遷移させるといった処理は標準機能では行うことができない。
そこで今回画面フローでリダイレクトするためのコンポーネントを作って上記のような処理を実現する。

完成したコンポーネントのイメージ

作り方

まずリダイレクトする先の指定については画像右側のように値を渡して指定できるようにする。これはxmlでpropertyを指定して、値を受けるjs側は @api デコレータを使えば良い。また今回はフロー画面で利用するコンポーネントなので同じくxml内で targets　は　lightning__FlowScreenを指定してやれば良い。

redirect.js-meta.xml

    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="targetObject" type="String" label="オブジェクト名" role="inputOnly" required="true" />
            <property name="recordId" type="String" label="レコードID" role="inputOnly" required="true" />
        </targetConfig>
    </targetConfigs>

redirect.js

@api recordId; // これで入力されたrecordIdとtargetObjectをとってこれる
@api targetObject;

LWCでのリダイレクトはナビゲーションサービス lightning/navigationを使えば良いのでjsの中にimport。

redirect.js

import { NavigationMixin } from 'lightning/navigation';

このコンポーネントがドキュメントに挿入されたときに画面が遷移すれば良いのでconnectedCallback内に処理を書いていく。
ナビゲーションサービスを使った遷移の仕方についてはこちらに詳しく書かれている。ページ遷移の実装方法はいくつかあるのでまた別記事でまとめようと思う。

redirect.js

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

まとめ

redirect.js

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Redirect extends NavigationMixin(LightningElement) {
    @api
    recordId;
    @api
    targetObject;

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

redirect.html

<!-- 今回表示するものはないのでこのファイルは空でOK -->

redirect.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>リダイレクト</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="targetObject" type="String" label="オブジェクト名" role="inputOnly" required="true" />
            <property name="recordId" type="String" label="レコードID" role="inputOnly" required="true" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

あとはこれっで作ったコンポーネントを画面フローに入れると、フローが呼び出されてこのコンポーネントが表示されるタイミングで指定のオブジェクトのレコード詳細ページに遷移できるようになる。

最後に

今回は今まで学んできたLWCの知識を使って実際にコンポーネントを作ってみました。
とはいえ今回は処理の部分だけで表示部分がなかったのでLightningDesignSystemとかにはあまり触れられなかったため、明日はまた別のパターンでLWCコンポーネントを作ってみようと思います！