新規投稿
フォローする

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

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

デモ

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

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

コード

JavaScript

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

・sample.js

(function() {
  "use strict";
  kintone.events.on([
    'app.record.index.show',
  ], function(event){
    var oldTotalRow = document.getElementsByClassName('total-row')[0];
    if(oldTotalRow) oldTotalRow.parentNode.removeChild(oldTotalRow);
    var client = new KintoneRestAPIClient();
    var table = 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){
      var properties = responses[0].properties;
      var records = responses[1];
      var totalRow = document.createElement('tr');
      totalRow.classList.add('total-row');
      var firstCell = document.createElement('td');
      firstCell.innerText = '計';
      totalRow.prepend(firstCell);
      var columnProperties = [].map.call(table.getElementsByClassName('recordlist-header-label-gaia'), function(label){
        return Object.values(properties).find(function(property){
          return property.label === label.innerText;
        });
      });
      var columnTotals = columnProperties.map(function(property){
        var totalCell = document.createElement('td');
        if(['NUMBER', 'CALC'].includes(property.type)){
          totalCell.innerText = records.reduce(function(sum, record){
            return sum + Number(record[property.code].value);
          }, 0).toLocaleString();
          totalCell.style.textAlign = 'right';
        }
        if(property.options){
          var options = Object.values(property.options).sort(function(a, b){
            if(a.index < b.index) return -1;
            if(a.index > b.index) return 1;
            return 0;
          }).map(function(option){
            return option.label;
          });
          var optionCounts = options.map(function(option){
            return records.reduce(function(count, record){
              var value = record[property.code].value;
              if(Array.isArray(value) && value.includes(option)) count++;
              if(!Array.isArray(value) && value === option) count++;
              return count;
            }, 0);
          });
          totalCell.innerText = options.map(function(option, index){
            return option + ':' + optionCounts[index] + '件';
          }).join(' | ');
        }
        totalRow.appendChild(totalCell);
        return '';
      });
      var lastCell = document.createElement('td');
      totalRow.appendChild(lastCell);
      table.getElementsByTagName('tbody')[0].prepend(totalRow);
    });
  });
})();

CSS

下記を読み込みます.

・sample.css

.total-row{
  background-color: #eff8fe;
}
.total-row td{
  border-right: 1px solid #e3e7e8;
  white-space: nowrap;
  padding: 14px 13px 14px 8px;
  overflow-x: scroll;
}
0

0件のコメント

サインインしてコメントを残してください。