# 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

General data is required for all portlets.

[General configuration](https://help.novacuraflow.com/6.12/development/flow-portal-2/common-configuration#general)

## Listeners

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

<div align="left"><img src="https://3419513391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M8tbrSaGIRYe9EthohB%2F-M8tc84X1hiGQ-ZhGy6t%2Fimage.png?alt=media&#x26;token=038912c8-64f9-49fa-bab3-044670175740" alt=""></div>

[Listeners configuration](https://help.novacuraflow.com/6.12/development/flow-portal-2/common-configuration#listeners)

## Data

### 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](https://help.novacuraflow.com/6.12/development/flow-portal-2/common-configuration#database-source)

[Workflow source configuration](https://help.novacuraflow.com/6.12/development/flow-portal-2/common-configuration#workflow-source)

### Nodes

* 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.

<div align="left"><img src="https://3419513391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0qa3COHWobkxQHcUxX%2F-M0rGP1iJlpDY_nTAH5V%2Fimage.png?alt=media&#x26;token=c7b80301-7a96-495c-a74b-09ae9c80038d" alt=""></div>

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

<div align="left"><img src="https://3419513391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0qa3COHWobkxQHcUxX%2F-M0rEzSLGEgZDTwjzVel%2Fimage.png?alt=media&#x26;token=d1f93cb5-3d7a-4782-bc09-7762894cd331" alt=""></div>

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

{% tabs %}
{% tab title="Preview 1" %}

<div align="left"><img src="https://3419513391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0rGgzl9RgYMrXtl1rs%2F-M0rJ_M-iifkuFDUzPml%2Fimage.png?alt=media&#x26;token=a0035106-f010-4161-9496-dcd54ea9796c" alt=""></div>

Show root not ticked and HasChildren set in configuration.
{% endtab %}

{% tab title="Preview 2" %}

<div align="left"><img src="https://3419513391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0rGgzl9RgYMrXtl1rs%2F-M0rIWT1lFqRD4QdUXap%2Fimage.png?alt=media&#x26;token=a887c8cc-d29e-4609-a70c-99242b6a3a2c" alt=""></div>

Parent (marked in yellow) - visible when Show root ticked \
Arrow to expand (marked in red) - shown on all levels when HasChildren not set
{% endtab %}
{% endtabs %}

## Style

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

[Style configuration](https://help.novacuraflow.com/6.12/development/flow-portal-2/common-configuration#style)