The Easy Tree widget makes it easy to create a dynamic tree. The branches, nodes and icons can all be driven by data in a datasheet or by the iBloc properties.
An Easy Tree widget adds the following capabilities to an iRise simulation:
- Easily create visually attractive tree-style navigation menus.
- Use a datasheet to create the branches, nodes and icons in the widget.
- Configure the widget so that certain folders are expanded and an item is selected when the page loads.
- Use data captured from the widget to drive dynamic navigation, in effect turning the Easy Tree widget into a functional navigation component in your simulation.
- Two custom triggers, On node change and On node click, enable you to fire events when the reviewer interacts with the iBloc in specified ways.
- When using the Easy Tree widget on multiple pages, add it to a master for ease of editing and consistency across your pages.
- Bind the Selected Item property to a data field on the Clipboard to set the property's value dynamically, and retain the value after a page refresh.
- Drop the Easy Tree widget onto the page.
- Define the Tree items for the widget in the Properties panel. To change the default items, click the chooser button in the Tree items field and modify or delete the pre-filled items in the Editor box.
- (Optional) Use other properties for additional formatting.
Clicking folders in the iBloc will expand/collapse them. Clicking nodes will select them.
The Easy Tree widget brings several advanced capabilities to your simulations, including the ability to drive widget appearance and behavior with data, as well as the ability to use the widget as a navigation component.
Using a datasheet to control the Easy Tree's appearance and behavior
- Set up a datasheet with a column containing the complete path for each node in the iBloc, another containing the value "true" for any node you want expanded by default, and a third containing icons you want associated with specific nodes. Note that your choice in the iBloc's Path delimiter property should correspond with the delimiter used in the datasheet to indicate subfolders. Click the image below for an example.
- Drop a Get Record action for your datasheet on the nearby canvas.
- Connect data from the Get Record action, binding the fields to the corresponding iBloc properties. Click the image below for an example.
The labels, icons and structure of the iBloc when rendered in a browser will be defined by the values in your datasheet.
Capturing the current state of the Easy Tree on the Clipboard
- Wrap the Easy Tree iBloc in a Form.
- Drop a Clipboard on the nearby canvas.
- Drag the Easy Tree iBloc and release it on the Clipboard widget. Choose Send data in the pop-up that appears.
- Type SelectedLabel and click OK.
- With the field label still selected, choose Selected label from the drop-down list in the Properties panel.
- Repeat steps 3-5, this time calling the field SelectedItem and choosing Selected item in the Properties panel.
- (Optional) If you want the Easy Tree to retain the currently selected item after a page refresh, drag the Clipboard widget and release it on the iBloc, choosing SelectedItem in the Select a Record or Field dialog box.
- Add a Submit form action to the canvas. You can trigger the form submission by using one of the iBloc's custom triggers (On Node click or On Node change), or you can add another UI component to the form (e.g., a "Go" button).
| iBloc Version
|| Min Studio Version
|| Supported Browsers
|| IE8, Firefox v3.6+, Safari v5.1, Chrome v14+
|| Expects / Produces
| Tree items
|| Used to populate each level of the tree. Your choice in the Path delimiter field determines how folder paths are defined.
|| An array of strings
| Path delimiter
|| A symbol added to the strings in the Tree items array that designates subfolders in the Easy Tree structure.
| Selected item (full path)
|| Full path of the node that will be selected by default. Determines the default node selected when the page refreshes and represents the currently selected node that is typically captured and submitted as data flow from the tree.
|| Text string
| Selected label
|| Outputs the name of the selected node.
|| Text string
| Selected path
|| Outputs the complete path of the selected node.
|| Text string
|| Specifies whether the folders in the Easy Tree should be expanded by default.
|| Selection (Expand all, Collapse all, or Expand specific)
| Expand specific folders
|| Specifies which folder(s) should be expanded if "Expand specific" is selected in the Folders property.
| Buttons and Icons
|| Images used to create unique icons for each node. The Custom icons property is typically populated by a column in a datasheet. See image opposite.
|| An array of images (e.g. a column in a datasheet).
Note: To associate a data field with one of the properties listed above, click the small square to the right of the property field. The Set Property dialog will allow you to select a data field currently flowing into the widget.