こんにちは。スペースフィールドに表示した集計結果のリセット方法について質問です。
【作成中の機能】
テーブル中で選択したカテゴリの数を集計してスペースフィールドに表示する機能を作成しています。
スペースフィールド1に配置したボタンを押下すると、スペースフィールド2に集計結果が表示されるようにしております。
【発生中の問題】
ボタンを押下するごとに集計結果をリセットして表示したいのですが、
以前集計した値の下に追記される形で再度集計結果が表示されてしまいます。
さらに前の値を引き継いでしまっているのか前に計算した値に累計して集計してしまっています。
【実現したいこと】
①ボタン押下時にスペースフィールド2に記載された値は全て削除して最新の結果のみ表示したい
②累計計算でなくしたい
【ソース】
jQuery.noConflict();
(function($) {
“use strict”;
kintone.events.on([‘app.record.edit.show’,‘app.record.create.show’] ,function(event) {
var record = event.record;
var tableRecords = event.record.テーブル.value;
var subTotals = {};
var GetButton = document.createElement(‘button’);
GetButton.id = ‘get_button’;
GetButton.innerText = ‘件数取得’;
GetButton.onclick = function () {
// テーブル内の各レコードをカテゴリごとに集計する
for (var i = 0; i < tableRecords.length; i++) {
var category = tableRecords[i].value[‘カテゴリ’].value;
if (!subTotals[category]) {
subTotals[category] = 0;
}
subTotals[category] += 1;
}
// 集計結果をスペースフィールドに表示する
var myTotalSpace = document.createElement(‘ul’);
for (var category in subTotals) {
var categorySpace = document.createElement(‘li’);
categorySpace.innerText = category + ': ’ + subTotals[category] + ‘件’;
myTotalSpace.appendChild(categorySpace);
kintone.app.record.getSpaceElement(‘スペース2’).appendChild(myTotalSpace);
}
};
kintone.app.record.getSpaceElement(‘スペース1’).appendChild(GetButton);
return event;
});
})(jQuery);
【参考にした資料】
第6回 テーブルの値を利用する（条件付きでデータを集計）- cybozu developer network
https://developer.cybozu.io/hc/ja/articles/202422244-%E7%AC%AC6%E5%9B%9E-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E5%80%A4%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B-%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%9B%86%E8%A8%88-
タフィ さん、こんにちは。
以下のように修正することで、ご希望の動作が可能になるかと思います。
>①ボタン押下時にスペースフィールド2に記載された値は全て削除して最新の結果のみ表示したい
スペースフィールドに表示を行う際、innerText に空文字を明示的にセットすることで、増殖を防ぐことが可能です。
例）
// 集計結果をスペースフィールドに表示する
var myTotalSpace = document.createElement(‘ul’);
for (var category in subTotals) {
var categorySpace = document.createElement(‘li’);
categorySpace.innerText = category + ': ’ + subTotals[category] + ‘件’;
myTotalSpace.appendChild(categorySpace);
kintone.app.record.getSpaceElement(‘space2’).innerText = ‘’; ←この処理を入れることで増殖を防ぐことができます。
kintone.app.record.getSpaceElement(‘space2’).appendChild(myTotalSpace);
}
②累計計算でなくしたい
スペースフィールドへの表示処理が終了したタイミングで、
テーブルの配列要素を削除することで、累積計算でなく最新の集計を行うことが可能です。
例）
GetButton.onclick = function () {
// テーブル内の各レコードをカテゴリごとに集計する
for (var i = 0; i < tableRecords.length; i++) {
var category = tableRecords[i].value[‘カテゴリ’].value;
if (!subTotals[category]) {
subTotals[category] = 0;
}
subTotals[category] += 1;
}
// 集計結果をスペースフィールドに表示する
var myTotalSpace = document.createElement(‘ul’);
for (var category in subTotals) {
var categorySpace = document.createElement(‘li’);
categorySpace.innerText = category + ': ’ + subTotals[category] + ‘件’;
myTotalSpace.appendChild(categorySpace);
kintone.app.record.getSpaceElement(‘space2’).innerText = ‘’;
kintone.app.record.getSpaceElement(‘space2’).appendChild(myTotalSpace);
}
//テーブルのカテゴリ要素のキーを取得
var key = Object.keys(subTotals);
//テーブル要素を削除
for(var i = 0; i < key.length; i++){
var keys = key[i];
delete subTotals[keys];
}
};
上記の太文字部分でカテゴリ要素を削除しています。
この処理を追加することで、最新の結果のみ集計することができます。
配列の操作などはこちらを参考にすると分かりやすいと思います。
kj様
コメントありがとうございます！早速実施いたしました。
①はご教示の通り、解決しました。ありがとうございます！
②は、累計計算は行われなくなりましたが、途中でカテゴリを追加してから再度ボタンを押しても最新の表示に変わりません。
（動作手順）
1.カテゴリ1,カテゴリ2が選択された状態でボタン押下→カテゴリ1：１件、カテゴリ2：1件と表示される
2.カテゴリ2をもう一つ増やす→ボタン押下→カテゴリ1：１件、カテゴリ2：1件と表示されたまま
（期待結果＝カテゴリ1：１件、カテゴリ2：2件と表示される）
お手を煩わせてしまい恐縮ですが、こちらについてアドバイス頂けないでしょうか。
＞配列の操作などはこちらを参考にすると分かりやすいと思います。
参考資料についてもありがとうございます。
まだ経験が浅いため、こちらのサイトで勉強させていただきます！
タフィ さん、こんにちは。
記載されている以下のイベントだと、event 変数には “編集画面を表示” または “レコード追加画面を表示” 時点での
各フィールドの値しか入らない状況です。
[‘app.record.edit.show’,‘app.record.create.show’]
そのため、レコード編集画面でボタンを押下する必要があるなど、特別な理由がない場合には、
[‘app.record.detail.show’]（レコード詳細画面表示後）イベントを利用するといいのかなと思います。
なお、上記イベントの場合、テーブルのカテゴリを追加・変更した際に、一旦レコードを保存してボタンを押下する必要があります。ご留意ください。
kintone JavaScript API のイベント一覧については、こちらのページをご覧ください。
すみません。上記について追記させてください。
app.record.create.change.<フィールドコード> イベントや、app.record.edit.change<フィールドコード> イベントを用いることで、
“レコード追加画面でカテゴリフィールドを変更” した際や “レコード編集画面でカテゴリフィールドを変更” した際に発火させることができます。
例）
(function() {
“use strict”;
var events = [‘app.record.create.show’,‘app.record.create.change.カテゴリ’,
‘app.record.edit.show’,‘app.record.edit.change.カテゴリ’]
kintone.events.on(events ,function(event) {
上記太文字部分のようにイベントを追加することで、
カテゴリフィールドを変更した後にボタンを押下しても最新の集計を行うことが可能でした。
なお、上記イベントを使用した際には、スペースフィールド1 にボタンを追加する前に、
innerText に空文字を明示的にセットし、増殖バグを防ぐ必要がありますのでご注意ください。
例)
kintone.app.record.getSpaceElement(‘space1’).innerText=‘’;
kintone.app.record.getSpaceElement(‘space1’).appendChild(GetButton);
kj 様
アドバイスありがとうございます。
app.record.create.change.<フィールドコード>、app.record.edit.change<フィールドコード> を追加することによって思い通りの実装ができました！
（ただ上記<フィールドコード>はルックアップの項目は対応していないようだったので、ルックアップの内容を別フィールドにコピーすることで対応しました）
最後までフォローいただきありがとうございました。大変助かりました！