背景・実現したいこと
ページネーション非表示のカスタマイズビューで小計欄を追加したいです。
参考にしたサイト②はページネーションを表示した場合のコードですので非表示の場合のコードが知りたいです。
参考にしたサイト
① 第10回 kintone REST APIを利用したレコード取得 – cybozu developer network
② kintone)レコード一覧画面 集計について – cybozu developer network
利用したソースコード
【HTML】(信号機アプリを使用)
<div id="my-customized-view">
<table border="1">
<thead>
<tr>
<th>レコード番号</th>
<th>信号機</th>
<th>作成日時</th>
<th>小計</th>
</tr>
</thead>
<tbody id="my-tbody">
</tbody>
<tfoot>
<tr>
<td id="goukei"></td>
</tr>
</tfoot>
</table>
【JS】
(() => {
'use strict';
kintone.events.on('app.record.index.show', (event) => {
if (event.viewName !== 'カスタム') {
return;
}
// リクエストパラメータ
const requestParam = {
'app': kintone.app.getId(),
'query': kintone.app.getQuery()
};
// カスタマイズビューにレコード表示
const myDisplayCustomizedView = records => {
if (records.length === 0) {
document.getElementById('my-customized-view').innerText = '表示するレコードがありません';
return;
}
const recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
const myRecordSpace = document.getElementById('my-tbody');
myRecordSpace.innerText = '';
for (let i = 0; i < records.length; i++) {
const record = records[i];
const row = myRecordSpace.insertRow(myRecordSpace.rows.length);
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const cell3 = row.insertCell(2);
const cell4 = row.insertCell(3);
const tmpA = document.createElement('a');
tmpA.href = recUrl + record.レコード番号.value;
tmpA.innerText = record.レコード番号.value;
cell1.appendChild(tmpA);
cell2.innerText = record.信号の色.value;
const createdAt = new Date(record.作成日時.value);
cell3.innerText = createdAt.toLocaleString();
cell4.innerText = record.小計.value;
}
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', requestParam, (resp) => {
// 取得レコード: resp.records
myDisplayCustomizedView(resp.records);
});
});
})();
何方かお教え頂けますでしょうか?
4件のコメント
第7回 カスタマイズビューを利用してみよう – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/202905604
「今回はページネーションを利用しますので、チェックが入っている事を確認してください。ここのチェックが外れていると、例えレコード件数が何件あろうともevent.recordsの戻りが空の配列になってしまいます。」
ご参考のURLを参照して、ステップ実行などで動作を確認してみてください。
kintoneカスタマイズの基本的なデバッグの流れを身につけよう – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/360038920252-kintone%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AE%E6%B5%81%E3%82%8C%E3%82%92%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%88%E3%81%86
harada 様
ご返信ありがとうございます。
質問内容のコードだと、動作します。
サイト②のコード
これを入れる場合、どこを修正していいかわからず、質問しました。
失礼しました。①のリンク先をよく読んでいませんでした。
やり方は様々有ると思います。
1)小計を合計する変数を作って普通に足す方法
2)提示されたコードを使う場合は、
の次ぐらいに
を挿入します。 event.records.reduce ではなく records.reduceになっていることを確認してください。
参考URLと構造が違うためです。改行は適当に追加しています。上でfor文があるので、reduceを無理に使う必要があるか疑問です。
harada 様
分かり難くて、申し訳ありません…
丁寧なご説明ありがとうございます。
教えて頂いたことを元に、色々試してみます。
心より感謝申し上げます。