Redmine에서 필요 여부 풀다운이 필요한 경우에만 입력할 수 있는 항목을 표시한다(아니면 표시하지 않음)

소개



Redmine.tokyo 제16회 공부회 그리고, 「유저 요구에 응하는 ViewCustomize 활용 사례」의 강연을 했는데, 이하와 같은 요망을 받았습니다.

Redmine에서 입력 필드가 너무 많기 때문에 필요 여부 풀다운 → 필요한 경우에만 후속 입력란 표시 같은 것을 검토 중입니다. view customize plugin으로 하고 있는 것 같아서 가르쳐 주세요. 구체적으로 코드를 원합니다!

트위터에서 받은 메시지

발표한 사례의 코드를 그대로 건네주는 것은, 환경 의존도 있어 어렵습니다만, 이것을 실현하기 위한 간단한 샘플 코드를 소개합니다.

View customize 플러그인 을 사용하면 Redmine의 표시를 javascript(jQuery)로 제어할 수 있습니다. (onozaty씨, 언제나 신세를 지고 있습니다.감사합니다)

전제 조건



환경


  • Redmine 3.4.10.stable.18167
  • view_customize 플러그인 2.2.0

  • 극단적인 버전 의존 코드가 아니기 때문에 다른 버전에서도 아마 작동합니다.

    맞춤 입력란 설정




    ID
    이름
    형식
    비고


    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()를 취득하면, 라벨도 포함한

    태그를 얻을 수 있으므로, 그것을 show() 또는 hide() 로 표시/숨기 제어를 실시하고 있습니다.

  • 좋은 웹페이지 즐겨찾기