Skip to content
Stand with Ukraine flag

Hierarchy Tree

  • Widget
  • 31 installs
  • v1.0.0
  • Jul 20, 2026
  • MIT license
  • v4.2+
  • PE
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.

Widget Type
  • Latest
Category
  • Cards & Info
  • Tables & Lists

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

SettingDefaultEffect
Hierarchy modeOwnerOwner (walks the owner hierarchy), Relation (follows entity relations), Levels (one rule per fixed depth), or Hybrid (one rule per entity type)
Child types to showCUSTOMER, ASSET, DEVICEOwner mode only. Which entity types appear as children of a customer node
RelationsContains / FROMRelation mode only. One or more relation type and direction pairs; a node’s children are the union of every match
LevelsLevel 1: by owner → CUSTOMER; Level 2: by owner → DEVICELevels 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 rulesCUSTOMER by owner → CUSTOMER, ASSET; ASSET by relation (Contains / FROM) → DEVICEHybrid 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.