回答の条件によってグループフィールドの開閉を切り替える

（著者：サイボウズ　三宅 智子）

Index

• はじめに
• デモ環境
• サンプルアプリの準備
• サンプルプログラム
• 最後に

はじめに

「グループフィールド開閉API」を使ったJavaScriptカスタマイズをご紹介します。

このAPIを使うことで例えば、回答の条件によって、グループフィールドを開いたり閉じたりしたい！という要望にお応えできるようになります。
分岐のある入力項目がある場合に便利ですね。

今回ここでご紹介するのは、製品の要望を集めるアプリのラジオボタンの選択肢によってグループフィールドを制御できるカスタマイズです。

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/82/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

完成イメージ

設問「種類」のラジオボタンの選択肢によって開いておくグルーフィールドを設定できます。

 

実際には下のように動きます。

サンプルアプリの準備

まずはアプリの準備をします。今回はkintoneアプリストアにある「製品評価箱アプリ」を使います。
ダウンロードした「製品評価箱アプリ」に必要なフィールドを追加して、フィールドコードを新たに設定します。

フィールドの設定

サンプルアプリのフィールドは以下です。製品評価箱アプリに元々設置されているフィールド以外に、下記のフィールドを付け足してください。

フィールド名	フィールドコード	フィールドタイプ
不具合を選択された方	group_failure	グループフィールド
要望を選択された方	group_demand	グループフィールド
質問を選択された方	group_question	グループフィールド
その他を選択された方	group_other	グループフィールド

各グループフィールドの中には上の完成イメージ図や下図を参考に任意のフィールドを入れてみてください！

サンプルプログラム

ご注意事項

• サンプルプログラムは、その動作を保証するものではありません
• サンプルプログラムの技術的なサポート等は行っていません

プログラム(JavaScript)

「グループフィールド開閉API(kintone.app.record.setGroupFieldOpen)」を使って、まずアプリ内の全てのグループフィールドを閉じる処理をします。
そのあと、ラジオボタンの値によって開くグループフィールドを切り替えています。

使用したAPI

1. イベントハンドラーを登録する
2. レコード詳細画面が表示された時のイベント
3. レコード追加画面が表示された時のイベント
4. レコード編集画面が表示された時のイベント
5. レコード追加画面のフィールド値変更イベント
6. レコード編集画面のフィールド値変更イベント
7. グループフィールドの開閉API

最後に

他にもアレンジして便利にお使いいただけそうでしょうか？
今回はラジオボタンの選択肢によってグループフィールド開閉を切り替えるというものでした。他にもプロセス管理のステータスによって切り替えるという利用シーンもありますね。
何かご不明な点などありましたらお気軽にコメントください！

※デモ環境についての説明はこちら