Redmine: チケット一覧でカスタムフィールドの値に応じて行のフォントを太字に変える(View customize plugin)

カスタムフィールドの値に応じて行を装飾する方法について問い合わせをいただいたので、「カスタムフィールド1の値が'A'の場合には、行のフォントを太字に変える」をView customizeで行ってみます。

onozaty/redmine-view-customize - GitHub

チケットの優先度など、デフォルトで存在するフィールドについては、もとからclassが振られているのでCSSで装飾しやすいですが、カスタムフィールドだとclassが振られていないので、CSSだけではできません。そのためJavaScriptにて値を判定して、スタイルを設定することによって対応します。

View customize の設定内容

Path pattern

チケット一覧を対象にします。

/issues$

Code

Type:JavaScriptとして下記を設定します。cf_1の部分は、該当のカスタムフィールドに応じて変更してください。

$(function() {
  $('table.issues td.cf_1')
    .filter(function() {
      return $(this).text() == 'A';
    })
    .parent()
    .css('color', 'red');
});

redmine-view-customize-scripts/change_font_weight_by_custom_field_on_issue_list.js at master · onozaty/redmine-view-customize-scripts · GitHub

設定後のイメージ

f:id:onozaty:20170530000920p:plain

一覧に該当のカスタムフィールドが表示されていないと判定ができないので、ご注意ください。

その他

複数の属性を指定するような場合だと、JavaScriptだと面倒かと思います。そういった場合には、JavaScript側ではclassを追加するだけで、そのclassに応じたCSSを別途定義しておくような形がよいかと思います。