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

# はじめに

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

https://admin.salesforce.com/blog/2022/learn-moar-in-winter-23-with-flow-enhancements?utm_source=trailhead&utm_medium=trailmix&utm_campaign=learn_moar_winter_23&_ga=2.168438753.190521205.1667719829-1546668006.1603647587

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

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

コードは、`flow-api-name`に画面フローのAPI参照名を
`flow-input-variables`に渡すデータを
`onstatuschange`は設定した関数に画面フローの現在の状態を返します。
```html
<template>
    <lightning-flow
        flow-api-name='Survey_customers'
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
    >
    </lightning-flow>
</template>
```

https://developer.salesforce.com/docs/component-library/bundle/lightning-flow

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

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

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

![](https://user-images.githubusercontent.com/39574826/208263439-4c4230a2-44e9-4d94-aa2f-5fdee783aabf.png)


![](https://user-images.githubusercontent.com/39574826/208257141-40d14d7c-a7ed-472d-86da-08980211552a.png)

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

![](https://user-images.githubusercontent.com/39574826/208257146-ecde5e06-3c39-4c61-9bb0-c9576563fb36.png)

![](https://user-images.githubusercontent.com/39574826/208263881-b1cc419c-64a6-4daa-8f60-6b3a84227e79.png)


![](https://user-images.githubusercontent.com/39574826/208263842-eb3b8d05-f825-4c09-850e-c466c0cf0fc3.png)

![](https://user-images.githubusercontent.com/39574826/208257306-091c54d4-49d5-4c28-bb28-8259a9b4023f.png)

# LWCの作成

```html: lwcFlowTest.html
<template>
  <lightning-flow
      flow-api-name='ScreenFlowTest'
      flow-input-variables={inputVariables}
      onstatuschange={handleStatusChange}
  >
  </lightning-flow>
</template>
```

```js: 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>`を追加しています。

```xml: 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の配置


![取引先 レコードページ - Lightning アプリケーションビルダー (2)](https://user-images.githubusercontent.com/39574826/208263238-1cbc74b7-54ff-4994-93f0-a5a89991e722.png)

## 動かす

### 初期値は渡せているか？

渡せている

![](https://user-images.githubusercontent.com/39574826/208263538-77e215c1-043b-46f4-acc8-df7642a375af.png)

#### このときのonstatuschangeは？

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

![](https://user-images.githubusercontent.com/39574826/208263938-1f2ffc9f-5128-4783-9685-639d18c2f30a.png)

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

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

![](https://user-images.githubusercontent.com/39574826/208263989-e2e89cb6-6093-48fb-9083-8673ab558427.png)

# さいごに

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

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

# 参考にさせていただいた記事

https://zenn.dev/skussun1/articles/a0900446b10f29

https://developer.salesforce.com/docs/component-library/bundle/lightning-flow