カスタマイズビューで値がマイナスの場合、文字色を赤に表示させたい

kintone カスタマイズ
1

お世話になっております。

第7回 カスタマイズビューを利用してみよう – cybozu developer network

こちらのコードで値が－の場合、赤色で表示させたいのですが、コードの書き方と書く場所がわかりません。

何方かお教え頂けますでしょうか？

宜しくお願い致します。

2

一つ前の記事を参考にするのはどうでしょうか？

第5回 レコードの値を取得してみよう(一覧画面編) – cybozu developer network
https://developer.cybozu.io/hc/ja/articles/202161864

if(color==='赤'){  
 part.style.fontWeight='bold';  
 part.style.color='#ffffff';  
 part.style.backgroundColor='#ff0000';  
}elseif(color==='青'){

の部分をcolorの部分に 数値が入って、それが 0より大きいかどうかを考えればよいと思います。

3

ご返信ありがとうございます。

試しに、カスタマイズビューのJSファイルに上のコードを入れてみました。

ですが、反映されませんでした。

書き方に問題があるのでしょうか？

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewName !== 'カスタム') {
      return;
    }

    const records = event.records;
    if (records.length === 0) {
      document.getElementById('my-customized-view').innerText = '表示するレコードがありません';
      return;
    }

    const recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
    const myRecordSpace = document.getElementById('my-tbody');
    myRecordSpace.innerText = '';

    for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = myRecordSpace.insertRow(myRecordSpace.rows.length);
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);

      const tmpA = document.createElement('a');
      tmpA.href = recUrl + record.レコード番号.value;
      tmpA.innerText = record.レコード番号.value;
      cell1.appendChild(tmpA);

      cell2.innerText = record.信号の色.value;

      const createdAt = new Date(record.作成日時.value);
      cell3.innerText = createdAt.toLocaleString();
    }
    
    if (!event.size) {
      return;
    }

    
    const signalColorParts = kintone.app.getFieldElements('信号の色');
    for (let i = 0; i < records.length; i++) {
      // 値の取得
      const color = records[i].信号の色.value;
    
      // DOM要素の取得
      const part = signalColorParts[i];

      // 値ごとに表示分け
      if (color === '赤') {
        part.style.fontWeight = 'bold';
        part.style.color = '#ffffff';
        part.style.backgroundColor = '#ff0000';
} 
else if (color === '青') {
        part.style.fontWeight = 'bold';
        part.style.color = '#ffffff';
        part.style.backgroundColor = '#0000ff';
} else if (color === '黄') {
        part.style.fontWeight = 'bold';
        part.style.color = '#ffffff';
        part.style.backgroundColor = '#ffd700';
      }
      
    }
  
  });
})();
4

どのようなカスタマイズをされようとしているのかわからないですが、質問の内容と貼り付けていただいたコードには大きな隔たりがあるように思えます。

ご参考のURLを参照して、ステップ実行などで動作を確認してみてください。

kintoneカスタマイズの基本的なデバッグの流れを身につけよう – cybozu developer network
https://developer.cybozu.io/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

5

ご返信ありがとうございます。

カスタマイズビューでマイナスの値がある場合、赤色で表示させることが本来の目的です。

第5回 レコードの値を取得してみよう(一覧画面編) に記載してあるコードは、カスタマイズなしの一覧でのコードかと思われます。

ですので、試しにカスタマイズビューで反映させる場合、赤＝赤文字等ができるか確認をするため上のコードを作成しました。

6

色々調べましたら、無事解決しました。

謎の質問をしてしまい、申し訳ありませんでした…

お忙しい中、ご教授下さり大変ありがとうございました。

7

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