Cybozu developer networkのTipsのURL:

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


別のフィールドの値次第では入力しなくていいフィールド、ってありますよね。


たとえば、アンケートで「問6(問5で「はい」と答えた方のみお答えください。)」とあれば、問5で「いいえ」と答えた方は、問6は入力しなくていいですよね?


そういう場合は、入力しなくていいフィールドを非表示にしてしまいましょう!

今回は別のフィールドの値によってフィールドの表示/非表示を切り替えるカスタマイズをご紹介します。


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


アプリのフォーム

アプリはkintone アプリストア  の「問診表」アプリを使います。


やりたいこと

問1: 「その他」が選択されていない場合、「その他」フィールドを非表示にする。

問2: 「ない」が選択されている場合、「予防接種名」フィールドを非表示にする。

問3: 「いいえ」が選択されている場合、「病名」「発症した時期」フィールドを非表示にする。

問4: 「ない」が選択されている場合、「アレルギーの原因」「症状」フィールドを非表示にする。

問5: 「ない」が選択されている場合、「詳細」フィールドを非表示にする。



Customineの設定

まず、問1から設定してみましょう!


問1でやりたいことをより詳しくすると、次の3つです。


  1. 追加画面・編集画面・詳細画面で、問1で「その他」が選択されていない場合、「その他」フィールドを非表示にする。

  2. 問1の選択を変えた時に、「その他」が選択されていない場合、「その他」フィールドを非表示にする。

  3. 問1の選択を変えた時に、「その他」が選択された場合、非表示になっている「その他」フィールドを再度表示する。


では、その通りに設定していきましょう!


追加画面・編集画面・詳細画面で、問1で「その他」が選択されていない場合、「その他」フィールドを非表示にする。


やることの設定

フィールドやグループを非表示にする」を使用します。


条件の設定


  • 「その他」が選択されていないときだけにしたいので、「フィールド値が特定の値ならば」を追加します。問1のフィールドは複数選択フィールドなので、「条件」は「等しくない」ではなく、「含まれない」にしましょう。



問1の選択を変えた時に、「その他」が選択されていない場合、「その他」フィールドを非表示にする。


やることの設定

「フィールドやグループを非表示にする」を使用します。


条件

フィールドの値を編集して値が変わった時」を使用します。一覧画面で編集するときも適用したいので、こちらも「一覧画面の鉛筆を押した時も含める」にしましょう。「その他」が含まれるかどうか判断する追加条件は上と同じです。


問1の選択を変えた時に、「その他」が選択された場合、非表示になっている「その他」フィールドを再度表示する。


やることの設定

フィールドやグループを表示する」を使用します。「フィールドやグループを非表示にする」によって非表示になっているフィールドを再度表示することができます。


条件

今度も「フィールドの値を編集して値が変わった時」を使用します。今回は「その他」が選択されたとき、なので「条件」を「含まれる」に設定します。


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


「その他」フィールドが消えたり現れたりするようになっているはずです。


問2~問5までも同様に設定していきます。

やること、条件がほぼ同じなら、「ページをコピー」機能が便利ですよ!


問2


問2からはラジオボタンフィールドなので、複数選択不可です。なので、「フィールド値が特定の値ならば」の「条件」は「等しい」もしくは「等しくない」に設定しましょう。


問3

問3、問4では表示、非表示を切り替えるフィールドが複数ありますが、「フィールドやグループを非表示にする」「フィールドやグループを表示する」は対象となるフィールドを複数選択できるので、アクションを増やさなくても大丈夫です!


問4



問5



全ての設定が完了したら、再度「kintoneアプリへ登録」し、動作を確認してみましょう!




出来ましたね!


まとめ

今回ご紹介したフィールドの表示非表示の切り替えは、条件との組み合わせでいろいろな場面で活躍します。

ユーザーやステータスによって見ることのできるフィールドを変える、ボタンを押したら表示する等々…工夫すればより使いやすいUIになるでしょう。


同じようなアクションを複数作成したい場合は、「アクションを複製」「ページをコピー」といった機能を使うことで、設定にかかる時間を短縮できます。ぜひご活用ください。



もし分からないことがありましたら、フォーラムの方でご質問ください。