Node Tree

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

3. In the UI Design module, select the Node Tree element under the Data category in the Elements panel on the left side.
4. Drag and drop it to the desired area.
5. 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.

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.

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