kintoneでフィールドの合算値を表示させる方法

// kintoneカスタマイズ用JS
// 名称：汎用部分一致検索
// 機能：文字列フィールドすべてを検索します
// https://blog.winproject.jp/internet/kintone-get-total-specific-field/
// 2023/09/02,TT

// 設定
//  検索対象フィールド（検索対象に含めたいフィールドを記述します）※文字列フィールドのみ
const FieldCodes = [    'name',   // 商品名
                        '_cat',   // _商品種別（検索用）※自動入力
                    ]; 

// メイン
(function() {
    'use strict';

    // 一覧画面でのみ使用のためレコード編集画面等では非表示とする
    kintone.events.on([
        'app.record.detail.show',
        'app.record.create.show',
        'app.record.edit.show',
        'app.record.print.show',
      ], function(event){
        kintone.app.record.setFieldShown('_likesearch', false); // 検索フィールドは非表示
        return event;
    });

    // 検索窓
    kintone.events.on("app.record.index.show", function (event) {

      // GET引数に格納された直前の検索キーワードを取得して再表示します
      var result = {};
      
      // クエリから、URL固定部分(?query=)を無視して取り出します
      var query = window.location.search.substring(7);  
      
      // フィールドコード名と検索キーワードに分割します
      for(var i = 0;i < query.length;i++){
          var element = query[i].split('like');
          var param_field_code = encodeURIComponent(element[0]);
          var param_search_word = encodeURIComponent(element[1]);

          //空白スペースを取り除いて配列に格納します
          result[param_field_code.replace(/^\s+|\s+$/g, "")] = param_search_word.replace(/^[\s|\"]+|[\s|\"]+$/g, "");
      }

      // 検索キーワード
      var search_word = document.createElement('input');
      search_word.type = 'text';

      // 検索ボタン
      var search_button = document.createElement('input');
      search_button.type = 'submit';
      search_button.value = '検　索';
      search_button.onclick = function () {
          keyword_search();
      };

      // キーワード検索の実行
      function keyword_search(){
          var keyword = search_word.value;
          var str_query = "";

          if(keyword == ""){
            str_query = "";
        }else if(keyword != ""){
            if(FieldCodes.length > 0) {

                // 検索対象のフィールドを全て「or」で連結してURLクエリを作成します
                str_query = '?query=';
                FieldCodes.forEach(function( value ) {
                    str_query = str_query + value +' like "' + keyword + '"';
                    str_query = str_query + ' or ';
                });
                str_query = str_query.slice(0, -4);　// 最後尾の「or」を削除しています
            }
          }

          // 検索結果のURLへ
          document.location = location.origin + location.pathname + str_query;
      }

      // 検索窓表示
      var node_space = kintone.app.getHeaderMenuSpaceElement()
      for (var i = node_space.childNodes.length - 1; i >= 0; i--) {
          node_space.removeChild(node_space.childNodes[i]);
      }
      var label = document.createElement('label');
      label.appendChild(document.createTextNode('  '));  
      label.appendChild(search_word);
      label.appendChild(document.createTextNode('  '));    
      label.appendChild(search_button);
      kintone.app.getHeaderMenuSpaceElement().appendChild(label);
     
      return event;
  });

})();

/*
* kintoneカスタマイズ用CSS
* https://blog.winproject.jp/internet/kintone-get-total-specific-field/
* 2023/09/06,TT
*/

/*  検索窓用    */
.gaia-argoui-app-index-toolbar .kintone-app-headermenu-space label {
    border: 1px solid #3498db;
    border-radius: 0.5em;
    padding: 1em;
    color: #3498db;
}
.gaia-argoui-app-index-toolbar .kintone-app-headermenu-space label input[type=text] {
    width:10em;
}
.gaia-argoui-app-index-toolbar .gaia-argoui-app-viewtoggle,
.gaia-argoui-app-index-toolbar .gaia-argoui-app-filterbutton,
.gaia-argoui-app-index-toolbar .gaia-argoui-app-subtotalbutton {
    margin-bottom:1em;
}
.gaia-argoui-app-index-toolbar .gaia-argoui-app-subtotalbutton {
    margin-right:1em;
}

// kintoneカスタマイズ用JS
// 名称：合計値算出
// 機能：フィールドの合算値を表示します
// https://blog.winproject.jp/internet/kintone-get-total-specific-field/
// 2023/09/06,TT

(function() {
	"use strict";
	var getRecords = function(app, tmpRecords){
	var limit = 500;
	var tmpRecords = tmpRecords || [];

	return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
				app: app,
				query: kintone.app.getQueryCondition() + ' limit ' + limit +' offset ' + tmpRecords.length
			}).then(function(response){
			tmpRecords = tmpRecords.concat(response.records);
			return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
		});
	}
	kintone.events.on('app.record.index.show', function(event){
		getRecords(kintone.app.getId()).then(function(records) {

			var cnt = records.reduce(function(cnt, record) {				
				cnt = cnt + 1;
				return cnt;
			}, 0);

			var total = records.reduce(function(total, record) {				
				total = total + Number(record.price.value);	// price
				return total;
			}, 0);

			var html = "";
			html += '<div class="smart-chart">';
			html += '<table>';
			html += '<tr><td>件数</td><td>' + cnt.toLocaleString() + '件</td></tr>';
			html += '<tr><td>売上合計</td><td>¥' + total.toLocaleString() + '</td></tr>';
			html += '</table>';
			html += '</div>';

			kintone.app.getHeaderMenuSpaceElement().insertAdjacentHTML('beforeend', html);
		});
	});
})();

/* kintoneカスタマイズ用CSS
* 名称：合計値算出
* 機能：フィールドの合算値を表示します
* https://blog.winproject.jp/internet/kintone-get-total-specific-field/
* 2023/09/06,TT
*/

div.smart-chart {
	float:right;
	margin-left:1.5em;
	color:#3498db;
}
div.smart-chart table {
	border-radius:0.5em;
	border:1px solid #3498db;
	border-collapse:separate;
	border-spacing:1px;
}
div.smart-chart table th {
	line-height:1.5em;
	text-align:left;
	padding:0 0.5em;
}
div.smart-chart table td {
	line-height:1.5em;
	text-align:left;
	padding:0 0.5em;
}