LWCに画面フローを組み込んでみる

Last updated at 2022-12-19Posted at 2022-12-19

はじめに

今までAuraに画面フローを組み込むことが可能でしたが、Winter '23でLWCでも画面フローを組み込むことが可能になったみたいなので試してみようと思います。

何ができるようになるの？

LWCで画面フローを組み込むことで、LWCから外部データをAPIで取ってきて画面フローにデータを渡せる
LWCで画面フローを組み込むことで、Salesforceの入力画面開発工数が軽くなる！
LWCでは表示を、画面フローでは入力から登録までをと分担して開発することもできるようになります。

コードは、flow-api-nameに画面フローのAPI参照名を
flow-input-variablesに渡すデータを
onstatuschangeは設定した関数に画面フローの現在の状態を返します。

<template>
    <lightning-flow
        flow-api-name='Survey_customers'
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
    >
    </lightning-flow>
</template>

簡易的な画面フローの準備

LWCからの値を受け取る変数
LWCに値を渡す変数&値のセット
表示するエリア
画面要素

のみを設置した簡易的なものを作成しました。

LWCから値を受け取け取ってLWCに返すので、入力・出力で使用可能にチェックを入れています。

LWCの作成

lwcFlowTest.html

<template>
  <lightning-flow
      flow-api-name='ScreenFlowTest'
      flow-input-variables={inputVariables}
      onstatuschange={handleStatusChange}
  >
  </lightning-flow>
</template>

lwcFlowTest.js

import { LightningElement } from 'lwc';

export default class LwcFlowTest extends LightningElement {
  // RESTART 終了後再開
  // NONE そのまま終了
  finishBehavior = 'NONE';
  
  // フローに渡す値
  get inputVariables() {
    return [
      {
        name : 'inputTest', // フローの変数 API参照名
        type : 'String', // フローの変数型
        value : 'テストデータ' // 値
      }
    ];
  }

  handleStatusChange(event) {
    console.log(event.detail)
    console.log(event.detail.status)
    if (event.detail.status === 'FINISHED') {
      // set behavior after a finished flow interview
    }
  }
}

レコードページにテスト的に埋め込むので、<target>lightning__RecordPage</target>を追加しています。

lwcFlowTest.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>