一覧画面に簡易な集計行を追加するサンプルを紹介します.
デモ
一覧画面に簡易な集計行を追加します.
「数値」および「計算」フィールドは合計値を表示します.
選択肢系フィールド(「ラジオボタン」,「チェックボックス」,「ドロップダウン」,「複数選択」)は,項目ごとの件数を表示します.
一覧の絞り込み条件を元にレコードを取得して集計しています.(ページネーションには関係なく全件取得します.)
※アプリ内に同じフィールド名のフィールドが複数ある場合は,正しく表示されない可能性があります.
※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;
}