背景・実現したいこと
実現したいこと：関連レコード一覧における勤務時間の累計をスペースに表示したい
試したこと：developer networkのサンプルコードにて作成しましたが、表示されません。
/*
* total related records
* Copyright (c) 2018 Cybozu
*
* Licensed under the MIT License
*/
(function() {
‘use strict’;
var events = [
‘app.record.detail.show’,
‘app.record.edit.show’
];
kintone.events.on(events, function(event) {
var clientRecordId = event.recordId;
var relatedAppId = kintone.app.getRelatedRecordsTargetAppId(‘workSchedule’);
var query = ‘従業員="’ + clientRecordId ;
var outputFields = [‘勤務時間’];
var appUrl = kintone.api.url(‘/k/v1/records’);
var params = {
‘app’: relatedAppId,
‘query’: query,
‘fields’: outputFields
};
var elementId = ‘totalHours’;
kintone.api(appUrl, ‘GET’, params, function(resp) {
var amount = 0;
for (var i = 0; i < resp.records.length; i++) {
amount += parseFloat(resp.records[i].勤務時間.value);
}
var divTotalAmount = document.createElement(‘div’);
divTotalAmount.style.fontWeight = ‘bold’;
divTotalAmount.style.textAlign = ‘right’;
divTotalAmount.style.fontSize = 12;
kintone.app.record.getSpaceElement(elementId).appendChild(divTotalAmount);
return event;
});
});
})();
エラー情報 （開発者ツールのコンソール）
Failed to load resource: the server responded with a status of 400 (Bad Request)
どこを修正したらよいか教えてください。
juridon様コメントありがとうございます！
そして、丁寧にｺﾐｭﾆﾃｨの基礎から教えていただき感謝いたします！
まさに
添付していただいた
https://developer.cybozu.io/hc/ja/articles/203030394-%E9%96%A2%E9%80%A3%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%81%A7%E9%9B%86%E8%A8%88 と、
関連レコードの項目を条件付きで集計 – cybozu developer network を参考にしながら作り始めました。
コードを修正し、以下の通りになりました。
/*
* total related records
* Copyright (c) 2018 Cybozu
*
* Licensed under the MIT License
*/
(function() {
‘use strict’;
var events = [
‘app.record.detail.show’,
‘app.record.edit.show’
];
kintone.events.on(events, function(event) {
var clientRecordId = event.record.memberName.value;
var relatedAppId = kintone.app.getRelatedRecordsTargetAppId(‘workSchedule’);
var query = ‘従業員 = "’ + clientRecordId + ‘"’;
var outputFields = [‘勤務時間’];
var appUrl = kintone.api.url(‘/k/v1/records’, true);
var params = {
‘app’: relatedAppId,
‘query’: query,
‘fields’: outputFields
};
var elementId = ‘totalHours’;
kintone.api(appUrl, ‘GET’, params, function(resp) {
var amount = 0;
for (var i = 0; i < resp.records.length; i++) {
amount += parseFloat(resp.records[i].勤務時間.value);
}
var divTotalAmount = document.createElement(‘div’);
var wString = String(amount.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’));
divTotalAmount.style.fontWeight = ‘bold’;
divTotalAmount.style.textAlign = ‘center’;
divTotalAmount.style.fontSize = 14;
divTotalAmount.innerHTML = ‘:’ + wString + ‘:’;
kintone.app.record.getSpaceElement(elementId).appendChild(divTotalAmount);
return event;
});
});
})();
結果、勤務時間数に文字が出てきましたが、：NaN：となってしまっています。
時間表記にするには、どのようにしたら良いでしょうか？juridon様のおっしゃった通り、計算フィールドを用いています。
また、上記の抽出は、さらに絞り込む条件にて期間指定しているのですが、日数・勤務時間に全てを合計してしまっています。
期間の範囲指定を行うには、どうしたらでしょうか？
お忙しい中恐縮ですが、
よろしくお願いいたします。
こんにちは！
なるほどなるほどです・・・・！
これを説明するには何段階も必要かもですので、間違っているだろう部分についてと、参考になりそうなコメントをさせていただきますね。
NaNになってしまうところについてですが・・・
どこかの勤務時間、値が入っていないところないですかね？
それと amount += parseFloat(resp.records[i].勤務時間.value);
ここなのですが、parseFloat()はカッコの中身を浮動小数点数（ざっくりいうと小数点のある数値）にするメソッドです。
でも上手く動かなそうです。
勤務時間.valueにはたぶん"04:00"とか"04:30"が入っていますが、
parseFloat(“04:00”)とかparseFloat(“04:30”)をコンソールで試してみると「4」になってしまって、
まずここで、この時刻形式のままだとparseFloatは使えないな。ってなると思います。（気持ち的には4.5になってほしいですよね？）なので計算できたとしても合計がおかしなことになると思います。
そして↓この行ですが、これって、計算結果の数値をカンマ入りの桁区切りにするという処理です。（10000→10,000にする処理）
var wString = String(amount.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ‘$1,’));
この行の直前にconsole.log(amount);ってやるとコンソールには何が表示されますでしょうか？（数値じゃないものが入っているかもしれません
デバッグしてみてくださいね！）
次に、絞り込み条件についてですが、JavaScript上の絞り込み条件は別のものなので、JavaScript上でも
queryに絞り込み条件を入れてあげないといけません。
参考：https://developer.cybozu.io/hc/ja/articles/900001057206-kintone-API-%E3%81%AE%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%AE%E5%9F%BA%E6%9C%AC
それと、その絞り込み条件ですと、4月21日以降はアプリ自体使えなくなってしまう感じだと思います（＞＜）
毎月アプリを作り直すような感じになってしまうような・・・。
勤務時間のところは例えば以下のような直し方などあるかと思います（ざっくりですが）
（１）計算フィールドの時刻表示のままでは計算できないので「数値」表示にして、JavaScriptで時間、分の合計を計算する方法
参考：https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/date_time.html
（２）JavaScriptで時刻表示の"04:30"を「分」に直して合計を計算する方法
参考：https://qiita.com/chokunari/items/9642741c6ce84ab5e133
（３）関連レコードではなくて「テーブル」に月ごとに毎日入力してもらって勤務時間の合計をSUMで計算する方法
参考：https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/date_time.html
などなど、他にもやり方は色々あるかと思いますが、アプリの作りをかえるとなると御社社内での相談が必要ですよね
また、
JavaScriptカスタマイズについてはこのdeveloper networkで聞かれるのが良いかと思いますが
どんな勤怠管理アプリを作ってるかをキンコミというコミュニティで問いかけてみられるのもいいかもしれません
標準機能（カスタマイズなし）でもここまで作れるよ～みたいなアイデアが発見できるかもしれません
↓もしよかったら活用されてみてくださいね！
https://kincom.cybozu.co.jp/
juridon様
ご返信ありがとうございます！
非常に分かりやすく教えていただきまして感動しています(´;ω;｀)
いただいたリンクもたくさん参考にしながら、
1つ1つ読み解いて、改善していきたいと思います！
本当にありがとうございました＾＾