Best way to show/hide fields on a catalog item

[mballinger]

Hello,

I haven't created catalog items in a while. My question is, what is the best way to show/hide variables based off of a selection from a drop down? 

I have 10 fields on the item. The first field is a selection with 2 choices. If they select choice 1, it will show the other 9 fields. If I select choice 2, only 7 of the 9 fields will display. What is the best of writing this in a catalog client script?

thanks!

[Mark Roethof · Accepted solution]

Just want to add to this, don't forget to clear the variable values. For example when filling out the form, a user can decide to change variables which cause other variable not to be visible anymore... though those variables will still contain it's contents!

So do use the "Clear the variable value" option, or add scripting to empty the variable. This is an often missed step I see at customers.

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020, 2021 ServiceNow Community MVP
2020, 2021 ServiceNow Developer MVP

---

LinkedIn
Community article, blog, video list

[mballinger]

@Mark Roethof - Yes this is what I need. When The form loads, all fields should be hidden, but based on a selection the variables should display. If a different selection is made, then some other variables get hidden, and if none is selected, no variables should display.

To hide all fields I was going to create a UI Policy and hide them all of selection is none and then have the following catalog client script

Would I just do:

if(g_form.getValue('u_need_more_docs') == 'yes') {
      g_form.setVisible('u_doc_type', true);
      g_form.setVisible('u_department', true);
      g_form.setVisible('u_division', true);
      g_form.setVisible('u_state', true);
      g_form.setVisible('u_city', true);
      g_form.setVisible('u_zip', true);
      g_form.setVisible('u_needed_date', true);
      g_form.setVisible('u_delivery_date', true);
      g_form.setVisible('u_problem_type', true);
} else {
      g_form.setVisible('u_doc_type', false);
      g_form.setVisible('u_department', false);
      g_form.setVisible('u_division', false);
      g_form.setVisible('u_state', false);
      g_form.setVisible('u_city', false);
      g_form.setVisible('u_zip', false);
      g_form.setVisible('u_needed_date', false);
      g_form.setVisible('u_delivery_date', false);
      g_form.setVisible('u_problem_type', false);
}

if(g_form.getValue('u_need_more_docs') == 'no') {
      g_form.setVisible('u_doc_type', true);
      g_form.setVisible('u_department', true);
      g_form.setVisible('u_division', true);
      g_form.setVisible('u_needed_date', true);
      g_form.setVisible('u_delivery_date', true);
      g_form.setVisible('u_problem_type', true);
} else {
      g_form.setVisible('u_doc_type', false);
      g_form.setVisible('u_department', false);
      g_form.setVisible('u_division', false);
      g_form.setVisible('u_needed_date', false);
      g_form.setVisible('u_delivery_date', false);
      g_form.setVisible('u_problem_type', false);
}

Thanks

[Ankur Bawiskar]

Hi,

you can have one if for YES

Another else if for NO

Regards
Ankur

[mballinger]

@Ankur Bawiskar - When I do an if for YES and another else for NO, the options for YES display when NO is selected after selecting YES. I need fields to show/hide every time I select YES, NO, or NONE

[Ankur Bawiskar]

Hi,

As members have suggested you can use Catalog UI Policy.

If you require complex logic to show/hide which requires scripting then better go with catalog client script

Regards
Ankur