Redmineで入力フィールドをグルーピングして見出しを入れる

6756 ワード
ViewCustomizePlugin Redmine JavaScript jQuery JavaScript テキストリンク

はじめに

先日書いた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で要否プルダウンが要のときのみ入力できる項目を表示する（否のときは表示しない）と組み合わせれば、グルーピングした領域をステータスや任意のプルダウンと連動させて表示／非表示を制御することも可能になります。