Redmineで要否プルダウンが要のときのみ入力できる項目を表示する（否のときは表示しない）

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

はじめに

Redmine.tokyo 第16回勉強会で、「ユーザ要望に応えるViewCustomize活用事例」の講演をしたところ、以下のようなご要望をいただきました。

Redmine で入力フィールドが多すぎるので 要否プルダウン→要の場合のみ後続の入力欄表示みたいなことを検討中です。 view customize plugin でやってるようなので教えてください。 具体的にはコードがほしいです！

twitterでいただいたメッセージ

発表した事例のコードをそのままお渡しすることは、環境依存もあり難しいのですが、これを実現するための簡単なサンプルコードをご紹介します。

View customizeプラグインを使用すれば、Redmineの表示はjavascript(jQuery)で制御することができます。(onozatyさん、いつもお世話になっております。ありがとうございます）

前提条件

環境

  • Redmine 3.4.10.stable.18167
  • view_customize プラグイン 2.2.0

極端なバージョン依存のコードではないので、その他のバージョンでもたぶん動作します。

カスタムフィールドの設定

ＩＤ 名称 形式 備考
1 要否 リスト 選択肢は「要」「否」のいずれか（必須）
2 コメント 長いテキスト （この記事でのサンプルです）項目名、形式は任意です。

サンプルコード

/*
サンプルチケット編集画面
Path pattern: .*
挿入位置：チケット入力欄の下
Type: JavaScript
*/

if ($('body').hasClass('project-sample')){

    function view_change(){                                         // 描画関数の定義
        if ($(':input#issue_custom_field_values_1').val() == "否" ) {  // 要否フィールドが「否」の場合
            $(":input#issue_custom_field_values_2").parent().hide();    // コメントエリアを非表示にする
        } else {                                                        // そうでない場合
            $(":input#issue_custom_field_values_2").parent().show();    // コメントエリアを表示にする
        }
        console.log($(this).val()); 
    }

    $(':input#issue_custom_field_values_1').change(function(){          // 要否フィールドのチェンジイベントの時描画関数を実行する
        view_change();
    });

    view_change();                                                      // 初期表示のときも描画関数を実行する
}

結果

  • 要否のフィールドで「否」を選択した場合

  • 要否のフィールドで「要」を選択した場合

解説

  • 要否のカラムの値に応じて、コメントフィールドを表示したり非表示したりする関数(view_change)を作成しています。
  • jQueryのchangeイベント発生時、および初期表示時に、上記関数を実行しています。
  • 任意のカスタムクエリの入力項目は、jQueryの表現で、 $(":input#issue_custom_field_values_2") のように指定すればオブジェクトを取得できます。そのオブジェクトから見て、 parent() を取得すれば、ラベルも含めた<p>タグが得られますので、それをshow()またはhide()で表示／非表示制御を行っています。