# 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](/6.12/development/flow-portal-2/portlets/common-configuration.md#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="/files/-M8tc84X1hiGQ-ZhGy6t" alt=""></div>

[Listeners configuration](/6.12/development/flow-portal-2/portlets/common-configuration.md#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](/6.12/development/flow-portal-2/portlets/common-configuration.md#database-source)

[Workflow source configuration](/6.12/development/flow-portal-2/portlets/common-configuration.md#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="/files/-M0rGP1iJlpDY_nTAH5V" 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="/files/-M0rEzSLGEgZDTwjzVel" 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="/files/-M0rJ_M-iifkuFDUzPml" alt=""></div>

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

{% tab title="Preview 2" %}

<div align="left"><img src="/files/-M0rIWT1lFqRD4QdUXap" 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](/6.12/development/flow-portal-2/portlets/common-configuration.md#style)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.novacuraflow.com/6.12/development/flow-portal-2/portlets/data-tree.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.