（プレリリース）Spring '24 画面フロー：繰り返し（ベータ）コンポーネントで取引先責任者を複数登録してみる

# はじめに


Spring ’24のリリースノートが公開されましたね！リリースノートの中に画面フローの新コンポーネント"繰り返し"が追加されたようなので検証してみます。

https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_builder_add_a_reusable_set_of_components_to_a_screen_with_the_new_repeater_component.htm&release=248&type=5

:::note warn
2023年12月現在Spring '24は、プレリリース組織での提供となってます。
:::

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

"繰り返し"コンポーネント内に設置したテキストコンポーネントを
`Add`で追加、`Remove`で削除できるようになります。

![繰り返し_テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/2cc58338-3cc7-61b4-0a54-12024edd5124.png)

![スクリーンショット 2023-12-23 10.30.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/b9c33edc-fc00-7c0a-45c9-95015749785e.png)

`Add`で追加したテキストコンポーネントの数分
コレクション変数の要素ができあがり
ループで利用できます。

![スクリーンショット 2023-12-23 10.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7eba518a-4992-95d2-1df2-4649e991d9ba.png)

# 今回作るもの

複数レコードを作りたくなるものといえば
- 取引先責任者
- 商談
- TODO

あたりかなと思います。
今回はその中でも取引先責任者を複数レコード登録する画面を作ってみます。

# 画面フローの作成

## 1. recordIdの作成

今回は取引先の画面内で複数の取引先責任者を作成する画面フローを作成します。
まず最初に`recordId`という変数を`入力で使用可能`状態で作成します。

作成しておくことで、取引先画面内に設置して動かした時にフロー内で取引先IDを取り扱うことができます。

https://help.salesforce.com/s/articleView?id=sf.omnichannel_create_recordid.htm&type=5



![スクリーンショット 2023-12-23 10.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/53678f4c-ebd0-3903-c649-d5c8a4190b4a.png)

## 2. 繰り返しコンポーネントの配置

![繰り返し_テスト-V1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/d56fafd1-07d4-9708-43f2-b2abe0f21a51.png)

## 3. 繰り返したい入力要素を配置

今回は、姓・名で登録させるため
`Drag components to include in the repeater her...`の部分に
テキスト要素を二つ設置します。

![繰り返し_テスト-V1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/c52b3504-8c58-caf7-75b9-fe728f6dd388.png)

|表示ラベル|API参照名|オプション|
|---|---|---|
|姓|LastName|必須|
|名|FirstName||

![スクリーンショット 2023-12-23 10.45.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/2616fa01-3124-92b7-76cb-2c89541c234b.png)

## 4. 入力値を割り当てるための変数を作成

リピーターコンポーネントはコレクション変数扱いになるので
取引先責任者レコードを作成する際にループを利用することになります。
ガバナ制限対策として取引先責任者の`レコード変数`と`レコードコレクション変数`の二つを用意します。

![スクリーンショット 2023-12-23 10.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7eba518a-4992-95d2-1df2-4649e991d9ba.png)

![スクリーンショット 2023-12-23 11.00.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/54b81930-2168-f324-d501-bbcf8bd84b72.png)

## 5. ループ内で割り当て


ループ要素を設置し、入力された複数のデータを割り当てていきます。

![スクリーンショット 2023-12-23 11.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cd3bf582-71bc-8db3-d475-9621254a3b38.png)

取引先IDにrecordIdを割り当てて
作成する取引先責任者を取引先に紐づけた状態で作成します。

![スクリーンショット 2023-12-23 11.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/82297b65-fb01-5469-4e48-d808e356affc.png)


![スクリーンショット 2023-12-23 11.05.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/977dcac1-40c1-be03-d135-1d5a148a432e.png)

## 6. レコードを作成

![スクリーンショット 2023-12-23 11.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/bed82d47-372d-8b69-fbda-d4db0f0d076a.png)

## 7. フローの全体

![スクリーンショット 2023-12-23 11.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/e5863cbe-fcbe-717a-0d9e-06164f915914.png)


# 画面フローを取引先画面に設置

ページ編集で`フロー`コンポーネントを設置、作成したフローを選択。
recordIdの`レコードIDをこの変数に渡す`にチェックを入れます。

![取引先-レコードページ-Lightning-アプリケーションビルダー (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/d5b6a525-488d-1e64-c686-4d52574aed22.png)

# 動かしてみる

![スクリーンショット 2023-12-23 11.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/5ca024bc-b977-f972-9e0d-654be5c0e9ef.png)

`Add`をすると下に画面が長くなっていくので配置場所が少し難しいですね.

![スクリーンショット 2023-12-23 11.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/83d79282-7348-7074-1d93-77be8a58b8ac.png)

取引先に紐づいて複数の責任者を一気に作成できることができました。

![Edge-Communications-取引先-Salesforce.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/fe9d6b2c-4704-5608-6525-794a2871880b.png)

# "繰り返し"に設置できるコンポーネントを確認する

Spring '24（プレリリース）段階では以下のコンポーネントが設置できました。
※LWCで作成したカスタムコンポーネントは設置できませんでした。

- チェックボックス
- チェックボックスグループ
- テキスト
- パスワード
- ラジオボタン
- ロングテキストエリア
- 数値
- 選択リスト
- 通過
- 日時
- 日付
- 複数選択リスト
- 表示テキスト

![スクリーンショット 2023-12-23 11.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7c644ace-2243-1313-88a5-419ccb2cbb9a.png)

![スクリーンショット 2023-12-23 11.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/87a7218f-8643-7484-780c-19033b71afc6.png)

# 最後に

Spring '24で追加される"繰り返し"コンポーネント楽しみですね。
今回は`テキスト`を繰り返して複数の取引先責任者を作成しました。
しかし、UIがどんどん下に伸びていくことと繰り返し要素を折りたたむみたいなことができないことを考えるとテキスト入力は少し使いにくいと感じました。
`チェックボックス`や`選択リスト`も設置できるので入力を減らしていく方向で作るとかなり使いやすい画面フローが作れると思いました。

まだベータ機能ということで
設置できるコンポーネントの対応がもっとたくさん増えることを期待しています。