How to hide a Drop-down (Choice list) when it's empty?

[youming2007]

Hi ALL,

I have 2 drop-downs with a parent-child relationship:

  - Drop-down 1 is parent

  - Drop-down 2 is child (depends on Drop-down 1)

When parent's value is changed, child's values are populated automatically using Dictionary configuration (not Client Script).

Question 1:

  For example:

    Drop-down 1 has values: A, B and C

    When drop-down 1's value is set as A, drop-down 2 is populated with: -- None --, X and Y

    When drop-down 1's value is set as B, drop-down 2 is populated with: -- None -- and Z

    When drop-down 1's value is set as C, drop-down 2 is populated with: -- None -- only (NO value is set)

  When child is empty (only with -- None -- value), I want to hide child drop-down. Otherwise, I want to show it. Any ideas guys?

Question 2:

  When using both Dictionary configuration and Client script (Type = onChange) on the same drop-down, the execution order is Client script > Dictionary configuration.

  For example:

    Drop-down 1 has values: A, B and C

    When drop-down 1's value is set as A, drop-down 2 is populated with:

      - X, Y, Z by Dictionary configuration

      - X', Y', Z' by Client script

    => Client script is executed first, then Dictionary configuration. As a result, Drop-down 2 is populated with X, Y, Z

Can I switch or control the order of this behavior. I want Dictionary configuration is executed first, then Client script. Is it possible?

Many thanks,

[Archana Reddy2]

Hi,

If there is no chance of adding new values to the Parent and Child fields in future, you can use an onChange client script like below:

Field name in the example is choice1(parent for you). 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }

   if(newValue == 'A')
   {
	  g_form.setVisible('u_choice2',true);
	   g_form.clearOptions('u_choice2');
		g_form.addOption('u_choice2','','--None--');
	   g_form.addOption('u_choice2','X','X');
	   g_form.addOption('u_choice2','Y','Y');
   }
	else if(newValue == 'B')
   {
	   g_form.setVisible('u_choice2',true);
	   g_form.clearOptions('u_choice2');
	   g_form.addOption('u_choice2','','--None--');
	   g_form.addOption('u_choice2','Z','Z');
   }
	else if(newValue == 'C')
		{
			g_form.clearOptions('u_choice2');
			g_form.addOption('u_choice2','','--None--');
			g_form.setVisible('u_choice2',false);
			
		}
}

Let me know if it worked.

Thanks,

Archana

[Archana Reddy2]

If you want to make choice dependencies through the dependent field in Dictionary and hide Child choices through client script, use the following onChange client script.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }

  if(newValue == 'C')
	  {
		  g_form.setValue('u_choice2','','');
		  g_form.setVisible('u_choice2',false);
	  }
	else
		{
			g_form.setVisible('u_choice2',true);
 		}
   
}

Mark the answer as Correct/Helpful based on its impact.

Thanks

[youming2007]

Hi archanareddy,

Thanks for your suggestion.

Anyway, because I have many levels of Drop-down (1st, 2nd, 3rd, until 7th) and they all have parent-child relationship. The choices are not fixed and large (up to a few hundred items), in the future, I need to add more based on business change. That's why I used Dictionary configuration instead of Client script for simplicity.

The issue is I just want to hide the Drop-down without any values inside (only have -- None --) same as question 2 I mentioned before. I don't want to use script because I have to change it a lot in the future if the new values are inserted. I'm looking for if there is a simple solution to hide empty Drop-down without hard-coding parent's value in script (For example: after child Drop-down is populated by Dictionary, if it's empty, just hide it, no need to check parent's value. That would be perfect).

Best regards,

[Archana Reddy2]

Hi,

Yes, as you said, if you want to add the choices(may be hundreds or any) in the future, you can add theose choices in the dictionary. And, if you want to hide the child choice when its value is empty, you must use an onChange script.

onChange Client script should be as below:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === 'C') {
      return;
   }

  if(newValue == '')
	  {
		  g_form.setVisible('u_choice2',false);
	  }
	else
		{
			g_form.setVisible('u_choice2',true);
 		}
   
}

Hope this helps.

Thanks

[youming2007]

Hi archanareddy,

Thanks for your quick reply. Maybe I made you misunderstanding 'value is empty'. I meant the Child has nothing inside (only None value by default), not the value inside Child is empty (None value). Let me explain it more clearly.

The actual use-case is:

  - Parent drop-down has value A and B;

    + When Parent = A, I configure Child = X and Y by dictionary (Inside Child, there will be 3 values: None, X and Y) => Of course, I didn't want to hide Child

    + When Parent = B, I didn't configure Child (Inside Child, there will be only None value) => In this case, I want to hide Child (because it has nothing inside).

Any help would be appreciated.

Thanks,