Create hierarchy of custom table data (parent-child) relation using Content tree in UI Builder

[PoojaPatil]

We have created a custom Zone table in ServiceNow that contains hierarchical data.
Each Zone record has a Parent field that references the same Zone table (self-referencing relationship), forming a parent-child hierarchy.

Example structure:

Zone
├─ Green Zone
│ └─ Child Green Zone
│ └─ Grandchild Green Zone
├─ Red Zone
└─ Blue Zone

We want to display this hierarchical Zone data in a tree format within a UI Builder (Now Experience) page to improve readability and navigation.
Current Status:
1. A UI Builder Experience has been created
2. A Page has been created inside the experience
3. A Tree component has been added. (content tree)

However, we are facing challenges in:
Configuring the data source correctly
Binding table data to the Tree component
Converting flat table records into a hierarchical tree structure
Ensuring parent-child relationships render properly
Could you please give us a step-by-step configuration to achieve this?

The version we are using is Vancouver

[Tanushree Maiti]

Hi @PoojaPatil 

Refer this post : Display Interaction → Case → Request → RITM hierarchy as a tree on all 4 record pages in UI Builder 

Build a Transform Data Broker for Knowledge Base Category Hierarchy

[tomasscerba]

Hi @PoojaPatil ,

open this documentation

Content tree | Horizon Design System

Select advanced playground where you can see structure of JSON how hierarchy should be build (parent, child relationshipt) as well as selected item or coloring.

Please mark helpful if that solves your issue.

Thanks.

[Diego Chavez]

@PoojaPatil 

I created something similar to what you are looking for to display Domain hierarchy using a Content Tree. You should be able to see the code/configurations in the update set. :  https://developer.servicenow.com/connect.do#!/share/contents/1577509_domain_hierarchy_view_in_worksp...