フローのリソース「選択肢」

フローのリソースの一つである「選択肢」について、設定方法や使い方を解説します。

フローのリソースには同じ選択リストでも、今回解説する「選択肢」の他に「コレクション選択肢セット」「選択リスト選択肢セット」「レコード選択肢セット」があります。他のものも順次解説予定です！

それではスタートです。

設定値がややこしいので私もなかなか理解できませんでした。。具体例等も入れながら分かりやすくなるように心がけて書いていきますね。

最初に結論からお話しすると設定はこんな感じ。

完成図はこんな感じになっています。

「いちご」「みかん」「ぶどう」という選択肢は自由に作成できます。

「選択肢」の特徴

まずはどんなときに「選択肢」を使うか見ていきましょう。

「選択肢」の特徴としては、フローの中で自由に選択肢を作ることができる、というところが挙げられると思います。それ以外の3つのコレクションについてはフローの中に選択肢がないのです。
どこにあるのかというと、オブジェクトの項目などです。

その場合はオブジェクト側で選択肢の内容が決まっていますよね？そうではなくて、フローの中でだけ存在するような選択肢を作りたい場合に選択するのが「選択肢」です。

例えば画面フローを作成していて、「ラジオボタン」や「選択リスト」の項目を配置したときに、その内容(選択肢)を自分で決めることができるのです。

リソース：選択肢の設定方法

それでは具体的な設定内容を見ていきましょう。

今回は好きな果物を「いちご」「ぶどう」「みかん」から選んでもらうような画面フローを作ってみようと思います。

まずは「いちご」「ぶどう」「みかん」という選択肢を作りましょう。

フローを開いて、画面左側にある「新規リソース」をクリックします。

リソース種別は「選択肢」をクリックします。

API参照名は分かりやすいものにしましょう。画面フローでは何か値を設定するときにAPI参照名のみで見分けないといけないことが多いです。なので、API参照名を見ただけでそれが何なのか分かりやすいというのはとても重要です。

選択肢表示ラベルと選択肢の値に「いちご」設定します。こうすることで画面には「いちご」という選択肢が表示されるようになり、その選択肢を選んだ場合に「いちご」という文字が保持されます。

「保存」したら完了です。

同じように「ぶどう」「みかん」の選択肢も作成します。

画面コンポーネント「選択リスト」で使用する

では先ほど作成した選択肢が表示される選択リスト項目を画面に表示してみましょう。

画面フローの「＋」ボタンをクリックして「画面」という要素を追加します。

画面左側から「選択リスト」を探して、真ん中にドラッグアンドドロップします。

表示ラベルとAPI参照名を設定しましょう。何度も書きますが、API参照名は分かりやすく！を意識してみてください。表示ラベルは画面に表示されるので文言が他のユーザにも見える、という点を意識して考えられると良いと思います。

「ユーザが複数のオプションを選択できるようにする」というのは要件にあわせて選択してください。この選択肢の項目で選択肢を2個以上同時に選択できるようにするかどうかです。

コンポーネントの種類は「選択リスト」にします。「選択リスト」か「ラジオボタン」が選択できるのでこちらも見た目で好きな方にしてOKです。

続いて表示する選択肢を設定します。

クリックすると選択肢にできる候補が表示されます。ここで先ほどの手順で作成した選択肢を選択します。こういうときにAPI参照名で表示されるので、分かりやすいものにしておくと楽ですよ！！

1つ選択肢を追加したら「選択肢を追加」ボタンをクリックして選択肢を増やしましょう。

全部設定するとこんな感じです。「デフォルト値」とはこの画面が一番最初に表示されるときに選択されている状態になる値のことです。今回はどの選択肢も選択されていない状態にしたいので何も設定しません。

ここまで設定できたら保存します。フローを保存してデバッグし、画面の見え方を確認してみましょう。

完成図

デバッグしてみるとこんな感じになります。まずは最初に画面表示された状態です。
デフォルト値に何も設定しなかったので「–なし–」になっていますね。

クリックすると選択肢が表示されます。設定した選択肢がすべて表示されていますね。

まとめ

今回は「選択肢」の使い方についてまとめてみました。

私自身、選択肢というリソースを作成するところで「選択肢の値」というところを設定しておらず、画面で選択した値が取得できなくて困ったのでこの記事を書きました。少しでも役に立てれば幸いです。
役に立った、分かりやすかったという方はハートをポチッとお願いします。

このブログではできるだけ分かりやすく、具体例を載せた感じでさまざまな設定方法や構築手順を紹介しています。解説してほしいものがありましたらぜひコメントください。

それでは、ごきげんよう。