Cybozu developer networkのTipsのURL:

https://developer.cybozu.io/hc/ja/articles/207377396


今回はラジオボタンフィールドの選択によってグループフィールドの開閉を切り替えるカスタマイズをご紹介します。


アンケートアプリなどで、内容の種類によって入力する部分を分岐させたいことってありますよね?

そういう場合は、分岐先ごとにグループフィールドでまとめて、回答する必要のないグループフィールドは自動で閉じるようにすることで、ユーザーを誘導することができます!


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


アプリのフォーム


kintoneアプリストアにある「製品評価箱アプリ」をベースに、評価内容を回答する部分を、新たに加えたグループフィールドにしまう形に変えました。


各グループ内のフィールド

  • 「不具合を選択された方」

    • 「不具合箇所」:ラジオボタンフィールド

      • 選択肢:A、B、C、D、その他

    • 「緊急度」:ラジオボタンフィールド

      • 選択肢:0、1、2

    • 「概要」:文字列複数行フィールド

    • 「詳細内容」:文字列複数行フィールド

    • 「画面キャプチャ」:添付ファイルフィールド

  • 「要望を選択された方」

    • 「種類」:ラジオボタンフィールド

      • 選択肢:A、B、C、D、その他

    • 「優先度」:ラジオボタンフィールド

      • 選択肢:0、1、2、3

    • 「詳細内容」:文字列複数行フィールド

    • 「添付ファイル」:添付ファイルフィールド

  • 「質問を選択された方」

    • 「種類」:ラジオボタンフィールド

      • 選択肢:A、B、C、D、その他

    • 「概要」:文字列複数行フィールド

    • 「詳細内容」:文字列複数行フィールド

    • 「添付ファイル」:添付ファイルフィールド

  • 「その他を選択された方」

    • 「概要」:文字列複数行フィールド

    • 「詳細内容」:文字列複数行フィールド


各グループはデフォルトでグループを閉じるように設定しておきます。


各グループフィールドに含まれるフィールドは、今回のカスタマイズには直接関係しない部分ですので、上の通りでなくても構いません。


やりたいこと

「種類」で選んだ選択肢に対応するグループフィールドを開く。それ以外のグループフィールドは閉じる。


Customineの設定

まずは、追加・編集画面で「種類」を選択したときの設定からしていきます。


グループを閉じる

実行時にどのグループが開いているかわかりませんので、とりあえず全部閉じます。


やること

グループを折りたたむ」を使用します。


条件

実行のタイミングは「フィールドを編集して値が変わったとき」です。4つのグループフィールドを一気に閉じたいので、「他のアクションの実行が完了した時」を使って繋げてしまいましょう。


グループを開く

全て閉じた後、改めて指定のグループを開きます。条件によって4つに分岐させます。


やること

グループを開く」を使います。


条件

他のアクションの実行が完了した時」を使って4つとも4番のアクションの直後になるようにします。「フィールドが特定の値ならば」で分岐させ、「種類」で選んだ選択肢と開くグループフィールドが一致するように設定していきます。


これで「種類」を選択したら開くグループフィールドが切り替わるようになりました。


しかし、このままでは、閲覧・追加・編集画面を表示したときには「種類」は選択されているのに、すべてのグループフィールドが閉じている、という矛盾が起きます。


そこで、閲覧・追加・編集画面を表示した瞬間にも、対応するグループフィールドが開くアクションを追加してあげましょう!


もともと画面表示時には全てのグループフィールドが閉じているので、閉じるアクションはなくていいですよ。



動作確認

上のように設定が完了したら、「kintoneアプリへ登録」し、動作確認をしましょう。



切り替わりましたね!


まとめ

今回はグループフィールドの開閉を自動で行うことでユーザーを誘導しましたが、表示・非表示を使う方法もこちらのTipsで紹介しています。ぜひご覧ください。

他にも、フィールドを編集不可にする方法等も考えられます。


それぞれの状況に合ったカスタマイズを探してくださいね!