カテゴリー内の他の記事

ラジオボタンを利用してレコード内集計する

フォローする

Index

はじめに

kintone の「計算」フィールドは、フィールドの値の自動計算に利用できてとても便利です。
でも、こんなことで困った経験はありませんか?

  • 分析のために、レコード内数値の合計や平均を表示したい。
  • 一方、ユーザーの入力を簡易化させるために、数値入力ではなくラジオボタン等の選択肢から選ばせたい。 
    →「計算」フィールドが使えないというジレンマが生まれます!

image00.png  image01.png

(*) 計算フィールドは、ラジオボタンやドロップダウン等の値を利用できません。
   詳細は、kintoneヘルプ(計算フィールドで利用できるフィールド型)参照。

そこで、ラジオボタンやドロップダウン等、選択した値の自動計算が可能になるカスタマイズをご紹介します!

実現できること

ラジオボタン等で選択されている数値の合計または平均を算出し、指定したフィールドに表示します。
計算対象として利用できるのは下記のフィールドです。

  • ラジオボタン
  • チェックボックス
  • 複数選択
  • ドロップダウン

image02.png

 

さらに、追加の機能です。
レコード内で選択した値の数をそれぞれカウントし、指定したフィールドに表示します。
image03.png

 

様々なアプリでの活用が期待できるので、対象フィールドをJavaScriptのコードに直接書くのではなく、メンテナンスしやすいように設定画面で設定できるようにすると便利ですね。
このため、今回はプラグインという形で実現することにしました。

設定画面のイメージ

image04.png

集計対象フィールドや集計方法を、設定画面で設定することができます。これなら、JavaScript の知識がない人でも手軽にメンテナンスすることができますね!

サンプルコード

サンプルコードは、GitHubに公開されています。

https://github.com/cybozu/option/tree/master/kintone-plugins/select-type-form-totalization


プラグインとして利用してみたい方は GitHub からソースコードをダウンロードし、こちらの手順を参考にパッケージングを行ってください。

カスタマイズのポイント

ここでは、プラグインで実装されているカスタマイズ(totalization.js)のポイントについて解説します!

集計

集計(値の数、合計、平均)の処理は、calcCount、calcSum、calcAverage という function でそれぞれ行っています。

ポイント1:フィールド値の複数選択への対応

集計対象フィールドには複数選択可能なフィールドタイプ(チェックボックス、複数選択)が含まれるため、$.isArray で配列であるか判断して処理を分けています。

ポイント2:テーブル内フィールドへの対応

テーブル内のフィールドはフィールド値の階層が異なるため、通常のフィールドとは別の対応が必要です。
※詳細は、フィールド形式の「テーブル」を参照

テーブル内フィールドを取得するため、テーブルの中の階層に入っているフィールドに対して$.eachで処理を行います。

なお、テーブルのフィールドコードは事前にまとめて取得しています。

イベント処理

集計処理が動くタイミングも重要です。

レコードの編集・保存時はもちろんですが、入力中も集計値は自動更新してほしいですよね。
そんなときは、各画面のフィールド値変更イベントを利用します。

ポイント:フィールド値変更イベントの利用

対象フィールドからトリガーにしたいフィールドイベントをすべて生成し、すべてのイベントに対してevents.onで処理が動くようにしています。
また、モバイルでも動くようにモバイル用イベントも対象としています。

テーブル内フィールドが対象に含まれる場合、テーブルの行追加・行削除時にも再計算が必要となるため、テーブル自体のフィールド値変更イベントにも対応しています。

注意事項

  • 本カスタマイズについて、プラグインファイル(zipファイル)の公開予定はありません。
    プラグインとして利用してみたい方は、サンプルコード を確認しパッケージングを行ってください。
  • プラグインの詳しい使い方は、GitHub の README をご確認ください。
  • 本カスタマイズのデモ環境はご用意しておりません。

本Tipsは、2018年7月版 kintoneで確認したものになります。

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

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

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