Skip to main content
Version: v11.6.0

Tree


Tree is a widget that helps display data in a structured format. It can be used to show a hierarchical structure in data.

Features

You can set various properties

  • Tree Icons sets the expand-collapse icons on the tree,
  • Levels sets levels of the tree to be expanded by default,
  • Default Value can be none, FirstNode or LastNode defines the node to be selected by default on the first run of the app. This field can be bound to a condition. For example, datavalue="role === 'admin'". In such cases, the condition is evaluated for each node in the tree until the condition is satisfied and that node will be selected.
  • Tree Widget input needs three fields for each node - label for each node, icon to be displayed at each node, and in the case of sub-trees a children node with the repeat of the tree structure.

Properties

PropertyDescription
NameThe name is a unique identifier for your widget.
Accessibility
Tab indexThe tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable. NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option "Press Tab to highlight each item on a webpage".
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Tree IconsThis property sets expand-collapse icons on the tree. One can choose from: - folder, - plus-minus, - circle-plus-minus, - chevron, - menu, - triangle (default selection) or - expand-collapse.
Dataset
ValueSet this property to a variable to populate the list of values to display.
Order bySet the order of the content. (available only when the above Dataset Value is bound to a variable)
Node LabelProperty of the object (bound to the value property above) for node label binding, default value is label. (available only when the above Dataset Value is bound to a variable)
Node IconProperty of the object (bound to the value property above) for node icon binding, default value is icon. (available only when the above Dataset Value is bound to a variable)
Node ChildrenProperty of the object (bound to the value property above) for node children binding, the default value is children. The property where the nested object is present. (available only when the above Dataset Value is bound to a variable)
Node IdProperty of the object (bound to the value property above) used to identify a node. The default value property can be set to a value of the node id for initial selection. (available only when the above Dataset Value is bound to a variable)
Node ActionThis property sets the actions for the widget. (available only when the above Dataset Value is bound to a variable)
Node IdSet this property to expand the node when it is clicked options being Do Nothing or Expand Node. (available only when the above Dataset Value is bound to a variable)
Default Value
ValueThe default value to be set at runtime. Can be: - none, - FirstNode or SecondNode, - value for the Node Id property. When datavalue is FirstNode, the First Node of the tree will be selected. When datavalue is LastNode, the Last Node of the tree will be selected. When datavalue is bound to a condition (eg, datavalue="role === 'admin'"), The condition is evaluated for each node of the tree until the condition is satisfied. The first node which satisfies the given condition will be selected.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Format
Horizontal AlignThis property specifies how the elements should be aligned horizontally.

Events

EventDescription
Callback Events
On SelectThis event handler is called when the tab is selected.

Methods

The tree widget has a few methods exposed on widget scope which can be accessed via JavaScript.

PurposeUsage
Select a nodePage.Widgets.[treeName].selectById(dataValue); //This method selects the node in the tree rendered. //This method accepts datavalue of the node to be selected. //Datavalue of the node is the `Node Id` field value //mapped in the property panel for the tree widget.
Deselect a nodePage.Widgets.[treeName].deselectById(); //This method clears the selectedNode. //Doesn’t require any parameters

Use Cases