カテゴリー内の他の記事

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

フォローする

(著者:サイボウズ 三宅 智子)

Index

はじめに

2016年2月のアップデートで追加の「グループフィールド開閉API」を使ったJavaScriptカスタマイズをご紹介します。

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

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

完成イメージ

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

 

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

https://gyazo.com/a2ece947c6fe8fe6dc5b9e0463d9f580

 

サンプルアプリの準備

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

フィールドの設定

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

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

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

サンプルプログラム

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

プログラム(JavaScript)

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

使用したAPI

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

最後に

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

デモ環境

https://dev-demo.cybozu.com/k/82/

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
yt

初めまして。とても良い機能で、プログラムを参考に作らせてもらいました!!

現状だと開閉が自動で行え、手動だとすべて開く事が出来る状態ですが、ラジオボタンを選んでない時、該当しないグループフィールドを開こうとしても開かないようにロックをかけるコードはご存知ないでしょうか?

コミュニティサイトで検索してみてもなかなかヒットせず。お分かりでしたらご教示いただければ幸いです。

 

 

Avatar
cybozu Development team

yt 様

サンプルをご活用いただけているとのこと、ありがとうございます。

 

「グループフィールドの開閉を禁止する」ということはできかねます。

グループフィールド内のフィールドを触らせたくないということでしたら、

フィールドの表示/非表示を切り替える」でグループフィールドを指定することで、グループフィールドを非表示にすることが可能です。

サンプルコード内の「setGroupFieldOpen」を「setFieldShown」に書き換えてお試しください。

 

▼修正例

 kintone.app.record.setGroupFieldOpen('group_failure', false);

 ↓

 kintone.app.record.setFieldShown('group_failure', false);

 

以上、よろしくお願いいたします。

Avatar
yt

ご担当者さま

 

この度はご返答並びに、非表示機能をご教示いただきありがとうございました。

みせなくすることにより、よりよいイメージで設定できました!

とても助かりました。ありがとうございました。

ログインしてコメントを残してください。