一覧画面に簡易な集計行を追加する

一覧画面に簡易な集計行を追加するサンプルを紹介します.

デモ

一覧画面に簡易な集計行を追加します.
「数値」および「計算」フィールドは合計値を表示します.
選択肢系フィールド(「ラジオボタン」,「チェックボックス」,「ドロップダウン」,「複数選択」)は,項目ごとの件数を表示します.
一覧の絞り込み条件を元にレコードを取得して集計しています.(ページネーションには関係なく全件取得します.)

※アプリ内に同じフィールド名のフィールドが複数ある場合は,正しく表示されない可能性があります.
※kintoneの仕様変更により動作しなくなる可能性があります.

コード

JavaScript

下記を順に読み込みます.

・sample.js

(function(){"use strict";kintone.events.on(['app.record.index.show',],function(event){varoldTotalRow=document.getElementsByClassName('total-row')[0];if(oldTotalRow)oldTotalRow.parentNode.removeChild(oldTotalRow);varclient=newKintoneRestAPIClient();vartable=document.getElementsByClassName('recordlist-gaia')[0];kintone.Promise.all([client.app.getFormFields({app:kintone.app.getId()}),client.record.getAllRecordsWithCursor({app:kintone.app.getId(),query:kintone.app.getQueryCondition()}),]).then(function(responses){varproperties=responses[0].properties;varrecords=responses[1];vartotalRow=document.createElement('tr');totalRow.classList.add('total-row');varfirstCell=document.createElement('td');firstCell.innerText='計';totalRow.prepend(firstCell);varcolumnProperties=[].map.call(table.getElementsByClassName('recordlist-header-label-gaia'),function(label){returnObject.values(properties).find(function(property){returnproperty.label===label.innerText;});});varcolumnTotals=columnProperties.map(function(property){vartotalCell=document.createElement('td');if(['NUMBER','CALC'].includes(property.type)){totalCell.innerText=records.reduce(function(sum,record){returnsum+Number(record[property.code].value);},0).toLocaleString();totalCell.style.textAlign='right';}if(property.options){varoptions=Object.values(property.options).sort(function(a,b){if(a.index\<b.index)return-1;if(a.index\>b.index)return1;return0;}).map(function(option){returnoption.label;});varoptionCounts=options.map(function(option){returnrecords.reduce(function(count,record){varvalue=record[property.code].value;if(Array.isArray(value)&&value.includes(option))count++;if(!Array.isArray(value)&&value===option)count++;returncount;},0);});totalCell.innerText=options.map(function(option,index){returnoption+':'+optionCounts[index]+'件';}).join(' | ');}totalRow.appendChild(totalCell);return'';});varlastCell=document.createElement('td');totalRow.appendChild(lastCell);table.getElementsByTagName('tbody')[0].prepend(totalRow);});});})();

CSS

下記を読み込みます.

・sample.css

.total-row{background-color:#eff8fe;
}
.total-rowtd{border-right:1pxsolid#e3e7e8;white-space: nowrap;padding:14px13px14px8px;overflow-x: scroll;
}

コメント失礼いたします。

一覧集計大変参考になりました。ありがとうございます。

時間の場合は◯時間◯分のように時間の合計を表示したいのですが、現在NaNになってしまいます。

ご存知でしたら、ご教授願います。

江田篤史 様

いつも業務向上改善につながる投稿ありがとうございます。
こちらのサンプルからレコード一覧に集計値を表示することができました。
本当にありがとうございます。

2点質問させていただきます。
1点目は、集計値が小数点ありで表示されるため、小数点第一位で四捨五入表示したいです。
Math.roundをtoLocaleStringの前に配置するのかどうかと、引数指定が不明です。

2点目は、consoleに以下のエラーが表示されますが、解決方法が分かりません。

顧客名(文字列フィールド)から関連レコードを表示して、対象の項目を集計をするレコードです。

初歩的なことをお伺いしているかとは存じますが、ご教授いただければ幸いです。
何卒よろしくお願い申し上げます。

一覧集計行を固定表示に出来ないでしょうか?

ご教示お願いいたします。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。