Is it possible to create tabs in a ServiceNow Catalog Item?

[Sai_snow]

I am working on a Service Catalog Item in ServiceNow where I have a large number of variables (around 30–40 fields). To improve the user experience, I want to organize these variables into multiple tabs within the same catalog item.
PFA.

Thankyou in advance !

[pr8172510]

Hi Sai,

Good question  this is a very common requirement when dealing with large catalog items.

Yes, it is possible to achieve a tab-like experience, but not directly using OOB catalog variables. You’ll need to use a workaround.

---

1. OOB behavior (limitation)
ServiceNow Catalog Items do not support tabs natively for variables.

• Variables are displayed in a single form
• Only basic grouping (Variable Sets, Containers) is available

---

2. Recommended approach → Use Containers + UI Policies (Tab Simulation)

You can simulate tabs using:

• Container Start / End variables
• UI Policies or Client Scripts
• Custom buttons or select box to switch sections

 Approach:

• Create multiple containers:
  • Personal Information
  • Professional Details
  • Spouse Information
  • Previous Company
• Add a variable (e.g., Select Tab) with choices:
  • Personal
  • Professional
  • Spouse
  • Previous
• Use UI Policies:
  • Show/Hide containers based on selected tab

This gives a tab-like behavior.

---

3. Better UX option → Use Catalog Client Script (for real tab feel)

You can enhance it by:

• Creating UI Macro / HTML field
• Add buttons styled as tabs
• Use onClick() to show/hide sections

This requires some frontend scripting but gives a much cleaner UI like your screenshot.

---

4. Alternative → Use Order Guides or Multiple Catalog Items

If the form is too large:

• Split into multiple steps using Order Guide
• Or break into multiple catalog items

This is more maintainable but changes UX flow.

---

5. Service Portal vs Workspace

If you're using Service Portal:

• You can implement tabs using Widget customization (AngularJS)
• This is the most flexible and closest to real tabs

---

6. Best practice recommendation

Use Containers + UI Policies (quick and supported)
 Use Portal Widget if you need polished UI
 Avoid overloading a single item with too many variables

[Tanushree Maiti]

Hi @Sai_snow ,

You can use container to make those variables display in 2 column.

Refer: https://www.servicenow.com/community/developer-forum/catalog-item-layout-displaying-multiple-variabl...

KB0610333 Service Catalog: Nested containers used to create more than two column layouts in catalog ...