レコード一覧画面の複数集計表示について

kintone カスタマイズ
1

Javascript初心者です。よろしくお願い致します。

レコード一覧画面に「売上合計金額・レコード件数・売上平均金額」を表示させたいです。

https://developer.cybozu.io/hc/ja/community/posts/360001961103-kintone-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2-%E9%9B%86%E8%A8%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 

過去の投稿で「売上合計金額」は表示できますが、並列で「レコード件数や平均売り金額」が表示できません。

JSを複数登録すると同一場所に重なってしい、一瞬見えるのですが消えてしまいます。

Javascriptの記述で複数表示する方法をご教授して頂けると助かります。

(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){
      kintone.app.getHeaderSpaceElement().innerHTML = '売上金額合計(円):' + records.reduce(function(previousValue, record){
        return previousValue + Number(record.売上金額.value);
      }, 0).toLocaleString();
    });
  });
})();

 

あと、平均（avg)や件数(count)を求める記述を教えて頂けるとありがたいです。

 

宜しくお願い致します。

2

＞過去の投稿で「売上合計金額」は表示できますが、並列で「レコード件数や平均売り金額」が表示できません。

JSを複数登録すると同一場所に重なってしい、一瞬見えるのですが消えてしまいます。

 

恐らく、kintone.app.getHeaderMenuSpaceElement().innerHTMLで上書きしているのが原因だと思います。

innerHTMLは追加していくappendChildなどと違い、中身のHTMLを上書きします。

 

これでどうでしょうか？

kintone.events.on('app.record.index.show', function(event){
getRecords(kintone.app.getId()).then(function(records){
var count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = "売上金額合計(円):" + total.toLocaleString() + "円" +
" レコード件数:" + count + "件" +
" 売上金額(平均)" + avg + "円";
    kintone.app.getHeaderMenuSpaceElement().innerHTML = html;
});
3

Ryokkeさん

早速のご返信ありがとうございます。

書き換えたコードでうまく表示されませんでした。

(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 count = records.length;
        var total = records.reduce(function(previousValue, record) {
            return previousValue + Number(record.売上金額.value);
        }, 0);
        var avg = total / count;
        var html = "売上金額合計(円):" + total.toLocaleString() +
                   " レコード件数:" + count +
                   " 売上金額(平均)" + avg;
      kintone.app.getHeaderSpaceElement().innerHTML = html;
      }, 0).toLocaleString();
    });
  });

不備な記述はありますでしょうか？

お手数をお掛け致しますが、宜しくお願い致します。

 

4

何かエラー等は出ていますでしょうか？

5

kintone.app.getHeaderSpaceElement().innerHTML = html;

の次の行の }, 0).toLocaleString(); ←は消してください。

 

それと最後の })(); ←が抜けています！

6

全部書くとこんな感じですね。

(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 count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = "売上金額合計(円):" + total.toLocaleString() +
" レコード件数:" + count +
" 売上金額(平均):" +Math.round(avg).toLocaleString();
kintone.app.getHeaderSpaceElement().innerHTML = html;
});
});
})();

 

7

Cnsoleには特に何もエラーはありません。

WTS_Extension [RUNTIME.ONMESSAGE][OP-4]: {“ERR”:503,“OP”:4,“STANDALONE”:0,“VER”:1}が表示されています。

エラーでしょうか？

8

上のコードをコピペして、エラーは改善されましたでしょうか？

 

9

Ryokke様

ご指導ありがとうございました。

表示されました。

最後に教えて頂きたいことで、平均値の小数点を切りたいのですが、ご教授お願い致します。

本当にありがとうございました。

10 
" 売上金額(平均):" + avg  
↓↓↓  
" 売上金額(平均):"+Math.round(avg).toLocaleString();

// 上記のようにすれば、問題ないと思います(^^)


// Math.round(数値)で、四捨五入ができます。
// toLocaleString()は桁区切りにします。
11

Ryokke様

本当にありがとうございました。無事表示されました。

今回は基フィールドが「売上金額」でしたが、基になるフィールドが二つになる場合は

下記のように記述すればいいのでしょうか？

vartotal = records.reduce(function(previousValue, record) {
returnpreviousValue +Number(record.売上金額.value);
},0);

vartotal 1= records.reduce(function(previousValue, record) {
returnpreviousValue +Number(record.予測金額.value);
},0);

追記で申し訳ありませんが、ご教授願えれば助かります。

宜しくお願い致します。

12

売上金額と予測金額の合計を別々で取られたいのであれば

それで大丈夫だと思います(^^)

13

Ryokke様

ありがとうございました。

今後ともご教授の程、宜しくお願い致します。

 

14

お世話になります。

一覧の表示はできましたが、表示項目に空白が無く見づらいです。

空白を挿入する記述を教えてください。検索で /t とか記述しましたができませんでした。

恐れ入りますが宜しくお願い致します。

(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 count = records.length;
          var total = records.reduce(function(previousValue, record) {
              return previousValue + Number(record.売上金額.value);
          }, 0);
          var total1 = records.reduce(function(previousValue, record) {
            return previousValue + Number(record.予測金額.value);
        }, 0);
          var html = "レコード件数:" + count + "件" +        ←←ここです。
                     "売上金額合計:" + total.toLocaleString() + "円" + 
                      "未使用先予測金額:" + total1.toLocaleString() + "円";
        kintone.app.getHeaderSpaceElement().innerHTML = html;
      });
    });
  })();

 

15

それでしたら、jsを以下のように変えましょう！

(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 count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = '<div class="header-box">'+
'<span>売上金額合計: ' + total.toLocaleString() + '円</span>' +
'<span>レコード件数: ' + count + '件</span>' +
'<span>売上金額平均: ' + Math.round(avg).toLocaleString() + '円</span>' +
'</div>';
kintone.app.getHeaderSpaceElement().innerHTML = html;
});
});
})();

 

そしてstyle.cssなどのファイル名で以下のcssを追加して下さい。

paddingの10pxの部分を大きくすれば、間隔も大きくなります。

太文字が嫌な場合はfont-weightの行を削除してください(^^)

@charset "UTF-8";
div.header-box {
display: inline-block;
}
div.header-box span {
display: inline-block;
font-size: 18px; /* 文字サイズ */
font-weight: 600; /* 文字の太さ */
padding: 0 10px; /* 横の間隔 */
}

 

16

Ryokke様

ご教授ありがとうございました。

見事に表示できました。楽しくハッピーです！

まだまだ未熟で理解できておりませんが、ありがとうございました。