Collapse container in Advance Analytics UI Builder Yokohama

[Brian Fornelius]

Hi there,

In previous versions when creating a dashboard in Advance Analytics in UI Builder there was a collapse container component that you could select and just add to the container from there.

If this latest version If I select to add a Collapse... it is no longer a collapse container.   How do I go about adding in the container part and add in the header field for the collapsed reference?   It was so easy before having it all combined in the component.

If you could provide steps on what needs to be done once you add the new collapse component I would appreciate it.

Thanks,

--Brian

[sizzleMcFace]

The Collapse component is now just the collapsible panel, so the old all-in-one Collapse Container no longer exists. To recreate it, first add a container to hold everything. Then add a Text component above the Collapse to serve as the header, optionally binding it to a field. Inside the Collapse, add the content you want to show when expanded. If you want the header to toggle the collapse, wrap the Text and Collapse in a container and use an On Click interaction on the header to toggle the Collapse. This gives you the same functionality as the old Collapse Container but with more flexibility.

[Brian Fornelius]

that's for the reply.   I seem to still be missing something.  this is how I have it set up (see screenshot)

the rich text above the collapse just says what will be underneath.   then I have the collapse with the columns and pivots under it.   However, when I save and go to view it I do not see any indicator where I can expand or collapse from the dashboard.  

If I click on the collapse in UI Builder and uncheck the expand then everything under the rich text is hidden in the dashboard... but again, I don't see a place in the dashboard where I can toggle the expand or collapse.  could you advise me on what step I am missing?

Thanks,

--Brian

[MaxMixali]

ServiceNow – Collapse Container Changes in Advanced Analytics (UI Builder)

Issue:
In previous versions of ServiceNow’s UI Builder, the “Collapse Container” component was a single combined component that included both the collapsible container and its header reference. In newer versions, this has changed — the collapse behavior is now separated into different components, and the combined “Collapse Container” is no longer available.

---

✅ Root Cause:
Starting from recent ServiceNow releases (e.g., Washington DC / Vancouver), UI Builder introduced a new component model for dashboards and workspace pages. The “Collapse Container” has been replaced by:
- **Collapse Group** – handles the expand/collapse behavior
- **Collapse Item** – serves as the individual collapsible section
- **Container** – still used for grouping widgets or layout items inside the collapsible area

This modular approach gives more flexibility but requires additional setup.

---

✅ Steps to Recreate the Old Collapse Container Behavior

1. **Open your UI Builder page**
- Navigate to your dashboard page in UI Builder.

2. **Add a “Collapse Group” component**
- This defines the overall container that will hold one or more collapsible sections.

3. **Inside the Collapse Group, add a “Collapse Item”**
- Each Collapse Item represents a collapsible section (similar to the old “Collapse Container”).
- Configure the Collapse Item’s properties:
- **Header Label:** This replaces the old “header field” that used to be part of the component.
- **Default State:** Set to Expanded or Collapsed based on your preference.

4. **Add a “Container” inside the Collapse Item**
- This container serves as the layout area for widgets, scorecards, or other components.
- Drag and drop your content (e.g., reports, KPIs, charts) into this container.

5. **(Optional) Customize the Header Behavior**
- Use the “Collapse Header” slot to add custom UI components (icons, text, buttons) for a more dynamic experience.
- You can bind a dynamic field (for example, from data resource) to the Header Label.

6. **Preview and Test**
- Save your layout.
- Preview the page and verify that the collapse/expand behavior works as expected.
- Each Collapse Item now behaves independently but within a single Collapse Group container.

---

✅ Example Structure in the UI Builder Tree:

Collapse Group
├── Collapse Item (Header: “Sales KPIs”)
│ └── Container (Place your charts here)
├── Collapse Item (Header: “Operational Metrics”)
│ └── Container (Place reports here)
└── Collapse Item (Header: “Regional Breakdown”)
└── Container (Place widgets here)

---

✅ Notes & Best Practices:
- The new structure provides **greater control** over layout and behavior.
- You can now have multiple collapsible sections grouped together under one group, instead of multiple independent components.
- Use **data binding** on the header if you want dynamic titles (e.g., “Revenue (Q1 2025)”).
- The old “Collapse Container” component is deprecated — any legacy dashboards using it should still work, but you’ll need to migrate manually if editing in newer versions.

---

✅ Summary:
**Old Behavior:** Collapse Container = Header + Content (single component)
**New Behavior:** Collapse Group + Collapse Item + Container = same result, more flexibility

To replicate the old component:
> Add a “Collapse Group,” then a “Collapse Item,” and finally a “Container” inside the Collapse Item for your dashboard widgets.

This modular structure ensures compatibility with current and future ServiceNow releases.

[Brian Fornelius]

Hi there.   I do not see a 'Collapse Group' component.  the only one that even has collapse in the name is 'Collapse'.   Am I missing something?