Winter'23でリリースされるlightning-flowをモーダルで呼んでみた

はじめに

Winter'23でようやく登場するlightning-flowのサンプルコードを公開します。
@shunkosaさんにこの部品のリリースやドキュメントの在り処を教えてもらいとても助かりました！
なので恩返しの意味も込めて、ご覧になられたみなさんの役に立てると幸いです。

仕様

lightning-flowはLWCから画面フローを呼び出すためのコンポーネントです。
これまでAuraではlightning:flowが用意されていたので、待望のLWC版ということですね！

lightning-flowを呼び出すと、モーダルではない状態（フォームだけ）で表示されます。
一般的に画面フローってモーダル表示される状態で使われているので、LWCから呼び出すときもモーダル表示したいですよね？
なのでlightning-flowにモーダル表示機能を加えたコンポーネントを書いてみます。

モーダル版 lightning-flow

早速ですがコードです。モーダルはHeaderもFooterも非表示にしています。

screenFlowModal.html

<template>
    <template if:true={showModal}>
        <section
            role="dialog"
            tabindex="-1"
            aria-modal="true"
            aria-describedby="modal-content-id-1"
            class="slds-modal slds-fade-in-open"
        >
            <div class="slds-modal__container">
                <lightning-button-icon
                    class="slds-modal__close"
                    title="Close"
                    icon-name="utility:close"
                    icon-class="slds-button_icon-inverse"
                    onclick={handleDialogClose}
                    ><label>close</label>
                </lightning-button-icon>
                <div class="slds-modal__content slds-var-p-around_xx-small slds-modal__content_headless" id="modal-content-id-1">
                    <lightning-flow
                        flow-finish-behavior={flowFinishBehavior}
                        flow-interview-id={flowInterviewId}
                        onstatuschange={handleStatusChange}
                    ></lightning-flow>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

screenFlowModal.js

import { LightningElement, api } from 'lwc';

export default class ScreenFlowModal extends LightningElement {
    showModal = false;

    @api flowApiName;
    @api flowFinishBehavior = "NONE";
    @api flowInputVariables;
    @api flowInterviewId;

    @api show() {
        this.showModal = true;
    }

    @api hide() {
        this.showModal = false;
    }

    renderedCallback() {
        if (this.showModal) {
	    // モーダル表示されたタイミングでFlowを起動する
            const flow = this.template.querySelector('lightning-flow');
            flow.startFlow(this.flowApiName, this.flowInputVariables);
        }
    }

    handleStatusChange(event) {
        const statusChange = new CustomEvent('onstatuschange', { detail: event.detail });
        this.dispatchEvent(statusChange);

        if (event.detail.tatus === "FINISHED") {
            this.hide();
        }
    }

    handleDialogClose() {
        this.hide();
    }
}

モーダル版 lightning-flowを呼び出す

ボタンをクリックしたら画面フローが立ち上がるようにしています。
画面フローにレコードIdを渡す風にinputVariablesを定義しています。

screenFlowModalSample.html

<template>
    <lightning-button variant="brand" label="画面フロー起動" onclick={handleClick}></lightning-button>
    <c-screen-flow-modal
        flow-finish-behavior={finishBehavior}
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
    ></c-screen-flow-modal>
</template>

screenFlowModalSample.js

import { LightningElement } from 'lwc';

export default class ScreenFlowModalSample extends LightningElement {
    apiName = '{画面フローのAPI名}';
    finishBehavior = 'NONE';
    inputVariables = [
        {
            name : 'recordId',
            type : 'String',
            value : '001B000001Qht09IAB'
        }
    ];

    handleClick() {
        const modal = this.template.querySelector('c-screen-flow-modal');
        modal.show();
    }
}

最後に

データ表示はLWCでこだわって作り、簡易なデータ登録は画面フローにしてしまえば工数も減らすことができるので、今回のようなコンポーネントが役立つ場面も多いハズ！

テストはしてないので利用にあたってはテスト実施＆自己責任にてお願いします。

参考

lightning-flowの仕様 ⇢ 記事公開時点ではリリースされておらず、開発者ガイドの右上のLink to your orgで56.0の組織につなげば参照可能。