Skip to main content

Tree (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Tree widget shows nested data, such as folders or an org chart, as nodes that users can expand and collapse. Users can select one node at a time. It is a display widget, not a form field. To capture a value in a form, use the Tree Select widget.

Widget type: WDS_TREE_WIDGET

Tree widget in a Responsive app
Tree widget

Content properties​

These properties appear in the Content tab of the property pane.

Data​

Options array​

Sets the nodes to show. Each node is an object with these keys:

  • label: the text of the node.
  • value: the value of the node.
  • children (optional): an array of child nodes.
  • isDisabled (optional): set to true to stop users from selecting the node.

New widgets start with a sample file tree.

Example:

{{[
  { label: "Documents", value: "DOCUMENTS", children: [
    { label: "Resume", value: "RESUME" }
  ] },
  { label: "Archive", value: "ARCHIVE" }
]}}

General​

Expanded values array​

Sets the values of the nodes that are expanded when the widget loads. If this list is not empty, it overrides Expand all nodes. Default: [].

Example:

["PARENT_1", "PARENT_2"]

Expand all nodes boolean​

Expands every parent node when the widget loads. Expanded values overrides it. Default: off.

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Disables every node in the tree. Default: off.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Events​

onNodeSelect​

Sets the action that runs when a user selects a node. See Events.

onNodeExpand​

Sets the action that runs when a user expands or collapses a node. See Events.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Tree1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Tree1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{Tree1.isDisabled}}

options array​

Holds the nodes of the tree.

Example:

{{Tree1.options}}

selectedValue string​

Holds the value of the selected node. It is an empty string when no node is selected.

Example:

{{Tree1.selectedValue}}

selectedNode object​

Holds the full object of the selected node ({ label, value, children?, isDisabled? }). It is undefined when no node is selected.

Example:

{{Tree1.selectedNode.label}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Tree1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the widget on or off.

Example:

Tree1.setDisabled(true)

Events​

onNodeSelect​

Runs when a user selects a node. Read the new value in {{Tree1.selectedValue}}.

onNodeExpand​

Runs when a user expands or collapses a node. In the action, {{expandedValues}} holds the values of all expanded nodes.