Tree Node

Introduction

The Tree Node widget displays a level of tree nodes.

Mendix recommends using multiple Tree Node widgets in a nested structure. In this way, you can map out your entire domain model in the form of a tree view. If you only need one tree node, then the Accordion widget is a better alternative.

Features

• Displays a level of tree nodes consisting of a header and content based on data from your domain model
• Allows you to collapse and expand the content when interacting with the header using a mouse or keyboard
• Allows you to nest tree nodes to map out your entire domain model into a tree view
• Delivers out-of-the-box performance and network optimizations through lazy loading and caching of tree nodes
• Offers additional styling customizations through Atlas UI
• Displays an infinite amount of tree nodes by using self-reference entity (available from Data Widgets version 3.11.0 and above)

Child Detection Mode

Starting from Data Widgets version 3.11.0, Tree Node offers two ways of rendering child nodes:

• Manual child rendering – You place a Tree Node widget (child) inside another Tree Node widget (parent) and set its data source accordingly. The widget uses this mode when Parent association is not set.
• Infinite tree node – A recursive mode in which each child refers to its parent through the self-referencing association selected in Parent association. The widget uses this mode when Parent association is set. In this mode, the widget renders child nodes automatically. Objects with an empty parent are used as root nodes.

Lazy Loading

As your tree view grows bigger, every tree node has to retrieve more data for its subtree. This can negatively impact the performance of the tree view and slow down any user interaction. To address this, each Tree Node widget loads only the data that is necessary for viewing the current tree view. Any subsequent data is deferred until user interaction.

Caching

As users interact with the tree view, the same tree nodes can be expanded and collapsed multiple times. Instead of loading the necessary data every time a tree node is expanded, the widget caches its result when the data is loaded the first time. The next time, instead of retrieving everything from scratch, the widget uses the cache. Therefore, if you visit the same tree nodes again, the delivery is fast and the network requests are smaller.

Loading State

When a Tree Node widget is nested inside another one, the parent tree node automatically shows a loading state when you expand it for the first time. The loading state is changed after the children tree node has finished loading its data. This only applies to the first visit.

Automatic Detection of End Nodes

You configure how many levels your tree view has. However, not every branch can have data at each level. For example, your tree view could go six levels deep according to your configuration, but in reality, not every branch has data for all six levels. To address this, when you try to expand a tree node in a branch, the widget automatically checks whether this tree node still has a subtree or it is the last node in this branch, namely, an end node. If it is an end node, this tree node is not clickable anymore and removes its icons from the header.

Accessibility

Out of the box, the Tree Node widget is fully accessible through keyboard controls and screen readers, even when nested into a larger tree view.

Configuration

Drag the Tree Node widget onto the page and use the configuration properties described in the following sections.

General Tab

• Data source – This sets the data source of the widget, which can also be optionally used as the data source for the header and content of the widget:

  • Required

• Parent association – This sets the association used to select a parent. If set, the widget uses Infinite tree node mode.

• Header type – This defines the type of the header:

  • Default: Text
  • When set to Text, you can configure the Header caption property
  • When set to Custom, a new region becomes available where you can configure the header through other widgets
  The Data source of the widget can also be used as a data source for the header and the content, regardless of the Header type.

• Header caption – This sets the text template used as the header caption:

  • Configurable when Header type is set to Text

• Open node when – This defines which part of the node opens or closes the node when clicked:

  • Configurable when Header type is set to Custom; default: Header is clicked
  • When set to Header is clicked, the whole header is clickable
  • When set to Icon is clicked, only the icon opens or closes the node; in this case, Show icon cannot be set to No

• Has children – This is a Boolean expression that indicates whether a tree node has child nodes or is an end node:

  • Configurable when Parent association is not set
  • When configured, a new region becomes available at the bottom of the widget where you can add another widget as child nodes
  In Infinite tree node mode, Has children is hidden and the widget detects child nodes automatically.

• Start expanded – This determines whether the content of the current level of tree nodes starts expanded or collapsed:

  • Configurable when Has children is configured or Parent association is set; default: No
  In Infinite tree node mode, Mendix recommends setting Start expanded to No for large data sets. When Start expanded is set to Yes, the widget expands all tree nodes directly and loads all data at once.

• Animate – This defines whether the content is animated when a tree node expands and collapses:

  • Default: Yes

Visualization Tab

The Visualization tab includes the following properties:

• Show icon – This defines the location of the icon relative to the header:
  • Default: Left
  • When set to Left, the icon is placed to the left to the header
  • When set to Right, the icon is placed to the right to the header
  • When set to No, the header has no icon
• Expanded icon – This defines the custom icon used to indicate that the tree node is expanded:
  • Configurable when Show icon is set to either Left or Right
• Collapsed icon – This defines the custom icon used to indicate that the tree node is collapsed:
  • Configurable when Show icon is set to either Left or Right
• Animate icon – This defines whether the icon is animated when you expand or collapse a tree node:
  • Default: Yes
• No data message – This sets the text shown when there are no items to display:
  • Configurable when Parent association is set; default: No data available

Styling

The Tree Node widget has default styles and works out of the box without Atlas UI. However, including Atlas UI in the app brings improved styling and customizations such as design properties, helper classes, and custom variables.

These are the design properties shipped with Atlas UI for this widget:

• Borders – This changes the border appearance:
  • Horizontal, Both, None (default)
• Hover – This is a toggle that highlights an item when hovering over it; only useful when the item is clickable.