kintoneを使って契約内容を管理をしている場合、該当する契約プランや料金等を示すために、チェックボックスにチェックをつけることは多々あると思います。

その際、チェックをつけていない箇所が表示されたままだと煩雑で分かりにくくなりませんか?

今回はチェックボックスのチェック有無によって、該当するフィールド・グループの表示/非表示を切り替えるカスタマイズを作成しようと思います。


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


利用想定シーン

今回はチェックボックスにチェックがついた場合、該当するグループフィールドとその中にあるラジオボタンが表示されるカスタマイズを作成しようと思います。


例)チェックボックスの「基本プラン」にチェックをつければ、「基本プラン」のグループフィールドが表示され、更に詳細なプランのラジオボタンが表示される。

チェックボックスによる表示の流れ



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






Customineの設定

今回は大きく分けて、以下の3つのステップでカスタマイズを作成していきます。


  1. フィールド・グループを一旦すべて非表示にする
  2. チェックボックスの選択肢によって必要なフィールド・グループを表示させる
  3. レコード詳細・編集画面でもフィールド・グループを表示する



1. フィールド・グループを一旦すべて非表示にする

初めに、レコードの追加・編集・詳細画面を表示した際に、フィールド・グループが一旦すべて非表示になるカスタマイズを作成します。

また、一度チェックがつけられて該当するフィールド・グループが表示された後に、再びチェックが外された場合に非表示に戻すカスタマイズも作成します。


まず、レコードの追加・編集・詳細画面においてフィールド・グループが表示されないようにするカスタマイズ手順は以下の通りです。



以下のような設定になります。




次に、チェックが外された場合に非表示に戻すカスタマイズ手順は以下の通りです。



以下のような設定になります。




2. チェックボックスの選択肢によって必要なフィールド・グループを表示させる

チェックボックスにチェックをつけてフィールド・グループを表示させるには、上記「1.フィールド・グループを一旦すべて非表示にする」設定の実行完了時に、表示させるための条件を追加するカスタマイズを作成します。

手順は以下の通りです。


  • 「やること」でカテゴリー:フィールドの中から「フィールドやグループを表示する」を選択します
  • 「フィールド」には「基本プラン」を選択します・・・☆
  • 「条件」には「他のアクションが完了した時」を選択し、非表示の状態から実行するように設定しておきます
  • 「条件」を追加し、「フィールド値が特定の値ならば」を選択します
  • 「フィールド」には「契約プラン」を選択します
  • 「条件」には「含まれる」を選択します
  • 「比較値」には「基本プラン」を入力します・・・☆


※文末に☆がついている箇所を「オプションプラン」や「安心プラン」に変更することで、それぞれのグループフィールドを表示させることができます。


最終的には以下の設定になります。



「条件」の「アクション」は「1.フィールド・グループを一旦すべて非表示にする」で設定した「フィールドやグループを非表示にする」を選択して下さい。




3. レコード詳細・編集画面でもフィールド・グループを表示する

ここまでのカスタマイズでは、レコード詳細画面やレコード編集画面にはフィールド・グループが表示されません。

ここでのカスタマイズを設定することによって、チェックボックスのチェック有無に沿った表示/非表示にすることができます。

カスタマイズの手順は以下の通りです。



※文末に☆がついている箇所を「オプションプラン」や「安心プラン」に変更することで、それぞれのグループフィールドを表示させることができます。


最終的には、以下の設定になります。


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



まとめ

チェックボックスのチェック有無によって、該当するフィールド・グループの表示/非表示を切り替えるカスタマイズの作成は以上になります。

チェックしていないグループフィールドそのものを非表示にできるので、画面がスッキリして見やすくなりますね。

また、文字列(1行)など他のフィールドについても、今回と同じ手順でカスタマイズを作成することによって表示/非表示を切り替えることができます。

表示させる条件を追加・組み合わせることで、チェックを3つ以上つけた場合だけ表示するフィールド、例えば「割り引きプラン」の表示といったものにも活用することができます。

業務に合わせて様々なカスタマイズをして頂ければと思います。


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