ドロップダウンの内容に応じて色を変える

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

表題の件ですが、ドロップダウン(状況)の内容に応じて色を変えたいのですが、状況が「完了」の場合には赤になるのですが、状況が「確認中」の場合に色が青くなりません。

どなたかご教授いただけませんでしょうか。

よろしくお願いします。

// このコードは、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];

   // レコードの状況の値に応じて、スタイルを変更します。
  switch (record['状況'].value) {
        // 状況が「完了」の場合、文字色を赤に設定します。
        case '完了':
            elStatus[i].style.color = '#ff0000'; // 文字色を赤にする
            elStatus[i].style.fontWeight = 'bold';
        break; 
  switch (record['状況'].value) {	
        // 状況が「確認中」の場合、文字色を赤に設定します。
        case '確認中':
            elStatus[i].style.color = '#0000ff'; // 文字色を青にする
            elStatus[i].style.fontWeight = 'bold';
      break;
    }
  
    }
}

})

JFJFさん

こんにちは、内容が気になりましたので回答させていただきますね。
コードをみてみると、一回目のswitch文で状況フィールドの値が完了かどうか見ていて、完了だと文字色を赤色にして、状況が完了じゃなければ **break;**しているので、switch文が終了しまって次の処理に移ってないのだと思われます。

恐らく下記のような形にすれば、思っていたことができるかもしれませんのでよければお試しくださいね!

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];

   switch (record['状況'].value) {
         // 状況が「完了」の場合、文字色を赤に設定します。
         case '完了':
             elStatus[i].style.color = '#ff0000'; // 文字色を赤にする
             elStatus[i].style.fontWeight = 'bold';
             break; 
         case '確認中':
             elStatus[i].style.color = '#0000ff'; // 文字色を青にする
             elStatus[i].style.fontWeight = 'bold';
             break;
         default:
              //デフォルトで何も無しにも判断できるようにしております。
              //ちなみにdefaultは無しでも何も処理を書かなくても大丈夫です。
              console.log("無し");
     }
 }
})
2 Likes

Yuki_Minamitani 様

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

早々にご回答いただきましてありがとうございました。

とても助かりました。

無事に動作(青くなりました。)致しました。

今後ともよろしくお願い致します。

1 Like

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