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