はじめに
先日書いたRedmineで要否プルダウンが要のときのみ入力できる項目を表示する（否のときは表示しない）からの発展で、いくつかのカスタムフィールドをグルーピングして見出しを入れる方法をご紹介します。
前提条件
環境
- Redmine 3.4.10.stable.18167
- view_customize プラグイン 2.2.0
極端なバージョン依存のコードではないので、その他のバージョンでもたぶん動作します。
カスタムフィールドの設定
| ＩＤ | 名称 | 形式 | 備考 |
|---|---|---|---|
| 2 | コメント | 長いテキスト | |
| 3 | 起票者 | ユーザー | |
| 4 | コメント回答 | 長いテキスト | |
| 5 | 回答者 | ユーザー | |
| これらのカスタムフィールドは、以下のサンプルコードで使う用に定義していますが、標準フィールドや任意のカスタムフィールドをグルーピングすることが可能です。 |
サンプルコード
/*
サンプルチケット編集画面
Path pattern: .*
挿入位置：チケット入力欄の下
Type: JavaScript
*/
if (!$('div#my_div1').length){ // 自分で定義する'my_div1'ブロックない場合
$('div#attributes').after( // 'div#attributes'の後ろに、'my_div1'ブロックを作成、その中身は以下のとおり
$('<div id="my_div1">').append( // 'my_div1'ブロックを作成
$('<fieldset id="my_fieldset1">').append( // 'fieldset#my_fieldset1'を作成
$('<legend>').text('起票者入力欄'), // 見出し「起票者入力欄」
$(':input#issue_custom_field_values_3').parent(), // カスタムフィールド3「起票者」
$(':input#issue_custom_field_values_2').parent() // カスタムフィールド2「コメント」
)
),
$('<div id="my_div2">').append( // 'my_div2'ブロックを作成
$('<fieldset id="my_fieldset2">').append( // 'fieldset#my_fieldset2'を作成
$('<legend>').text('回答者入力欄'), // 見出し「回答票者入力欄」
$(':input#issue_custom_field_values_5').parent(), // カスタムフィールド5「回答者」
$(':input#issue_custom_field_values_4').parent() // カスタムフィールド4「コメント回答」
)
)
);
}
結果
Redmineのチケット編集画面はこんな感じになりました。起票者入力欄、回答者入力欄が、本スクリプトでグルーピングしているところです。
解説
-
$('div#attributes').after()を使って、自分が作成したいブロックを挿入しています。ちなみに、$('div#all_attributes').after()としてもできそうな気がするのですが、画面が崩れてしまいうまくいきません。この記事を書くためにいろいろ実験をしたのですが、ここが一番ハマりました（汗） - グルーピングしたいフィールドを
$('<fieldset id="my_fieldset1">')のように作成して、そこに$('<legend>').text('起票者入力欄')のようにして見出しを入れます。ここでは、my_fieldset1に起票者入力欄、my_fieldset2に回答者入力欄の見出しをつけています。 - さらなる発展として、先日書いたRedmineで要否プルダウンが要のときのみ入力できる項目を表示する（否のときは表示しない）と組み合わせれば、グルーピングした領域をステータスや任意のプルダウンと連動させて表示／非表示を制御することも可能になります。