kintoneのラジオボタン・ドロップダウンを使用すると、複数の選択肢から一つの項目を選択することが可能です。

これらを利用し、アンケートの回答や顧客の職業などを管理するアプリを手軽に作成することができます。

しかし、選択肢ごとに該当するフィールド・グループがある場合、選択肢の数によってはどれがどのフィールド・グループなのか分からなくなることも・・・

今回はそんなお悩みを解決するカスタマイズを作成していきます!


カスタマインの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。


利用想定シーン

今回はラジオボタンで選択した項目に該当するグループフィールドとその中にある「文字列(1行)」フィールド・「数値」フィールドが表示されるカスタマイズを作成しようと思います。


例)ラジオボタンの「小学生以下」を選択すると、「小学生以下」のグループフィールドが表示され、更に詳細な料金区分が表示される。



ラジオボタンによる表示の制御

アプリのフォームは次の通りです。


具体的には、次のように設定してください。

※フィールド名とフィールドコードは原則同じものを指定、一般(大学生含む)のみ異なる

フィールド名

フィールドタイプ

備考

年齢層

ラジオボタン

項目は「小学生以下」「中高生」「一般(大学生含む)」

(なし)

ラベル

「料金詳細」と記載

小学生以下

グループ

グループ内のフィールドを表示する

2歳以下

文字列(1行)

「小学生以下」グループ内のフィールドとする

3歳以上

数値

「小学生以下」グループ内のフィールドとする

中高生

グループ

グループ内のフィールドを表示する

中学生

数値

「中高生」グループ内のフィールドとする

高校生

数値

「中高生」グループ内のフィールドとする

一般(大学生含む)

グループ

グループ内のフィールドを表示する
フィールドコードは「一般_大学生含む」

大学生

数値

「一般(大学生含む)」グループ内のフィールドとする

一般

数値

「一般(大学生含む)」グループ内のフィールドとする


カスタマイズ

こういった場合のカスタマイズは、大きく2つに分けて行います。それは

  • 値が変更された時のカスタマイズ

  • 初期表示の時のカスタマイズ

です。


カスタマイズの内容は非常に似た形になるのですが、順を追って説明していきます。


値が変更された時のカスタマイズ

値が変更された時のカスタマイズは、大きく2つの処理に分かれます。

それは「グループを一旦全て非表示にする」事と、「選択されているグループを再表示する」事です。

再表示するアクションだけを設定すると、それまで表示されていたグループが残ったままとなってしまうため、一度すべてのグループを非表示としたあとで、必要なグループだけ再表示する必要があります。


●グループを一旦全て非表示にする

やること「フィールドやグループを非表示にする」、条件「フィールドの値を編集して値が変わった時」を用います。

この時、非表示にする対象の「フィールド」は、各グループフィールド(「小学生以下」「中高生」「一般(大学生含む)」を選択します。

条件は「フィールド」に「年齢層」を設定し、値が変わったらアクションが動くようにします。


●選択されているグループを再表示する

再表示では、グループフィールド毎に再表示のアクションを設定する必要があります。

まずは「小学生以下」の例を示すと、次のようになります。


ここでは、やること「フィールドやグループを表示する」、条件「フィールドやグループを表示する」「フィールド値が特定の値ならば」を用います。


グループフィールドを再表示するため、やることの「フィールド」には「小学生以下」を設定し、条件「他のアクションの実行が完了した時」のアクションはアクション番号1を、条件「フィールド値が特定の値ならば」の設定は「年齢層」が「小学生以下」と「等しい」とします。


これと同様に、グループフィールド「中高生」、「一般(大学生含む)」も、再表示のアクションを設定します。

2番アクションと異なる点は、やることの「フィールド」と、条件の「比較値」のパラメータが変わるだけで、あとは同じ設定になります。


初期表示の時のカスタマイズ

初期表示の時のカスタマイズも、大きく2つの処理に分かれます。

それは「グループを一旦全て非表示にする」事と、「選択されているグループを再表示する」事です。

再表示するアクションだけを設定すると、それまで表示されていたグループが残ったままとなってしまうため、一度すべてのグループを非表示としたあとで、必要なグループだけ再表示する必要があります。


●グループを一旦全て非表示にする

やること「フィールドやグループを非表示にする」、条件「追加画面・編集画面・詳細画面のいずれかを表示した時」を用います。

この時、非表示にする対象の「フィールド」は、各グループフィールド(「小学生以下」「中高生」「一般(大学生含む)」を選択します(アクション1の「やること」と同じパラメータとなります)。


●選択されているグループを再表示する

再表示では、グループフィールド毎に再表示のアクションを設定する必要があります。


アクション2〜4とほぼ同様のアクション(条件「他のアクションの実行を完了した時」の「アクション」が5番アクションを指すように変更、他はすべて同様)を次のように設定します。


以上でカスタマイズは完了です!「kintoneアプリへ登録」して動きを確認してみてください。


なお、最終的なアクショングラフは次のようになります。


おわりに

ラジオボタンの選択項目によって、該当するフィールド・グループの表示/非表示を切り替えるカスタマイズについてご紹介しました。


今回はラジオボタンを使ったカスタマイズをご紹介しましたが、ドロップダウンでも同じ手順でカスタマイズを作成することができます。特にドロップダウンはラジオボタンより選択肢が多くなる場合が多いので、非表示にできるとスッキリして分かりやすくなりますね!


顧客の職業に合わせて、製品別のグループフィールドを表示するなど業務に合わせて様々なカスタマイズをして頂ければと思います。


また、本記事の応用編として

チェックボックスのチェック有無によって、該当するフィールド・グループの表示/非表示を切り替えるkintoneカスタマイズ
もありますので、併せてご覧ください。


ドキュメントサポートページもぜひご活用ください。

また、ご不明点等ございましたら、チャットにてご質問ください!