Data tree

The Data Tree Portlet can show a hierarchical structure of data and can be used in combination with other portlets to, for example, show data belonging to a specific node.


General data is required for all portlets.

General configuration


The portlet can listen to the following events:

  • On Filter

  • On Row Selection

  • On Refresh

  • On Point Selection

  • On Tree Node Selection

The portlet can send the following events:

  • On Tree Node Selection

Listeners configuration


Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

  • Database: uses a flow connector to retrieve data from a database

  • Workflow: runs a workflow to retrieve data

Data source configuration

Workflow source configuration

Data source columns

Manage: the columns can be configured as a grid view as well as the list view. This view can help for a better overview and quicker configuration when a lot of columns are in use.

Click Execute in the data source section to fetch the columns. Each column can be configured with:

  • display name

  • column type

There are a number of column types to choose from. The default column type is text.

  • Text: use to display column as a text fields

  • Number: use for number fields where the number is an integer

  • Decimal: use for numbers with decimals

  • Date: will display the column as a date with no time

  • Date & Time: use to display date and time


  • Start value: the value that should be the starting node of the data tree

  • Nodes: column for the node id

  • Parents: the row parent value

  • Names: the name which will be displayed in data tree

  • Has Children: column with values "true" or "false" and indicated if the node has known children or not. A node where the row is set to false will not get an expand arrow.

Show root: tick the box if the root level is to be the first node.

This example data, configured as per the picture above, gives the data trees shown below as preview 1 and 2.

Click on a node to select it, and click on the icon (or double click on a node) to expand/collapse it. The child nodes will be loaded on the expansion of the parent node.

Show root not ticked and HasChildren set in the configuration.


Change the header text color and add a header stripe by configuring style.

Style configuration

Last updated