Tree Widgets

Tree widgets are most often used to simulate file browsers and to visualize other hierarchical structures. Clicking the various nodes of the tree widget can show different widgets on the page or open different pages in the project.

Adding, Deleting, and Moving Tree Nodes

To add a node, right-click on an existing node and use the Add submenu. You can choose to add a child node or sibling node.

To move a node, right-click it and use the Move submenu. You can choose to move a node up or down or to indent or outdent it.

To delete a node, right-click it and select Delete Node. Alternatively, select the node and press DELETE. Deleting a node will also delete its child nodes.

Note

A tree widget must always contain at least one node. If you attempt a deletion that would leave the widget with no nodes, you'll receive an alert stating: Cannot delete all items.

The Expand/Collapse Icons

By default, each tree node with at least one child node has an icon you can click to expand and collapse its child(ren). These icons are functional on both the Axure RP canvas and in the web browser.

By default, the expand/collapse icons are triangles. You can select different icons by selecting the tree widget or one of its nodes and clicking Edit Tree Props in the Tree section of the Style pane. In the dialog that appears, you can choose between the two built-in options, Plus/Minus and Triangle, or you can import your own icons.

You can also hide the expand/collapse icons by unchecking Show Expand/Collapse Icon in the Tree Properties dialog.

Adding Icons to Tree Nodes

In addition to the expand/collapse icons, you can also add custom static icons to the left of your tree nodes:

1. Select the tree widget or one of its nodes and click Edit Tree Props in the Tree section of the Style pane.

2. In the dialog that appears, check the box for Show Icon. Then, click OK to close the dialog.

3. Select the tree node you want to add an icon to and click Edit Icon in the Tree section of the Style pane.

4. In the dialog that appears, import your icon and select where it will be shown:

   • This node only
   • This node and siblings
   • This node, siblings, and all child nodes

Limitations and Workarounds

Embedding Widgets into Tree Nodes

Tree nodes can only contain text and an icon; it is not possible to add widgets to a tree node. If you need additional tree contents, try building a custom tree structure with shape widgets.

Not Adaptive

All aspects of tree widgets are consistent across all adaptive views. To style a tree differently across adaptive views, you can "place" a different tree widget in each adaptive view, "unplacing" from each view the tree widgets designed for other adaptive views.