dynamic population of a selectbox with 'none'

[timhorn]

I have a catalog item that has 2 dependent selectbox variables.   When the first variable (Environment) changes, it should populate the options in the second variable (Application).   I have an onChange catalog client script that does this, and it all works fine.   When I populate the Application list, first I clear the existing options:

g_form.getControl('Application').options.length = 0;

and then I add a placeholder item as follows:

g_form.addOption('Application', 'NULL', '- Please Select -');

Followed by all the applications for the selected environment.   That first entry essentially is a manual way of implementing the "Include none" property, because that property doesn't seem to stay intact when you dynamically build the options list.   All of this works fine.   The problem I'm having is that the Application variable is mandatory.   When I build the options list manually, the "mandatory" asterisk doesn't turn red.   It's treating the first option as a selection, so it thinks a selection has been made.   I tried several different ways of clearing the selected value, but none of them have worked:

g_form.setValue('Application', '');

g_form.setValue('Application', 'NULL');

g_form.clearValue('Application');

Does anyone know of a way to make it unselect whatever value it thinks it selected?

[Vladi1 · Accepted solution]

I did something similar (or the same) recently. First select box is "Request Type" and the second is "Service Type".   I am using two scripts: onLoad and onChange

0nLoad script hides second select box:

function onLoad() {

  //Type appropriate comment here, and begin script below

var category = g_form.getValue('1st select box variable name');

  //Clear Request Type

  g_form.clearOptions('2nd select box variable name');

  g_form.setDisplay('2nd select box variable name', false);

}

onChange defines (on request type variable v_uhds_request_type) behavior of the second variable (and asterisk is red).

function onChange(control, oldValue, newValue, isLoading) {

  if (isLoading || newValue == '') {

  return;

  }

  var category = g_form.getValue('1st select box variable name');

  g_form.setMandatory('2nd select box variable name', true);

  //Clear Request Type

  g_form.clearOptions('2nd select box variable name');

  g_form.addOption('2nd select box variable name', '', '-- None --', 10);

  if (category == 'v_av_equipment')// choice for the 1st select box

{

  // display AV Equipment options

  g_form.addOption('2nd select box variable name', 'v_projector', 'Projector', 100);

  g_form.addOption('2nd select box variable name', 'v_smart_board', 'Smart Board', 200);

  g_form.addOption('2nd select box variable name', 'v_speakers', 'Speakers', 300);

  g_form.addOption('2nd select box variable name', 'v_television', 'Television', 400);

  g_form.addOption('2nd select box variable name', 'v_other', 'Other', 500);

  }

  else if (category == 'v_cable_tv')//choice for the 1st selecto box

{

  //display Cable TV

  g_form.addOption('2nd select box variable name', 'v_no_signal', 'No Signal', 100);

  g_form.addOption('2nd select box variable name', 'v_quality', 'Quality', 200);

  g_form.addOption('2nd select box variable name', 'v_other', 'Other', 300);

  }

}

....and so on for all choices in the 1st SelectBox

I hope this helps

[timhorn]

Thanks Vlady.   That did it.   I was trying to do the hiding and mandatory setting in a UI Policy, but it only seems to work properly when the whole thing is done in an onChange client script.   Maybe the script and the UI Policy were conflicting somehow, but I'll just take the victory and move on.   Looks like scripting wins again...   Thanks.