LWCからモーダルで画面フローを表示する

LightningModalとLightningFlowを使用して、画面フローを簡単にモーダル表示することが可能です。

モーダル

modal

<template>
  <lightning-modal-header label={title}></lightning-modal-header>
  <lightning-modal-body>
    <lightning-flow flow-api-name={flowName} flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>
    </lightning-flow>
  </lightning-modal-body>
</template>

import { api } from "lwc";
import LightningModal from "lightning/modal";

export default class FlowSampleModal extends LightningModal {
  @api title;
  @api flowName;
  @api inputVariables;

  handleStatusChange(event) {
    if (event.detail.status === "FINISHED" || event.detail.status === "FINISHED_SCREEN") {
      this.close();
    }
  }
}

使用方法

<template>
  <lightning-button
    label="画面フロー呼び出し"
    onclick={handleClick}
  ></lightning-button>
</template>

import { LightningElement, api } from "lwc";
import flowModal from "c/flowSampleModal";

export default class FlowSample extends LightningElement {
  @api recordId;

  handleClick(event) {
    flowModal.open({
      title: "サンプル",
      flowName: "ScreenFlowName",
      inputVariables: [
        {
          name: "recordId",
          type: "String",
          value: this.recordId
        }
      ]
    });
  }
}

参考

• LightningMordal | Developers
• LightningFlow | Developers