レコード一覧とレコード詳細画面で条件書式を設定する
https://developer.cybozu.io/hc/ja/articles/360016096972
上記を参考に、優先度が「至急」となっていた場合に、一覧ページにて赤字&太字にするように設定したのですが、
一覧画面での編集直後('app.record.index.edit.submit.success')の時のみ、cssのstyleが反映されません。
リロードしたら問題はないのですが、どのようにすれば良いでしょうか?
何卒よろしくお願いいたします。
```JavaScript:
(function() {
'use strict';
const eventList = [
'app.record.index.edit.submit.success',
'app.record.index.show' //,
];
kintone.events.on(eventList, function(event) {
//変数定義
const redColor = '#E84C3D';
const priorityList = kintone.app.getFieldElements('priority');
console.log(priorityList);
//全優先度にstyle指定
for (let i = 0; i < priorityList.length; i++) {
priorityList[i].style.color = redColor;
priorityList[i].style.fontWeight = 'bold';
}
});
})();
```
6件のコメント
岡さん、こんにちは。プロジェクト・アスノートの松田です。
編集画面の保存成功後イベントですが、サーバ側へのデータ保存が成功したタイミングでイベントが走るため、
その後に行われる画面描画に対して、処理が間に合っていないためと思います。
対応策としては、処理を指定時間遅延させるような書き方をするという方法も考えられますが、
どのぐらいの時間かかるかというのは、ネットワークや端末側の環境の影響により異なってくるため、
現実的には、一覧画面の保存成功後イベントにおいては、処理後に画面リロードを行うという方法が
いいのかなと思います。
(Twitterで助言をいただけたみなさん、ありがとうございます)
松田さん、Twitterでもフォーラムでも、ご丁寧にお答えいただき、ありがとうございます。
皆さまにアドバイスいただいた通り試行錯誤しましたが、
event.typeで絞り込み、'app.record.index.edit.submit.success'の時のみリロードするようにし、
無事にstyleが反映し解決することができました。ありがとうございました。
```
(function() {
'use strict';
const eventList = [
'app.record.index.edit.submit.success',
'app.record.index.show',
/*'app.record.index.edit.submit',
'app.record.index.edit.change.priority',*/
];
kintone.events.on(eventList, function(event) {
//変数定義
const priorityList = kintone.app.getFieldElements('priority');
console.log(priorityList);
//全優先度にstyle指定
for (let i = 0; i < priorityList.length; i++) {
priorityList[i].style.color = '#E84C3D';
priorityList[i].style.fontWeight = 'bold';
}
if(event.type === 'app.record.index.edit.submit.success'){
window.location.reload(true);
window.onbeforeunload = null;
}
});
//詳細ページでも赤字に設定
kintone.events.on('app.record.detail.show', function(event){
var priorityData = kintone.app.record.getFieldElement('priority');
priorityData.style.color = '#E84C3D';
priorityData.style.fontWeight = 'bold';
});
})();
```
そこで、もう一点差し出がましくて質問させていただけないでしょうか。
リロードを差し込みますと、今度はデータベースへの書き換えのタイミングと合わないのか、「このサイトを再読込しますか?」とブラウザからダイアログが表示されてしまいます…。
こちらはJavaScriptのwindow.onbeforeunload = null; を使用することで実装を試みたのですが、
変化がありませんでした。。。
何度も申し訳ありませんが、ご教授いただけたら幸いです。
よろしくお願いいたします。
kintoneテンプレートもご参考にどぞー
(いつまでダウンロードできるかは不明です…。)
https://xfs.jp/SpUdGP
岡さんこんにちは
ジョイゾーの星野です。
横から失礼します。
もう解決済みかもしれませんが、今回のケースは待機系を使わなくても、
'app.record.index.edit.submit.success'の機能を利用すれば実現可能です。
index.edit.submit.successの後にindex.showが走らないため、更新がかからないのが問題ですが、
index.edit.submit.successのeventオブジェクトにurlというパラメータが設定可能です。
こちらに遷移したいURLを設定することで、'app.record.index.edit.submit.success'の後にそのページに遷移します。
そこを一覧に設定することで、kintoneの機能を使ったリロードが可能です。
kintone.events.on('app.record.index.edit.submit.success', function(event){
// 一覧のURL
event.url = 'https://[サブドメイン].cybozu.com/k/アプリ番号/'
return event;
});
待機系は便利ではありますが、制御が難しいのと、データ量やクライアントスペックによっては待機より動作速度が遅れる可能性があります。
可能であればkintoneが持ち合わせているAPIの利用をお勧めいたします。
参考のURLはこちらです。
一応参考に程度ですが、色を変えたいだけならこれでいけます。
久米さんの記載いただいているソースを元に少しだけ手を入れています
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on('app.record.index.edit.submit.success', function(event){
// 一覧のURL
event.url = 'https://[サブドメイン].cybozu.com/k/アプリ番号/'
return event;
});
kintone.events.on('app.record.index.show', function(event){
var records = event.records;
var redColor = '#E84C3D';
var priorityList = kintone.app.getFieldElements('優先度');
for (let i = 0; i < priorityList.length; i++) {
if (priorityList[i].innerText === '至急') {
priorityList[i].style.color = redColor;
priorityList[i].style.fontWeight = 'bold';
}
}
return event;
});
})(jQuery);
星野様
上記の件、無事実装できましたのでご報告いたします。
ありがとうございました!
サブドメインが変わっても使い回したく、urlの指定を event.url = location.href; にしてみましたが、
正常に動作しました。
お力添えいただけた松田さん久米さん星野さん他Twitterでコメントをいただいた多くの皆様、本当にありがとうございました!