kViewer（新バージョン）のリストビューにて特定の値を持ったレコード行の背景色を設定したい

kintone カスタマイズ
1

実現したいこと

kViewer（新バージョン）にて以下条件で特定の値を持ったレコード行ごとに背景色を設定したいです。
Javascript初心者ながら試行錯誤して一番実現できそうと感じたコードを記載しておりますが、エラーが出てしまい行き詰っております。

正しい書き方をご教授いただきたく投稿いたしました。
宜しくお願いいたします。

###条件
①対象フィールド ”承認ステータス” の値が
“申請中” もしくは “承認” の場合のみレコード行全体に色を塗る
②リストビューは先頭（一番左）から
”承認ステータス”
”申請対象”
・・・ の順に並んでいる

エラーメッセージ

The ‘textprediction’ attribute will be removed in the future. Use the ‘writingsuggestions’ attribute instead.

※kviewerRows[i].style.backgroundColor～～ のところでエラーが発生しております

###参考サイト

実行したコード

(function() {

“use strict”;

kviewer.events.on(‘records.show’, function (state) {

let kviewerRows = document.querySelectorAll(`.kv-list-record`);

for(var i = 0; i < kviewerRows.length; i++) {
  let loopStatus = kviewerRows[i].innerText;
  let approvalStatus = loopStatus.substring(7, loopStatus.indexOf("申請対象"));

    if (approvalStatus == "申請中") {
      kviewerRows[i].style.backgroundColor = "rgba(255, 255, 153)";

    } else if (approvalStatus == "承認") {
      kviewerRows[i].style.backgroundColor = "rgba(192, 192, 192)";

    } else {
      kviewerRows[i].style.backgroundColor = "";

    } 
};

return state;

});

})();

2 
kviewer.events.on('records.show', (context) => {
    // レコードごとに処理を実行
    for (const record of context.getRecordElements()) {
        // レコード内の指定されたフィールド要素を取得
        const fields = record.querySelectorAll('[data-field-code]');
        for (const field of fields) {
            if (field.dataset.fieldCode === "申請対象") {
                // 処理を実行
                if (field.innerText === "申請中") {
                    record.style.backgroundColor = "rgba(255, 255, 153)"; // 黄色（申請中の強調表示）
                } else if (field.innerText === "承認") {
                    record.style.backgroundColor = "rgba(192, 192, 192)"; // グレー（承認済みの区別）
                }
            }
        }
    }
});

The ‘textprediction’ attribute will be removed in the future. Use the ‘writingsuggestions’ attribute instead.
というエラーは別の部分ではないでしょうか・

2 Likes
3

aaaさん

早急にご教示いただきありがとうございます。
頂いたコードで実現できました。

エラーはEdgeブラウザの『DevTools』で
kviewerRows[i].style.backgroundColor～～の箇所を指されていましたが、
aaaさんのコードにより解消しております。

当初のコードからすっきりとした正しい書き方を確認でき、
とても勉強になります。

頂いたコードを応用して様々なカスタマイズに挑戦しようと思います。
誠にありがとうございました。

1 Like
4

エラーがでていなかったので気にしていなかったのですが
背景色の指定部分 rgba()となっていながらrgbの値は指定して、aの部分を指定していませんでした。
rgb()に変更します。

kviewer.events.on('records.show', (context) => {
    // レコードごとに処理を実行
    for (const record of context.getRecordElements()) {
        // レコード内の指定されたフィールド要素を取得
        const fields = record.querySelectorAll('[data-field-code]');
        for (const field of fields) {
            if (field.dataset.fieldCode === "申請対象") {
                // 処理を実行
                if (field.innerText === "申請中") {
                    record.style.backgroundColor = "rgb(255, 255, 153)"; // 黄色（申請中の強調表示）
                } else if (field.innerText === "承認") {
                    record.style.backgroundColor = "rgb(192, 192, 192)"; // グレー（承認済みの区別）
                }
            }
        }
    }
});
5

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。