Hierarchy Tree
Hierarchy Tree — displays entities as a collapsible top-down tree (e.g. Customer → sub-customers → assets → devices). Four build modes: Owner (owner hierarchy), Relation (by entity relations), Levels (fixed depth, one rule per level), and Hybrid (rule per entity type). The root comes from the widget’s datasource entity — a datasource is required, data keys are optional. Clicking a node highlights it and fires the “On node click” action with the clicked entity and the full tree.
Who it’s for
Dashboard authors working with structured entity data — a customer and its sub-customers, a building and its floors and sensors, an asset and the devices attached to it — ask “how do I show this as a tree people can expand, and jump straight to whatever they click?” They want the structure itself on screen, not a table of rows with no relationship between them.
What it does
Bound to the Acme Corporation customer in Owner mode, the tree opens with Acme at the root and two branches, North Region and South Region, each expanding into the devices that customer owns. Clicking Sensor 12 highlights it and fires the On node click action, passing that device and the whole tree to whatever the action does next — open its dashboard, filter another widget, or update a state parameter.
- Four ways to build the tree — Owner, Relation, Levels, or Hybrid — pick whichever matches how your entities are actually connected
- Root comes from the datasource entity; no data keys are involved, so the tree renders for entities that report no telemetry at all
- Expanded by default, so the full structure is visible immediately; collapse any branch from its own arrow
- Icons per entity type, with your own overrides where the defaults don’t fit
- On node click passes the entity and the full tree, so another widget or dashboard state can react to whatever was clicked
- Displays structure only; it does not show telemetry values on the nodes and it cannot be used to edit the hierarchy itself
How to set up
Data keys
The tree takes one required datasource — bind an entity alias to set the root — but no data keys; anything added under Data keys is ignored. Add more than one datasource and each one becomes its own root, so a single card can show several independent hierarchies side by side.
Hierarchy mode
| Setting | Default | Effect |
|---|---|---|
| Hierarchy mode | Owner | Owner (walks the owner hierarchy), Relation (follows entity relations), Levels (one rule per fixed depth), or Hybrid (one rule per entity type) |
| Child types to show | CUSTOMER, ASSET, DEVICE | Owner mode only. Which entity types appear as children of a customer node |
| Relations | Contains / FROM | Relation mode only. One or more relation type and direction pairs; a node’s children are the union of every match |
| Levels | Level 1: by owner → CUSTOMER; Level 2: by owner → DEVICE | Levels mode only. One rule per depth — row 1 is the children of the root, row 2 their children, and so on. The first level with no rule stops that branch |
| Hybrid rules | CUSTOMER by owner → CUSTOMER, ASSET; ASSET by relation (Contains / FROM) → DEVICE | Hybrid mode only. One rule per node type: how to fetch its children and which child types to include. A type with no rule is a leaf |
Owner is the quickest choice for “everything under this customer”. Levels suits a hierarchy that is always the same, predictable depth. Hybrid is for when the same entity type shows up at different depths in different branches — a rule per type instead of per level lets the tree adapt on its own.
How to customize
- To turn off the entity-type icons — turn off Display icons.
- To use a different icon for an entity type — add a row under Custom icons with that entity type and a Material icon name. Shown only when Display icons is on.
Tips
- Recursion stops at a fixed depth and skips any entity already seen on its own branch, so an accidental relation loop can’t hang the widget.
- Customers are labeled by their title; every other entity uses its label if one is set, otherwise its name. Set a Label on an entity to change what the tree shows without renaming it.
- Wire On node click to update a dashboard state with the clicked entity, so the tree becomes a way to drill from the structure straight into that device’s or asset’s own view.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.