一覧での保存のタイミングで色変更が反映されない

kintone カスタマイズ
1

一覧画面の行の色設定について、一覧の初期表示の際はうまく色の設定ができるのですが、一覧画面で編集をし、保存をしたタイミングで反映されません。

(function() {
 "use strict";

kintone.events.on(
[
'app.record.index.show', //レコード一覧画面の表示時
'app.record.index.edit.submit' //レコード一覧画面のインライン編集の保存実行前
],function(event){

 var bgColor
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];


  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffe44d';
//「完了状況」が「完了」の場合、橙よりの黄色（#ffe44d）を設定
    break;
   case "失注":
    bgColor = '#adadad';
//「完了状況」が「失注」の場合、薄い灰色（#d3d3d3）を設定
    break;
   default:
    bgColor = '#fff8dc';
//「完了状況」がそれ以外（「未完了」）の場合、ベージュ（#fff8dc）を設定
break;
   }
//行の色を変更する
let a = elStatus[i].parentNode.cells;
for (let j = 0; a.length > j; j++)
a[j].style.backgroundColor = bgColor;

  }
 });
})();

'app.record.index.edit.submit' //レコード一覧画面のインライン編集の保存実行前

上記がレコード一覧画面でインライン編集の保存ボタンをクリックしたあとに発生するイベントとのことですが、何か他に必要な処理があるのでしょうか。初心者のため初歩的な質問で申し訳ないのですが、具体的な記載方法を教えていただけますと幸いです。

「いいね！」 1
2

kobaharu様

‘app.record.index.edit.submit’ //レコード一覧画面のインライン編集の保存実行前

‘app.record.index.edit.submit.success’ //保存実行後に変更したらどうでしょうか。

3

ishikawayuito様

ありがとうございます。

記載不足ですみません。既に保存実行後でも試しているのですが、うまくいきませんでした。

編集→保存し、再読み込みをしないと反映されない状況です。

4

return eventの前にlocation reload;を記載したらどうでしょうか。

5

初歩的な質問ですみません。そもそもreturn eventの処理を書いていないことに気づき、入れてみたのですが、エラーとなり処理が動かなくなってしまいます。入れる場所はループ抜けた後で合っていますでしょうか。

6

この文ですと一番下から３行目になると思います。

for (let j = 0; a.length > j; j++)//ここに'{'がないのですが大丈夫でしょうか？
a[j].style.backgroundColor = bgColor;
  }
location.reload();
return event;
 });
})();
7

ありがとうございます。

ご指摘受けた通り、'{'を追加して、return event; とlocation reload;も追加して、以下のコードとなりました。

こちらを反映させたところ、行がチカチカ消えたり現れたりが続いてしまうのですが、括弧の位置が誤っていますよね…。

いろいろ試してみているものの、うまく動かない状況です。

(function() {
 "use strict";

 kintone.events.on(
 [
 'app.record.index.show', //レコード一覧画面の表示時
 'app.record.index.edit.submit.success' //保存実行後
 ],function(event){

 var bgColor
 var elStatus = kintone.app.getFieldElements('完了状況');

 for (var i = 0; i < elStatus.length; i++) {
  var record = event.records[i];


  switch (record['完了状況']['value']) {
   case "完了":
    bgColor = '#ffe44d';
   //「完了状況」が「完了」の場合、橙よりの黄色（#ffe44d）を設定
    break;
   case "失注":
    bgColor = '#adadad';
  //「完了状況」が「失注」の場合、薄い灰色（#d3d3d3）を設定
    break;
   default:
    bgColor = '#fff8dc';
  //「完了状況」がそれ以外（「未完了」）の場合、ベージュ（#fff8dc）を設定
    break;
   }
 //行の色を変更する
  let a = elStatus[i].parentNode.cells;
  for (let j = 0; a.length > j; j++){
   a[j].style.backgroundColor = bgColor;
  }
 }
 location.reload();
 return event;
 });
})();
8

すみません。行がチカチカしてしまうのは一覧画面初期表示の際にも画面のリロードを行ってしまっているのが原因だと考えられます。

9

イベント処理を分けて、保存実行後のみlocation.reload();を実行するように変更したのですが、やはり反映されておらず、調べてみるとUncaught TypeError: Cannot read properties of undefined (reading ‘0’)というエラーが出ている状況です。

自分でもう少し調べてみます。いろいろとご親切に教えていただきありがとうございました。

10

自分で調べると言っておきながらすみません。

もしご存じだったら教えていただきたいのですが、保存実行後の処理の際はループで全行の色を設定していくというよりかは、その編集をした行のみの色を設定するようにしないと動かないのでしょうか。

 

  var record = event.records[i];

でエラーが出ているのですが…。

11

自分も調べて分かったことなのですが、

一覧画面初期表示ですとevent.records[i]で大丈夫なのですが、

一覧画面保存実行後ですとevent.recordsはeventにはなく、event.recordで値をとり

編集した行のみしか値が取れていませんね。

なので解決策としてあっているかわかりませんが、、、

'app.record.index.show’で行の色設定を行うjavascriptを記入(index.edit.submit.successは削除)

別functionで 'indes.edit.submit.success’が行われた場合はlocation reloadでどうでしょうか。

説明としましては一覧画面で保存を行った際に画面のリロード

リロードされると一覧画面初期表示のeventが走るのでそこで行の色設定といった感じです。

 

12

そういうことだったんですね。

教えていただいた通りの処理に変更し、無事一覧画面で編集後にも色変更が反映されました。

本当に感謝です！長々とありがとうございました。

13

自分も知識不足で曖昧な回答を続けてしまい申し訳ございません。

勉強になりました。お役に立ててよかったです！！