カテゴリー内の他の記事

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

フォローする

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

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

ご担当者さま

 

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

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

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

Avatar
yt

先日非表示の方法を教えていただいた者です。こちらのページのコードを応用し、サブテーブル内にあるドロップダウンフィールドの値でグループフィールドを開閉をする方法はありますでしょうか?もしコードの追加、修正するだけでイメージのものがありそうでしたらご教示いただければ嬉しいです。よろしくお願いいたします。

Avatar
cybozu Development team

yt 様

サブテーブル内のフィールドにも同様にフィールド値変更イベントが実装可能です。
https://developer.cybozu.io/hc/ja/articles/201941984#step3

以下2点修正を行うことで実装可能かと思います。

・イベントの書き換え
・スイッチ文の書き換え

テーブルの操作に関しては、以下の記事が参考にしてください。

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

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

Avatar
yt

ご担当者さま

さっそく実装方法をご教示いただきありがとうございます。参考例を確認し書いてみたのですがうまくいかず・・

・スイッチ文の書換

の部分でテーブルのフィールドの値をどのようなコードで取得したらよいか分からずです。

勉強不足で大変恐縮なのですが、実際の取得するコードが書かれているサイトなどあったりしますでしょうか?

Avatar
cybozu Development team

yt 様

案内が中途半端になってしまい申し訳ございません。

実装について具体的な不明点はコミュニティに投稿をお願い致します。
有志からの回答を得られる場となっていますので、ぜひご活用ください。

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

Avatar
yt

ご担当者さま

 

さっそく投稿についてのご教示ありがとうございました。

コミュニティにて質問投稿してみます!

 

Avatar
森雄大

いつも有益な情報を提供いただき、ありがとうございます。

サンプルプログラムではラジオボタンの選択肢によって開閉を制御していますが、

ラジオボタンではなくチェックボックスを使用した場合に

上記サンプルプログラムと異なる点はありますでしょうか?

Avatar
cybozu Development team

森雄大 様

お世話になっております。cybozu developer network 運営でございます。

ラジオボタンとチェックボックスでは、フィールド形式が違うため
値を参照している部分を変更する必要があります。

フィールド形式については以下の記事をご確認ください。
https://developer.cybozu.io/hc/ja/articles/202166330

また、詳しい実装方法につきましてはコミュニティをご活用ください。

Avatar
森雄大

cybozu Development team ご担当者様

 

ご連絡頂き、ありがとうございます。

コミュニティ内の

チェックボックスの選択肢によってフィールドの表示/非表示を切り替えたい

を参考にして作成いたしました。

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