Java Script to hide groups of fields

With version 3 of HR.Net (Yes, I know, there is version 4 out ages ago) Vizual gave ability to insert JavaScript into Screens and Workflows. And I have been using this ability rather a lot on screen.

Very often you need to prompt for different fields, depending on previous user selection. For example you can have group of radio-buttons for Internal or External candidate. So I’ve developed a JavaScript that hides groups of fields depending on the selection.

Please have a look on this code. I’m sure this can be improved, but it is good enough for this case. If you know JavaScript, you’ll be able to reuse some of the code from here.

 // initially checks what fields to display, when the screen opens up
check_internalExternal();

// set onclick events for all the members of radio-buttons
trigger_radio_change("InternalExternal", "check_internalExternal")

function check_internalExternal(){
  // This is an array with names of all the elements needs to be hidden, including label names.
  var external = ["Title", "TitleLabel",   "Firstname", "lblFirstname",    "Lastname", "lblLastname",   "DrivingLicence", "lblDrivingLicence", "ExternalApplicatnLabel"];
  var internal = ["PEOPLEID1", "PeopleIDLabel"];
  var type = $HRnet("InternalExternal").getDisplayValue();

//Checking what radio-button is selected
  if (type =='Internal'){
    visible_ElementsArray(external, false);
    visible_ElementsArray(internal, true);
  }else { //internal
    visible_ElementsArray(external, true);
    visible_ElementsArray(internal, false);
  }

}



/** 

* HR.Net functon called when save button is clicked. Useful for validation purposes.

* This function overrides native HR.Net function, where HR.Net does it's own validation for data, 

* like required fields and dates greater than other dates.

* So you need to be careful with all the validation - make sure all the required fields are catered for. 

*/

function Page_ClientValidate()
{
  var ErrMsg ='';
  var validate = true;

  var type = $HRnet("InternalExternal").getDisplayValue();

  // event is selected, but the field is empty

  if ((type =='External') &&  ( ($HRnet("FirstName").getDisplayValue()=='') || ($HRnet("LastName").getDisplayValue()=='')))

  {

    ErrMsg += 'First and Last Names for External Candidate must not be empty\n';

    validate = false;

  }



  if ((type =='Internal') &&  ($HRnet("PEOPLEID1").getDisplayValue()==''))

  {

    ErrMsg += 'Associated Employee record must not be empty for Internal Candidate\n';

    validate = false;

  }

  

	if (!validate){

		alert(ErrMsg);

	}

	

	return validate;

}	






/**
* Function to go through array of strings and change readOnly state of the named element.
* @param array of strings with names of elements that need to be disabled/enabled
* @param lock boolean. True to make the fields read-only, false to make them editable.
*/
function visible_ElementsArray(array, lock){
  for (var i = 0; i < array.length; i++) {  
    $HRnet(array[i]).visible(lock);  
  }  
}


/**
* Find all elements of radio buttons group and assign them onclick event.
* In HRNET radio buttons are called "name_0", "name_1", "name_2", etc, so we need to find all these elements.
* @param element_name - string with name of element. Same as it goes in HRNET screen builder.
* @param function_name - string with name of function you want to assign for onclick event.
*/

function trigger_radio_change(element_name, function_name){
  // before proceeding with anything else, check that passed function exists
  if( eval("typeof " + function_name) != 'function') {
    return; // if function does not exist, return
  } 

  var element;
  //loop to go from zero, until we no longer can find an element
  for (var i = 0; i != -1; i++){
    element = document.getElementById(element_name + "_" + i.toString()); //get element by ID
    if (element == null) { //check if element exists
      i=-1;
      return; // if no element, we exit the function
    }

    // if element there, we assign onlick event as function
    element.onclick= function(){
     eval(function_name+"()"); //function is dinamically calculated.
    }
  }//end of for-loop
} //end of trigger_radio_change_function


This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

One Response to Java Script to hide groups of fields

  1. Dan Hutson says:

    Instead of using function trigger_radio_change() you can use the HR.net OnChanged handler function to do the same thing.

    e.g. $HRnet(“RadioButton”).OnChanged(check_internalExternal);

Leave a Reply

Your email address will not be published. Required fields are marked *