条件付きフィールドを用いたフォーム作成方法
本記事では、条件付きフィールドを設定することで動的なフォームを作成する方法を説明します。
目次
１．はじめに
２．作成方法
３．最後に
１．はじめに
フォーム作成に慣れてくるともう少し凝ったフォームを作成したくなると思います。
その一例として、条件付きフィールドを使ったフォーム選択肢を条件とした動的なフォーム作成をご紹介します。
２．作成方法
例として、好きな食事を選択肢から選ぶとその内容に応じて、好きな食べ物の選択肢が動的に変わるフォームを作成してみることにします。
完成したフォームイメージは、次のようになります。
①選択した料理に基づいて特定のメニュー項目をコンタクトに表示させるために次のカスタムフィールドを作成します。
・ラベル名：Typeofmeal：Selectデータ型で、オプションで選択肢の値を設定します。（今回は、空白文字とします）
②フォームを作成します。
・ラベル名：好きな食事：「選択」データ型で作成します。
今回の例では、「一般」タブのラベルに「好きな食事」「デフォルト値」に「ご選択ください」、「プロパティ」タブのListへ食事の種類（今回の場合は、American,Asian,Italian,Latin Americanとします）を設定します。
・＋Add field based on selected value をクリックし、「チェックボックスのグループ」を選択します。
・チェックボックスのグループ画面の「一般タブ」のラベルを「Americanの中で好きな食べ物」、「Condition」タブのShow only on select values を「含む」「American」Any value を「いいえ」、「プロパティ」タブのOptionlistに今回の場合は、Apple Pie,Burgers,FiedChickenを設定します。
・上記の作業をAcian,Italian,Latin Americanにも同様に設定します。
以上で作業完了です。
３．最後に
少し特長のある設定方法でしたが、いかがでしたでしょうか。今回の設定ポイントは、カスタムフィールドの追加設定でラベル名：Typeofmeal：Selectデータ型で、オプションで選択肢の値を空白文字、空の値を「選択してください」とする点です。そうすることで選択項目の中から選択するフォームであることがひと目で理解できるからです。
