レコード一覧画面　レコード色変更

kintone カスタマイズ
1

いつもお世話になっております。

下記サイトの改良版を作成しています。

https://developer.cybozu.io/hc/ja/articles/202341944-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E3%81%A8%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%A7%E6%9D%A1%E4%BB%B6%E6%9B%B8%E5%BC%8F%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B

 

例えば、至急が「至急」であればステータスが「未着手」でも「処理中」であってもレコード一行の色変更(青色)を行うにはどうすればよろしいでしょうか？

また、レコード編集で「至急」がなくなった際に、色を元の色に変更するにはどうすればいいでしょうか？

ご教示宜しくお願い致します。

 

 

2

きんとねさん。

レコード一行の色を変えるためには

DOM を操作してまるごと変えないといけないですね。

一覧表示画面ならば

record の数と DOM でとった行の数が一緒なので

DOM でも record でもいいので for文 で回数分回して

if文で至急フィールドの中身を確認し、クラスの backgroundColor を指定してあげれば行けます。

例

// レコード一行のクラス
var line = document.getElementsByClassName("recordlist-row-gaia");

for(var i = 0; i < line.length; i++) {
    if(event.records[i].Urgent.value === "至急") {
        line[i].style.backgroundColor = "#0000ff";
    }
}

一覧画面で編集した場合は

レコードId を eventオブジェクト と DOM でそれぞれとり

編集した時の レコードID が一緒の時という条件分岐で進めます。

また、DOM でレコードID を取得した場合後ろに改行コードが入っているので、取り除かなければなりません。

至急ではなくなった場合ですが、その時は、行が奇数番目にあるか、偶数番目にあるかで判断させましょう。

例

// レコードID取得
var recordId = event.recordId;

// レコード番号フィールドの DOM を取得
var number_area = document.getElementsByClassName("recordlist-record_id-gaia");

// 1行取得
var line = document.getElementsByClassName("recordlist-row-gaia");

for(var i = 0; i < line.length; i++) {
//レコードIDを DOM で取得
var number = number_area[i].children[0].innerText;

// 改行コードが入ってるので削除
number = number.slice(0, -1);

// 編集したレコードの ID が一緒の時条件に応じて背景色を変更
if(recordId === number) {
if(event.record.Urgent.value === "至急") {

line[i].style.backgroundColor = "#0000ff";

// 至急じゃないかつ列が奇数番目にある時
} else if(event.record.Urgent.value !== "至急" && i % 2 === 1) {
line[i].style.backgroundColor = "#fff";
// 至急じゃないかつ列が偶数番目にある時
} else if(event.record.Urgent.value !== "至急" && i % 2 === 0) {
line[i].style.backgroundColor = "#f5f5f5";
}
}
}

こちらの例は

app.record.index.edit.submit.success でも app.record.index.edit.submit でも

どちらでも通るのですが、app.record.index.edit.submit.success でやる場合

location.reload() を使い、ページを強制的に再読み込みさせるという手もあります。

正直なところ、DOM をいじりまくってるので こちらの方がおすすめです。