Implementation of Search and Auto-Scroll in ServiceNow Catalog Form Sections

[Ankit819]

We have a ServiceNow catalog form that contains approximately 150 variables. The requirement is to organize these variables into 10 expandable and collapsible sections. Each section controls the visibility of its variables:

• When a section is collapsed, all variables within that section are hidden.

• When a section is expanded, the variables in that section become visible.

Additionally, we want to implement a search functionality at the top of the form with the following features:

1. The search field should auto-suggest variable names as the user types.

2. When the user clicks the search button, the form should:

   • Scroll to the corresponding variable on the page.

   • Automatically expand the section containing the variable, even if all sections are currently collapsed.

   • Highlight the searched variable for easy visibility.

The question is: Is this achievable in ServiceNow catalog forms, and if yes, how can it be implemented?

[lauri457]

There are many possible ways but it won't be click and go or no-code. I would suggest going back to the drawing board with the form, it sounds like a UX nightmare

However I know you won't so i attached an example how to accomplish these things in portal. This is just an example that shows you one way to interact with the form without it being too much of a hack in my opinion. Some things are hardcoded as its just for demoing

The update set should contain the item with the variables and the custom widget that has the search and a single accordion. 

1. Wrap collapsible sectiosn in container start and end
2. The accordion widget "interacts" with the container with the container with name [name of widget + "c"]
   1. Container Start variable name: accordionc, Custom variable name: accordion e.g.
   2. this way you can add as many containers and accordions as you need