はじめに

今まで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>

LWCの動作確認

LWCの配置

動かす

初期値は渡せているか？

渡せている

このときのonstatuschangeは？

フローが開始しているので、STARTEDになってますね
出力変数は画面フロー終了時に値を変更するようにしていたのでまだnullの状態です。

画面フローから値が返ってくるか?

問題なく終了としてFINISHEDが返ってきて、outputVariablesの中にフローの中で終了時にセットするようにした値が入っている

さいごに

LWCで画面フローを組み込んでみました！
ただ、値を画面フローに渡せるだけかなと思ってましたが
フローの中の出力変数が受け取れるんですね！便利！！
画面フローの状態ごとにonstatuschangeが発火してその状態ごとの出力変数が取得できるのも素敵だなと思いました。

画面フローとLWCでリッチな画面を作れそうな気がします。

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