選択されたチケットテンプレートに合わせて表示項目を変更する

はじめに

ここ数カ月にredmineを使い始めて、少しずつカスタマイズすることが出てきたので、備忘用に残しておく。

• 「optgroup」が使われた場合、項目の値を取得する方法は「find("option:selected")」
• ViewCustomizePluginに「Type: JavaScript」って書いてあるけど、実際の記法はほぼ「jQuery」

前提条件

環境

• Redmine 3.4.11.stable
• view_customize 2.6.0
• redmine_issue_templates 0.2.2-dev

項目の内容

項目	形式	内容
selector	チケットテンプレート	hoge, piyo
issue_custom_field_values_1	カスタムフィールド	hoge
issue_custom_field_values_2	カスタムフィールド	piyo

サンプルコード

/*
サンプルチケット編集画面
Path pattern: /issues/new
挿入位置：チケット入力欄の下
Type: JavaScript
*/
$(function(){
	hideAll();
	const selector1="hoge";
	const selector2="piyo";
	var selVal='';
	$("#issue_template").change(function(){
		selVal = $('#issue_template').find("option:selected").val();
// 「項目名」を取得したい場合は「text」を使う
//		selVal = $('#issue_template').find("option:selected").text();
		if(selVal == selector1) {
			showSelector1();
		} else if(selVal == selector2) {
			showSelector2();
		} else {
			hideAll();
		}
	});
});

function hideAll() {
	$('#issue_custom_field_values_1').parent().hide();
	$('#issue_custom_field_values_2').parent().hide();
}
function showSelector1() {
	$('#issue_custom_field_values_1').parent().show();
	$('#issue_custom_field_values_2').parent().hide();
};  	
function showSelector2() {
	$('#issue_custom_field_values_1').parent().hide();
	$('#issue_custom_field_values_2').parent().show();
};

初期表示時は全カスタムフィールドを非表示化。
チケットテンプレートの選択肢に合わせて、カスタムフィールドを表示させる。
カスタムフィールドの項目が多くなった場合に備えて、処理は関数化した。

参考

• jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直近) の違い
  https://logicalerror.seesaa.net/article/422682236.html