Salesforce Summer'24の画面フローに設置できるコンポーネントを確認した

画面フローの標準コンポーネントで出来ることを確認するため、Summer'24時点で使用できるコンポーネントを画面に設置し、表示や挙動を**Developer Edition**で確認しました。

## 画面に配置できる入力コンポーネント
### Action Button (Beta)
自動起動フローを呼び出すボタン。Actionで指定可能なフローが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/4756a9ca-bb84-979e-3510-ee780692b438.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/c785c67a-30ef-ce1e-0af0-ecb02f5d6cc6.png)

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

https://sf.forum.circlace.com/articles/1009533890542268416

### Slack チャンネルセレクター
Slackチャンネルを表示する選択リスト。Slack アプリケーション ID、Slack ワークスペース IDが必要です。
アプリケーションIDは、アプリケーションの所有者が https://api.slack.com/ へアクセスすると確認できるそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/e45fbc35-8a5e-a9a1-d938-3892c045cc4a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/693f0132-a32c-468f-df82-31e9002813cf.png)

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

### Slack ワークスペースセレクター
Slackワークスペースを表示する選択リスト。Slack appID（Slack アプリケーション ID）が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/bc7b17e2-7c29-c603-1e8e-9dda854d9ff9.png)

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

### URL
URL入力に特化したテキスト。
値は、デフォルトで表示するテキストを指定できます。
パターンは、正規表現での入力チェックを行えます。
```md:正規表現の例
^https?://(?:www\.)?acmewireless\.com/?.*
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/3cc51bde-0f4d-f45f-8edf-4326257ea5df.png)

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

### スライダー
スライダーを使って数値の指定ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/6cb71502-c574-97ec-6030-da9676271b83.png)

ステップサイズや値、範囲の最小値、範囲の最大値を設定することで、体温を入力するコンポーネントを作成できるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/49b7f1fc-3682-24de-d483-ec04ddd78f63.png)
![6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/600aeb58-210b-67af-9f6c-f7d6bc30dc3e.gif)

https://klever.jp/archives/6238

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

### チェックボックス
チェックボックス。デフォルト値に`{!$GlobalConstant.True}`を設定することで画面を開いた際にチェックを入れた状態にできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/1270d988-ba72-8c37-9527-6410ac4bf0bf.png)

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

### チェックボックスグループ
複数選択が可能なチェックボックス。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/8f0c7701-3c07-9724-86ce-cc1b2d604817.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/1a91aa6a-1ecd-24f1-8541-eea5c6b12c89.png)

https://regardie.dev/post-3431

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

### データテーブル
フロー内で取得したレコードをリストビューで表示。ソースコレクション、列の設定が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/c99f3042-0845-d745-ee24-a6e4e22186ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/0f81fa4c-8965-93a9-54a8-b491182c2832.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/4528d4f1-5a9f-9be9-d766-59e78e92e4cd.png)

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

https://sf.forum.circlace.com/articles/792427130288869376

https://sfdctechsite.com/2022/08/12/winter23_datatable/

### テキスト
テキスト。テキスト入力ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/942038f5-3588-5f1c-fd94-09ed5d8caeb6.png)

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

### パスワード
パスワード入力に特化したテキスト。画面フローでテキストを入力すると文字がマスクされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/ae75c452-4198-be5f-843e-eda897300e14.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/1d146a71-9d4f-d632-8de5-ce7b03b12702.png)

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

### ファイルのアップロード
ファイルアップロード。「ファイル」オブジェクトにアップロードしたファイルが設置されます。
※「メモ&添付ファイル」へアップロードするオプションは見つけられませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/95b6b9b5-39a2-2ed2-aa0d-d0d71342c8f5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/1bfec1dd-9b80-4281-0f8e-4871d8b1003e.png)

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

https://sfdctechsite.com/2024/06/01/screenflow_fileupload/

https://qiita.com/kuwayama_inf/items/21a25cf8f5e4d6718f93

### メール
メールアドレス入力に特化したテキスト。プレースホルダーテキストが設定できます。
メールアドレス以外の値を入力すると「無効な形式を入力しました」エラーが表示されます。
> メールコンポーネントでは、入力されたメールアドレスが <userinput> local-part</userinput> @<title> domain のパターンに準拠しているかどうかが検証されます。ドメインには少なくとも 1 つの期間 (.) が含まれます。たとえば、#URL1# は有効ですが、 user@example は有効ではありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/77396a19-0a8e-68fc-e221-a54e79c8f1b6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/3467f8c8-866f-4c2a-ec6d-8de4de4a2077.png)

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

### ラジオボタン
ラジオボタン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/8b0cc14b-2ff0-b27d-b2d8-2cf19f7e79f8.png)

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

### ルックアップ（参照）

https://aoitokei.blog/flow_lookup/

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

### ロングテキストエリア
複数行のテキスト。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/3c16024d-0425-ae23-cb93-d3792358b53b.png)

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

### 拡張メッセージ
※使い方が分かりませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/fefe9c62-a79c-c665-ae15-0937ec7f0746.png)

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

### 住所
住所入力に特化したテキスト。オートフィル（自動入力）機能はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/cc3bbd8c-2ce8-eede-9bb1-466536d014e1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/6e1a8af1-2351-9d6c-294b-399bcbe64adb.png)

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

オートフィル機能が必要な場合はコーディングが必要です。

https://qiita.com/shunkosa/items/6ef87d8358b0f0788f3f

https://qiita.com/tatsuro-suzuki/items/31792a712634533e80e9

### 数値（Number）
数値入力に特化したテキスト。小数点の位置で小数点以下の桁数を設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/d9fe7085-a0f7-3aac-068e-c9bef5750942.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/cce28304-f1dc-df21-fbf4-4d418da16fbf.png)

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

### 切り替え
トグルボタン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/67bc5c2f-ddc8-4caf-0472-2512071d4a43.png)

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

### 選択リスト
選択リスト。コンポーネントの種類で選択リストかラジオボタンに変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/6d97c7eb-aedf-8984-431a-8f5d8a9e1a91.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/0b20bdd4-bb01-b4a1-9117-b9cff4a7f0aa.png)

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

### 選択肢ルックアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/49d6901a-e973-becb-efc8-6b7d08da6a3c.png)

https://base.terrasky.co.jp/articles/kkthp

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

### 通貨
通貨入力に特化したテキスト。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/7585eba8-5bf8-9ea1-4d5d-f726fb684fbb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/75d27a9f-bdb3-898b-7ff4-692178531cc5.png)

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

### 通話スクリプト
> エージェントが顧客と電話で話すときに使用するスクリプトを作成します。

画面右のコピーボタンを押下すると表示されているテキストがクリップボードへコピーされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/fb932d06-3952-5041-646b-c5e0a5288bb8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/4d1ba92e-ca5d-4076-b505-94145470e9e8.png)

### 電話
電話番号入力に特化したテキスト。プレースホルダーテキストを設定できます。電話番号以外の値を入力することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/9f1985e7-65f7-0fb5-ddd8-665f76797a09.png)

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

### 日時
日時入力に特化したテキスト。年月日を選択するとカレンダー、時間を選択すると15分刻みで時間が選択リストで表示されます。日時以外の値を入力すると「エントリは許可されている形式 yyyy/MM/dd と一致しません。」エラーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/f50a821a-4c5e-bd46-3695-ec7839091ec2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/98e00e81-3421-86e7-bcb3-846e0a356ffb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/c3c56b51-a4d2-97a8-a96c-4b85ba736c69.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/dd8b53c7-f73a-1c7a-9898-79fee1d72604.png)

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

### 日付
日付入力に特化したテキスト。日付を選択するとカレンダーが表示されます。
日付以外の値を入力すると「エントリは許可されている形式 yyyy/MM/dd と一致しません。」エラーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/88253cbf-29ba-59c6-d024-738262eefa47.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/007299d7-f928-edce-3ced-9533a6fdf5bf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/340fac87-9f31-271a-7683-bb1893def31e.png)

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

### 表示画像
静的リソースにアップロードした画像を表示。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/e7a086d5-21cb-c8f0-40bc-a7b10a545e10.png)

https://sf.forum.circlace.com/articles/946417939726065664

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

### 複数選択リスト
複数選択が可能な選択リスト。コンポーネントの種類でチェックボックスか選択リストどちらかを選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/217c0e50-46d8-3d64-a064-1cff26a16204.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/dc88d8a9-c7a2-97fe-9fd8-6e350cf4e758.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/f871ea0b-22a4-1ab4-0ef1-288200366721.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/01ccaf0e-1cc3-bb4d-bc21-1278a1662d44.png)

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

### 名前
名前入力に特化したテキスト。表示する項目に設定されている値によって表示される項目が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/fe00ed94-7cd4-9a30-cd76-edf82b00c27e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/9a4cad7a-01ce-7d11-c748-b37e2fffbcd5.png)

表示する項目に`firstName,middleName,lastName,informalName,suffix,salutation`を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/6e952ced-7894-a22e-4b2d-b9cfd2095c74.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/c8e02593-c568-cce6-6236-4185a8c431db.png)

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

### 連動選択リスト

https://regardie.dev/post-4613

https://base.terrasky.co.jp/articles/HSzEm

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

## 画面に配置できる表示コンポーネント
### セクション
複数の列にコンポーネントの設置ができます。列の設定で列を増やすことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/e6547fb5-5d48-285f-2793-50a9dc55f160.png)

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

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

### 繰り返し
> 繰り返しコンポーネントを使用して画面上の同じ種別の複数の項目に関する情報を収集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/b2fa36d9-27d8-917e-1b34-897f69833a86.png)
![7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/e9cd12e8-201d-43f2-ff2e-a8b4a0366584.gif)

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

### 表示テキスト
テキストを表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/03804392-07b6-d3a2-8038-e00ca406b11f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/f98e30fd-f12c-28dc-dd86-d9d14d4d421c.png)

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