# 一覧画面でブルダウンで選択した条件で背景色を変更する

**URL:** <https://community.cybozu.dev/t/topic/8584>\
**Category:** kintone 開発相談\
**Created:** [2024 年 1 月 18 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/8584 "2024-01-18T04:11:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![n\_ura](https://avatars.discourse-cdn.com/v4/letter/n/bcef8e/32.png) [@n\_ura](https://community.cybozu.dev/u/n_ura)\
**Post date:** [2024 年 1 月 18 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/8584/1 "2024-01-18T04:11:48Z")

</div>

一覧画面でブルダウンで選択した条件で背景色を変更するプログラムを作りましたが、うまく動作しません

プルダウンの入力は複数あり、一覧上でAという文字を入力すると背景色がかわり、他のプルダウンでもAを入力すると同じ背景色になり、ガントチャートのようにしていきたいと考えています。  
プルダウンの入力候補はいまのところ2つで、今後状況よっては候補が増えたり、内容が変わる可能性があります。

他のトピックなどを参考にしてみましたが、なかなかうまくいかず相談させていただきました

入力方法はプルダウンで行っています。  
入力されているマス（セル）の要素の判別などが分からず相談した次第です

Chromeでエラーは表示されていませんが、判定がうまくできていないように思えます

以下のトピックを参考にしましたが、うまくいきませんでした。  
色々修正を繰り返して、以下のプログラムを掲載しました。

> [@条件に応じて一覧画面で表示されるレコードの背景色を変更する](https://community.cybozu.dev/t/topic/3496):
>
> レコード一覧の画面で、あるフィールド（チェックボックス）の値が”照合済”の場合に、レコードの背景色を変更するスクリプトを作成しましたが、動作しません。 以下のURLを参考しましたが、解決せずに相談をさせていただきました。 アドバイスいただけますと幸いです。 &nbsp; [https://developer.cybozu.io/hc/ja/community/posts/360010167423-%E…](https://developer.cybozu.io/hc/ja/community/posts/360010167423-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%89%B2%E5%A4%89%E6%9B%B4?input_string=%E6%9D%A1%E4%BB%B6%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B)

(function() {  
“use strict”;

kintone.events.on(‘app.record.index.show’, function(event) {  
// 特定の文字列  
var targetString = ‘判定する文字列’;  
console.log(“targetString =”,targetString);

// 特定の文字列の要素を指定  
var line = document.getElementsByClassName(“recordlist-cell-gaia”);

// 一覧の表示されているセルを取得  
var records = event.records;  
console.log(“records =”,records);

// セルの数だけループ  
for (var i = 0; i \< records.length; i++) {  
var record = records[i];  
console.log(“record =”,record);

```
// レコードのフィールドを取得
var fields = Object.keys(record);
console.log("fields =",fields);

// フィールドの数だけループ
for (var j = 0; j < fields.length; j++) {
  var field = fields[j];
  console.log("field =",field);

  // フィールドの値が特定の文字列と一致する場合、セルの背景色を変更
  if(records[i].value === targetString){
    line[i].style.backgroundColor = "#0000ff";	// 背景色
  }
}

```

}  
});  
})();

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2024 年 1 月 23 日午前 1:49 UTC](https://community.cybozu.dev/t/topic/8584/2 "2024-01-23T01:49:16Z")

</div>

> [@n\_ura](#):
>
> ```javascript
> // フィールドの値が特定の文字列と一致する場合、セルの背景色を変更
> if(records[i].value === targetString){
> line[i].style.backgroundColor = "#0000ff";	// 背景色
> }
> 
> ```

このif文の中に入ってきているかconsole.logを設置してみるとかいかがでしょうか👀？？

---

<div class="post-metadata">

**Author:** ![n\_ura](https://avatars.discourse-cdn.com/v4/letter/n/bcef8e/32.png) [@n\_ura](https://community.cybozu.dev/u/n_ura)\
**Post date:** [2024 年 1 月 23 日午前 2:36 UTC](https://community.cybozu.dev/t/topic/8584/3 "2024-01-23T02:36:38Z")

</div>

入れてみましたが、初めの判定する文字列のみコンソールで表示できました。  
if文の中のものは表示されていないので、if文の中に入っていないかもしれません。

他にプログラムの内容はありますでしょうか。

---

<div class="post-metadata">

**Author:** ![n\_ura](https://avatars.discourse-cdn.com/v4/letter/n/bcef8e/32.png) [@n\_ura](https://community.cybozu.dev/u/n_ura)\
**Post date:** [2024 年 1 月 25 日午前 12:46 UTC](https://community.cybozu.dev/t/topic/8584/4 "2024-01-25T00:46:03Z")

</div>

以下のプログラムで完成できました。  
現状特定の一覧で動作する仕様ですので、一覧によってはデベロッパーツールでエラーが表示されますが、問題ないとしました。

(function() {  
“use strict”;

```
kintone.events.on('app.record.index.show', function(event) {
    // 文字列と対応する背景色と文字色のリスト
    var textStyles = {
        '文字列1': { backgroundColor: 'yellow', textColor: 'red' },
        '文字列2': { backgroundColor: 'lightblue', textColor: 'darkgreen' },
        '文字列3': { backgroundColor: 'pink', textColor: 'purple' }
    };

    // 一覧の各行を取得
    var records = event.records;
    console.log("records =",records);

    // 各行に対して処理を実行
    for (var i = 0; i < records.length; i++) {
        var record = records[i];
        var recordFields = Object.keys(record);
        console.log("record =",records);
        console.log("recordFields =",recordFields);

        // 各フィールドに対して処理を実行
        recordFields.forEach(function(fieldCode) {
            // フィールドが存在し、値が文字列であるか確認
            if (record[fieldCode] && typeof record[fieldCode].value === 'string') {
                // 特定のフィールドの値を取得
                var fieldValue = record[fieldCode].value;
                console.log("fieldValue =",fieldValue);

                // 対応するスタイルが存在する場合は背景色と文字色を変更
                if (textStyles[fieldValue]) {
                    var style = textStyles[fieldValue];
                    console.log("style =",style);

                    // 背景色を変更するためのCSSスタイル
                    var customBackgroundColor = 'background-color: ' + style.backgroundColor + ';';
                    console.log("customBackgroundColor =",customBackgroundColor);

                    // 文字色を変更するためのCSSスタイル
                    var customTextColor = 'color: ' + style.textColor + ';';
                    console.log("customTextColor =",customTextColor);

                    // 背景色と文字色を変更したいセルにスタイルを適用
                    var cellElement = kintone.app.getFieldElements(fieldCode)[i];
                    console.log("cellElement =",cellElement);
                    cellElement.style = customBackgroundColor + customTextColor;
                }
            }
        });
    }

    return event;
});

```

})();

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 5 月 31 日午後 1:07 UTC](https://community.cybozu.dev/t/topic/8584/5 "2024-05-31T13:07:37Z")

</div>

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