Required fields BugMonkey customization

2012-09-26T15:02:36Z

I bet it wouldn't be hard to create a BugMonkey customization to require fields values before submitting a case...

Answer by adambox for Required fields BugMonkey customization

2012-09-26T15:05:50Z

You'd be right(, self)! I created a custom field called "Found In". When I view the source of the new case page, I can see that Custom Fields's internal unique name for it is "foundxinxg5c". I put that value in my code here to create one required field. I also require the case title and a description (the main text field). On all types of case edits where the fields are available, they are required to have a value. If they don't, each empty one is highlighted in red, the OK button is disabled with a tooltip instructing the user to complete the fields.

name:        Required fields
description: Disables the OK button if certain fields do not have values
author:      Adam Wishneusky
version:     1.0.0.0
minApi:      1.0

js: 

// required: idBugTitleEdit, foundxinxg5c, sEventEdit

window.disableSubmit = function() {
  $('#Button_OKEdit').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
  $('#Button_Resolve').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
  $('#Button_ResolveAndClose').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
}

window.enableSubmit = function() {
  $('#Button_OKEdit').removeAttr("disabled").removeAttr("title");
  $('#Button_Resolve').removeAttr("disabled").removeAttr("title");
  $('#Button_ResolveAndClose').removeAttr("disabled").removeAttr("title");
}

window.checkAllFields = function() {
    if ((!$('#idBugTitleEdit').length || $('#idBugTitleEdit').val().length > 0) &&
        (!$('#foundxinxg5c').length || $('#foundxinxg5c').val().length > 0) &&
        (!$('#sEventEdit').length || $('#sEventEdit').val().length > 0)) {
        enableSubmit();
    }
}

window.setEnabledByContent = function() {
  if (this.value.length > 0) {
    $(this).removeClass("requiredfield");
    checkAllFields();
  }
  else {
    $(this).addClass("requiredfield");
    disableSubmit();
  }
}

$(function(){

    // if we're not on the case page, don't do anything
    if (!$('#bugviewContainer').length) return;

    var myFunction = function(sCommand) {
        // don't do anything when viewing a case
        if (sCommand == 'load' || sCommand == 'view') {
            return;
        }
        // if any field is present, disable it if it's empty and bind to the keyup event
        if ($('#idBugTitleEdit').length) {
            if ($('#idBugTitleEdit').val().length < 1) {
                $('#idBugTitleEdit').addClass("requiredfield");
                disableSubmit();
            }
            $('#idBugTitleEdit').keyup(setEnabledByContent);
        }
        if ($('#foundxinxg5c').length) {
            if ($('#foundxinxg5c').val().length < 1) {
                $('#foundxinxg5c').addClass("requiredfield");
                disableSubmit();
            }
            $('#foundxinxg5c').keyup(setEnabledByContent);
        }
        if ($('#sEventEdit').length) {
            if ($('#sEventEdit').val().length < 1) {
                $('#sEventEdit').addClass("requiredfield");
                disableSubmit();
            }
            $('#sEventEdit').keyup(setEnabledByContent);
        }
    };

    // this runs on full page load and determines if this is a new case or just viewing a case
    if ($('#sEventEdit').length > 0)
    {
      myFunction('new');
    }
    else
    {
      myFunction('load');
    }

    // run it when the view changes and pass in the new view:
    $(window).on('BugViewChange', function(e, data) {
        myFunction(data.sCommand); 
    });

});

css: 
  .requiredfield {
    border: 1px solid red !important;
  }

This should really be generalized to have a list of field names in it, possibly by the label name, not the internal unique name. It can also be changed easily to require only when a new case is entered (in myFunction, only run if sCommand == 'new'). Feel free to edit this if you have the rep to, or add a comment / email us with suggestions.

Here is a version that disables a single drop-down type field:

name:        Require Drop-Down Set
description: Requires that a custom drop-down field is changed from the default "--" value
author:      Adam Wishneusky
version:     1.0.0.0
minApi:      1.0

js: 
// set the value here to the id of the <select> for the dropdown. there is a text field
// with an id idDropList_SOMETHING_oText but you want just the SOMETHING part. that's the id
// of the actual <select> tag just after it in the DOM

window.requiredDropDownID = "likeitshotq03";

window.disableSubmit = function() {
  $('#Button_OKEdit').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
  $('#Button_Resolve').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
  $('#Button_ResolveAndClose').attr("disabled","disabled").attr("title","please fill required fields to enable submission");
}

window.enableSubmit = function() {
  $('#Button_OKEdit').removeAttr("disabled").removeAttr("title");
  $('#Button_Resolve').removeAttr("disabled").removeAttr("title");
  $('#Button_ResolveAndClose').removeAttr("disabled").removeAttr("title");
}

window.checkAllFields = function() {
    // find the <select> tag
    var theField = $('#' + requiredDropDownID);
    // if the tag isn't on the page, or the value is NOT the default of "--", enable submit
    if (( theField.length == 0) || 
        ( $('#' + requiredDropDownID + ' option:selected').text() != '--' )) {
        theField.prev().find('input[id*="' + requiredDropDownID + '"]').removeClass("requiredfield");
        enableSubmit();
    }
    // otherwise, disable
    else {
        theField.prev().find('input[id*="' + requiredDropDownID + '"]').addClass("requiredfield");
        disableSubmit();
    }
}

$(function(){
    // if we're not on the case page, don't do anything
    if (!$('#bugviewContainer').length) return;

    var myFunction = function(sCommand) {
        // don't do anything when viewing a case
        if (sCommand == 'load' || sCommand == 'view') {
            return;
        }
        // run our check when the drop-down is changed
        $('#' + requiredDropDownID).change(checkAllFields);
        $('#' + requiredDropDownID).change();
    };

    // this runs on full page load and determines if this is a new case or just viewing a case
    if ($('#sEventEdit').length > 0)
    {
      myFunction('new');
    }
    else
    {
      myFunction('load');
    }

    // run it when the view changes and pass in the new view:
    $(window).on('BugViewChange', function(e, data) {
        myFunction(data.sCommand); 
    });
});

css: 
  .requiredfield {
    border: 1px solid red !important;
  }

Required fields BugMonkey customization - FogBugz Knowledge Exchange

Required fields BugMonkey customization

Answer by adambox for Required fields BugMonkey customization