Purpose
Create an interactive tree control.
Description
The Tree View component creates an interactive tree control. The tree control is a hierarchical list that can be used to simulate a menu or a folder structure. You configure the component by specifying the content hierarchy as a bulleted list, and by configuring its look-and-feel and level of interactivity.
Specifying Content
You specify content by creating a bulleted list in the Rich Text Editor. By default, the component includes a nested list of placeholder content.
To edit the list, follow these steps:
1. Open the Rich Text Editor.
Select the component in the canvas and press the Enter key.
2. Edit the placeholder content.
The content must be specified as an unordered list to render the tree.
3. Click the Save button.
The default tree content is shown below.
Simulating a Tree Menu
You can simulate a tree menu by manually linking the list items to pages.
To create links, follow these steps:
1. Open the Rich Text Editor.
Select the component in the canvas and press the Enter key.
2. Edit the placeholder content.
The content must be specified as an unordered list to render the tree.
3. For each link, follow these steps:
- Highlight the relevant list item in the Editor canvas.
- Click the Insert/edit link icon in the Editor toolbar.
- Specify the link URL.
To link to a project page, open the Link Picker and select a project page.
Click the Insert button.
Properties
The component-specific properties are described below. Refer to Common Properties for descriptions of the common properties.
| Name | Description |
| Edit Content | Open the Rich Text Editor. |
| Animate | Select Yes to use an animation effect when closing and opening nodes. |
| Drag Drop | Select Yes to allow nodes and leaves to be dragged to a new location in the tree. |
| Show Lines | Select Yes to show lines connecting nodes and leaves in the tree. |
| Use Arrows | Select Yes to use arrow controls to expand and collapse nodes. |
| Icon | Select Yes to use a custom node icon. |
| Expand All | Select Yes to expand all tree nodes by default. |
| Checkboxes | Select Yes to include a check box for all nodes and leaves. |
| All Checked | Select Yes to select all check boxes by default. |