レビュー投稿ギフト券等をプレゼント

サイトマップ

よくある質問

問い合わせ

TOP >案件リストの背景色を変更する

技術者情報 案件リストの背景色を変更する


機能概要


案件リストで、指定した項目の数値が指定値を上回る場合、背景色を変更します。
案件の背景色を変更することで、案件リストを確認する際、特定の案件が見分けやすくなります。
参考画像では、「過去クレーム数」が2以上の時は黄色、5以上の時は赤色に変更しています。
※指定する項目は数値型項目である前提です。
※スマートフォン版の画面は未対応です。
 
詳細については、以下の動画もご確認ください。

サンプルファイル構成


　

JSファイルの作成

必要な値の確認をします

　　 プラグインを作動させるシート上で、「右クリック＞検証」からデベロッパーツールを開きます。
　　 　　 セレクトアイコンをクリックします。
　　 　　 ①案件リスト画面で、指定する項目の数値にカーソルを合わせて項目に割り振られた値を確認します。
          ※「col_id_数値」を確認します。
　　　 参考画像では、「過去クレーム数」に「col_id_10162」が割り振られていることが確認できます。 　　　 　　　　　　
///////////////////////////////↓環境に合わせて変更するパラメーター///////////////////////////////

 //色分け判定に使用する項目のID
 let inputID = "col_id_10162";

//背景色を変更する条件①
let condition1 = 5;

//背景色を変更するクレーム数②
let condition2 = 2;

//条件①で変更する背景色
let bgColor1 = "#ffe5e5";

//条件②で変更する背景色
 let bgColor2 = "#ffffe5";
　
///////////////////////////////↑環境に合わせて変更するパラメーター///////////////////////////////

 $(document).ready(function(){

                        //色分け判定に使用する項目のリスト表示数を取得
　　                  let tdCount = $("td" + "." + inputID).length;
 
                        //案件リストの各行のHTML要素を取得
                        let trs = $("td" + "." + inputID).parent();

                        //色分け判定に使用する項目のHTML要素を取得
                        let tds = $("td" + "." + inputID);

                        //案件リストの表示データを1行ずつ確認
                       for (var i = 0 ; i<tdCount ; i++ ){
                                              var tdText = removeCommaCustom(tds[i].innerText);

                       //色分け判定項目が空欄であるかチェック。空欄でなければ背景色変更処理開始
　                    if(tdText){

　                                //条件①以上の数値が登録されていれば、背景色を変更
                                   if(tdText >= condition1){
                                                         trs[i].style.backgroundColor = bgColor1;

                                  //条件②以上の数値が登録されていれば、背景色を変更
                                  }else if(tdText >= condition2){
                                                        trs[i].style.backgroundColor = bgColor2;
                                 }

                       }

                }
 
 });

 //カンマを削除
 function removeCommaCustom(string) {
      let removed = string.replace(/,/g, '');
      return Number(parseInt(removed, 10));
 }

JSファイルのコードを変更して、JSの動作条件を指定します

　　　let inputIDの第一引数に、①で確認した数値を記載して、数値型項目を指定します。
　　　※サンプルでは、①で確認した「col_id_10162 」の値が記載されています。
　　　「過去クレーム数」の数値によってリストの背景色が変更されます。

　　　　　　　　　　　　　　　　let inputID = "col_id_10162";　　　　　　　　　　　　　　　　　

　　　let condition1の第一引数に、任意の数値を記載して、背景色を変更する条件を
        指定します。
　　　※サンプルでは、5が記載されています。
 　　　 「過去クレーム数」 が5以上の案件の背景色を変更します。

　　　　　　　　　　 　　　　　　　　let condition1 = 5;　　　　　　 　　　　　　　　　　　　　　　

　　　let condition2の第一引数に、任意の数値を記載して、背景色を変更する条件を指定します。
　　　※サンプルでは、2が記載されています。
 　　　 「過去クレーム数」 が2以上の案件の背景色を変更します。

　　　　　 　　　　　 　　　　　　　let condition2 = 2;　　　　　 　 　　 　　　　　　　　　　　　　

　　　let bgColor1の第一引数に、 let condition1で指定した条件の時に変更する背景色を指定します。
　　　※サンプルでは、#ffe5e5（赤色）が記載されています。
 　　　 「過去クレーム数」 が5以上の時に背景色が赤色に変更されます。

　　　　　　　　　　　 　　　　　　let bgColor1 = "#ffe5e5";　　　 　　　　　　　　　　　　　　　　

　　　let bgColor2の第一引数に、 let condition2で指定した条件の時に変更する背景色を指定します。
　　　※サンプルでは、 "#ffffe5 （黄色）が記載されています。
 　　　 「過去クレーム数」 が2以上の時に背景色が黄色に変更されます。

　　　　　　　　　　　　　　　　　let bgColor2 = "#ffffe5";　　　　　　　　　　　　　　　　　　　　

JSプラグインのアップロード

マニュフェストファイルと作成したJSファイルを圧縮します

　　作成したJSファイルとマニフェストファイルを選択いただき、
　　 「右クリック＞送る＞圧縮（zip形式）フォルダー」でファイル圧縮します。
　　 ※マニフェストファイルの名称は「manifest.json」としてください
　　

zipファイルを登録します

　　管理者画面から「システムの設定＞環境設定＞JSプラグイン」と画面遷移いただきます。
　　 【PC版】プラグイン一覧の新規登録ボタンから作成したzipファイルをeセールスマネージャーRemixに
　　登録します。