一覧表示で画面で自動でリロードしたいです。ただ、Web画面全体ではなく、レコード部分だけを更新したいです。
このような事は実現可能でしょうか。
利用方法としては、REST APIでkintoneアプリに通知し（こちらは実装済み）、その通知をアプリの一覧表示を自動更新して大画面のモニターに表示することを想定しています。
通常の一覧画面をレコードの部分だけ更新、というのは難しいので、
それをやるのであれば、カスタマイズビューを利用するのがいいと思います。
カスタマイズビューであればHTMLとJSを利用して好きに構築できますので、任意のタイミングでレコード表示部分のみ更新といったことも可能です。
（ただし構築の手間はもちろんかかりますね）
「いいね！」 1
muraさん
ご回答ありがとうございます。
カスタマイズビューで表の見せ方を変更できるのですね。勉強になります。
追加で質問になってしまいますが、作成したカスタマイズビューのみを自動更新するためには、どのようにすればよろしいのでしょうか。
もしサンプルコードなどありますと非常に助かります。厚かましいお願いで、すみません。
大まかに分けると手順2つありまして
- まずカスタマイズビューに一覧を作成する
標準の一覧をそのままカスタマイズビューに表示することはできませんので、そこから自作する必要があります - 自動更新にする
REST APIを使ってsetTimeout関数等を使って何秒かに一回データを取得するイメージです。
（不慣れであれば、上記それなりにコストはかかるかなぁとはおもいます。）
（サンプルコードも書くの大変ですので、まずはお試しになってわからないところに部分的であれば回答も付きやすいとおもいます）
Reactなどで部分的に書き換えたいということでしょうか？
以下のページでイメージがつかめると思います。
目指せ！JavaScriptカスタマイズ中級者（6） 〜React導入編〜 – cybozu developer network
下記はカスタムビューとJavaScriptのサンプルコードを作成してみました。
SetTimeout関数で全画面リロード（location.reload）の記載方法は分かるのですが、テーブルの部分のみをリロードする方法が分かりません。あともう一息な気もしています。
１．カスタムビュー
| タグID | エリア | ステータス | 更新日時 |
|---|
kintone.events.on('app.record.index.show', (event) => {
if (event.viewName !== 'カスタマイズビュー') {
return;
}
const records = event.records;
if (records.length === 0) {
document.getElementById('my-customized-view').innerText = '表示するレコードがありません';
return;
}
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);
cell1.innerText = record.tag_id.value;
cell2.innerText = record.area.value;
cell3.innerText = record.status_0.value;
cell4.innerText = record.update_0.value;
}
});
})();
ご回答ありがとうございます！
Reactなどを使う予定はございません。
今のところ、kintone＋JavaScripで対応を考えています。
setIntervalを使って、解決しました！ありがとうございました！
「いいね！」 1
ちなみにですが、一日あたりのAPIコール数は上限があるので、ゆるくてよければ、優しめな頻度で更新してあげてください！
また、可能であればsetIntervalを利用したあとのコードものせると、だれかの役に立つかもです。
「いいね！」 1
こちらsetIntervalで定期的にREST APIを叩いてデータを取得するJavaScriptです。
※{filed_codeN} のところに取得したいアプリのフィールドコードを入れる。
ソースの表示が途中でおかしくなっています。。。修正方法が分かりましたら修正いたします。
(() => {
'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 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);
cell1.innerText = record.{field_code1}.value;
cell2.innerText = record.{field_code2}.value;
}
}
//kintoneのAPIをreloadRecords関数に
function reloadRecords(){
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', requestParam, (resp) => {
// 取得レコード: resp.records
myDisplayCustomizedView(resp.records);
});
}
reloadRecords();
// 定期的に実行
setInterval(reloadRecords, 60000)
});
})();
「いいね！」 1
コードの上下を
` の3つ連続で挟みます。
「いいね！」 1
ありがとうございました！出来ました。
カスタマイズビューを作る上で全画面をリロードする方が簡単だったとおもうのですが、
リロードしたくないというのは、大画面でちらつくのを避けたいということだったのでしょうか？
ご質問ありがとうございます。
全画面でのリロードをしたくない理由。
こちらについて記載しておりませんでした。
”画面がちらつく”事で煩わしい、と言われていたのも理由の１つです。
また、ネットワーク環境が良くない場所ですと問題がありました。全画面リロードの場合、リロードのタイミングで通信断が発生すると、画面表示できなくなります。一度そうなると、通信が復旧しても、マニュアルで画面リロードが必要になります。その対策という事もありました。
「いいね！」 3
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。