kintoneを使って契約内容の管理をしている場合など、そのレコードが該当する契約プランや料金等を示すためのチェックボックスフィールドを設置し、チェックボックスの値１つずつに対応するグループフィールドがあるアプリ構成となるケースがあります。

【チェックボックスに対応するグループフィールドがあるアプリの例】

こういった場合にチェックボックスでチェックをつけず、利用しないグループフィールドが表示されたままだと画面が煩雑になり、分かりにくくなりませんか？

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

【実行例】

同じようなことをラジオボタンやドロップダウンで実現したい場合には、こちらを参考にしてください。

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

今回作成するカスタマイズの例とアプリ設定

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

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

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

アプリは次のようになります。

詳細なフィールドの定義は次のようになります。

※フィールド名とフィールドコードは同じものを指定してください

カスタマイズの設定

このカスタマイズのポイントは、グループフィールドを「一旦全て非表示」にした後「表示すべき箇所を改めて表示する」点です。

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

画面を表示した時と、契約プランフィールドの値を変更した時それぞれで、まずはグループフィールドをすべて非表示にします。

画面を表示した時の非表示処理

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

やることの「フィールド」パラメーターには「基本プラン,オプションプラン,安心プラン」を設定し、条件の「一覧画面の鉛筆を押した時」ステータスは「一覧画面の鉛筆を押した時は含めない」とします。

契約プランフィールドの値を変更した時の非表示処理

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

やることの設定は先ほどのアクション１と同様、条件の「フィールド」パラメーターには契約プランを設定し、「一覧画面の鉛筆を押した時」パラメーターは「一覧画面の鉛筆を押した時は含めない」とします。

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

先ほどの２つのアクションでグループフィールドを全て非表示にしたので、ここから表示すべきグループフィールドを再表示します。

今回のカスタマイズ例だと３アクション作成しますが、ほぼ同じものを３つ作ります。

グループ毎に再表示(基本プラン)

やること「フィールドやグループを表示する」、条件「いずれかのアクションの実行が完了した時」、「フィールド値が特定の値ならば」を使います。

やることの「フィールド」パラメーターには「基本プラン」を設定し、条件「いずれかのアクションの実行が完了した時」の「アクション」パラメーターには上の2つのアクション(1,2)を指定、「フィールド値が特定の値ならば」のフィールドには「契約プラン」、条件は「含まれる」を設定し、比較値には「基本プラン」を入力します。

このアクションと同様にのアクションを２つ複製して作成し、

やることの「フィールド」パラメーターと、条件「フィールド値が特定の値ならば」の比較値をそれぞれ「オプションプラン」「安心プラン」に変更したアクションを作るとカスタマイズ完了です！

グループ毎に再表示(オプションプランと安心プランの例)

カスタマイズのアクショングラフ

アクショングラフは次のようになります。

カスタマイズが完成したら、「kintoneアプリへ登録」して動きを確認してみてください。

また、上手く動かない時は、ご自身のカスタマイズと上のアクショングラフやそれぞれのアクションの設定を見比べてみて下さい。

まとめ

この記事では、チェックボックスのチェック有無に連動して、該当するフィールド・グループの表示/非表示を切り替えるカスタマイズをご紹介しました。

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

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

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

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

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