レコード一覧画面で特定の文字色を変更したい

フィールドコード(審査結果)が否決の場合文字を赤色でかつ太字にしたいのですが、下記コードではうまく動作しません。

どこが間違っているのかどなたか教えていただけませんでしょうか。

  kintone.events.on(‘app.record.index.show’, (event) => {
    const elStatus = kintone.app.getFieldElements(‘審査結果’);

    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = bgColor;

      switch (record[‘審査結果’].value) {
        case ‘否決’:
          elStatus[i].style.color = ‘#ff0000’; // 文字色を赤にする
          break;
      }

      if (record.Urgent.value[0] === ‘否決’) {
        elUrgent[i].style.color = ‘#ff0000’;
        elUrgent[i].style.fontWeight = ‘bold’;
      }
    }
  });

エラーの確認をしましょう。

caught ReferenceError: bgColor is not defined

とでました。 bgColorが定義されていないというエラーでした。
elStatus[i].style.backgroundColor = bgColor;

elStatus[i].style.backgroundColor = ‘#ffffff’;
に変更したら、このエラーは消えます。

 

      if (record.Urgent.value[0] === ‘否決’) {
        elUrgent[i].style.color = ‘#ff0000’;
        elUrgent[i].style.fontWeight = ‘bold’;
      }

は、いったん削除してもいいのではないでしょうか?

harada 様

お世話になります、ありがとうございました。

仰る通り以下のようにしたところ、正常に動作致しました。

背景色を他のフィールドと同じようにすることは可能なのでしょうか(上から水色と白色の交互)

また赤字なった場合だけ太字にしたいのですが可能なのでしょうか

 

kintone.events.on(‘app.record.index.show’, (event) => {
    const elStatus = kintone.app.getFieldElements(‘審査結果’);

    for (let i = 0; i < elStatus.length; i++) {
      const record = event.records[i];
      elStatus[i].style.backgroundColor = ‘#ffffff’;

      switch (record[‘審査結果’].value) {
        case ‘否決’:
          elStatus[i].style.color = ‘#ff0000’; // 文字色を赤にする
          break;
      }
    }
  });

・背景色は指定している部分を外せばよいのではないでしょうか?

・太字はいったん外した

xxxx[i].style.fontWeight = ‘bold’;
みたいなのが参考になりませんか?

 

ChatGPTに「不必要なくらい説明のコメントをいれてください 」とお願いしたものです。

ご参考にして改造してみてください。

// このコードは、kintoneアプリケーションのレコード一覧画面において、
// 審査結果フィールドの表示をカスタマイズするためのイベントハンドラです。

// kintoneのイベントを監視するために、kintone.events.onメソッドを使用します。
kintone.events.on('app.record.index.show', (event) => {
    // 審査結果フィールドのDOM要素を取得します。
    const elStatus = kintone.app.getFieldElements('審査結果');

    // 審査結果フィールドのDOM要素の数だけループ処理を行います。
    for (let i = 0; i < elStatus.length; i++) {
        // イベントデータの中から、i番目のレコードを取得します。
        const record = event.records[i];
        // 審査結果フィールドの背景色を白に設定します。
        elStatus[i].style.backgroundColor = '#ffffff';

        // レコードの審査結果の値に応じて、スタイルを変更します。
        switch (record['審査結果'].value) {
            // 審査結果が「否決」の場合、文字色を赤に設定します。
            case '否決':
                elStatus[i].style.color = '#ff0000'; // 文字色を赤にする
                break;
        }
    }
});

 

kintoneカスタマイズの基本的なデバッグの流れを身につけよう – cybozu developer network
https://cybozudev.zendesk.com/hc/ja/articles/360038920252-kintone%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%AE%E6%B5%81%E3%82%8C%E3%82%92%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%82%88%E3%81%86

周りに質問できない環境の場合、このページを参照してカスタマイズを挑戦しないと時間を浪費します。

harada 様

見よう見まねでやってみたら無事できました。

ありがとうございました!

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