Skip to end of metadata
Go to start of metadata

 
 
 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.  

Key Features

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.

Usage Tips 

  • 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.

Basic Usage

  1. Drop the Easy Tree widget onto the page.
  2. 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.
  3. (Optional) Use other properties for additional formatting.

Clicking folders in the iBloc will expand/collapse them. Clicking nodes will select them.

Advanced Usage

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

  1. 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.
  2. Drop a Get Record action for your datasheet on the nearby canvas.
  3. 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

  1. Wrap the Easy Tree iBloc in a Form.
  2. Drop a Clipboard on the nearby canvas.
  3. Drag the Easy Tree iBloc and release it on the Clipboard widget. Choose Send data in the pop-up that appears.
  4. Type SelectedLabel and click OK.
  5. With the field label still selected, choose Selected label from the drop-down list in the Properties panel.
  6. Repeat steps 3-5, this time calling the field SelectedItem and choosing Selected item in the Properties panel.
  7. (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.
  8. 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 Details

Type: Widget
Latest Verison: 1.1.2
Supported By: iRise
Samples: Easy Tree 1.1.idoc (v8.9)

iBloc Version Min Studio Version Supported Browsers
1.0 8.8 IE8, Firefox v3.6+, Safari v5.1, Chrome v14+

Special Properties

Property Use 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. Selection
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
Folders 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. Selection
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.

Support and Feedback

People-Powered Customer Service for iRise

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.