Kuika's Node Tree element allows you to create hierarchical structures with dynamic data. It is an ideal solution for visualising relational data such as tree structures in data-driven projects. In this training content, you will learn how to add the NodeTree element, configure its properties, and work with dynamic data.

The Node Tree element can only be used in web applications.

This training content consists of the following headings:

Adding a Node Tree Element
Node Tree Element Properties
Using and Customising the Node Tree Element
Element Settings and Customisation

Adding a Node Tree Element

Log in to the Kuika platform.
Open the project you will be working on from the Apps screen.

In the UI Design module, select the Node Tree element under the Data category in the Elements panel on the left side.
Drag and drop it to the desired area.
The NodeTree element comes with a Node child element by default.

Currently, the number of nodes cannot be increased or decreased; it only works with dynamic data.

Node Tree Element Properties

You can configure the following settings from the Properties panel:

options: The source to which the dynamic data is linked. NodeTree creates the tree structure based on this data.
orientation: Determines whether the node tree is drawn horizontally or vertically.
initialExpandLevel: Sets how many levels of nodes will be open (expanded) at the start.
levelDistance: Allows you to set the distance (space) between each node level.
siblingsMargin: Determines the amount of space between sibling nodes at the same level.
linksColor: Allows you to select the colour of the connection lines between nodes.

Node Tree Element Usage and Customisation

You can drag and drop as many Kuika elements (e.g., Label, Image, etc.) as you like into the Node Tree element. Added elements such as Label can be dynamically linked to data columns via the Symbol Picker and the Current option.
The Node Tree element has siblingsHorizontalGap and siblingsVerticalGap properties to adjust the horizontal and vertical spacing between sibling nodes. Additionally, EnableZoom can be used to toggle the zoom feature.
Each node has an onClick event, allowing you to capture user clicks and easily manage interactions.

The NodeTree element is a powerful and flexible solution for those who want to display complex hierarchical structures in a simple and effective manner. With dynamic data binding and detailed view settings, you can easily create data-driven visualisations in your projects.