Skip to end of metadata
Go to start of metadata

 
 
 The Tree widget is a powerful and complex UI component that creates an interactive tree control typically based on datasheet input.  It supports up to five levels of depth, dynamic icons and various formatting options. 

Basic Usage

  1. Drop the Tree widget onto the page.
  2. Drop a "Get Record" action on the nearby canvas. Click here for Sample Tree Data which can be imported into a datasheet as an example. Click the image below to see how your datasheet should be set up:
  3. Connect data from the "Get Record" action. Note that Level 2 is nested within Level 1, Level 3 is nested within Level 2, and so on. Click the image below for an example.
    Note: You can also add node labels for each level manually using the Chooser button for each field. For v1.1 of the Tree widget, you will notice that default labels appear in levels 1 and 2 that were added using this method.
  4. (Optional) Connect custom icon data flow. Click the image below for an example:
    Note: The sample data CSV file linked above does not contain the images for the icon data flow (images cannot be embedded in a CSV file). To import a datasheet containing these icons, download one of the iDoc samples included on this page.
  5. (Optional) Use other properties for additional formatting.

Advanced Usage

  • Getting the state of the tree (i.e. the selected and expanded nodes) to be stored across page refreshes is complex and will be made simpler with subsequent versions of this iBloc. If you must store the state of the tree, use and update the "Expanded" column in the Tree Data datasheet contained in one of the sample iDocs linked above.
  • Using the Tree widget to control page navigation or other events generally involves using the contents of the Selected Item property to set a data value that is then used to control logic.
iBloc Details

Type: Widget
Latest Verison: 1.1
Supported By: iRise
Samples: Tree Example 8.5.idoc, Tree 1.1.idoc

iBloc Version Studio Versions Supported Browsers
1.0 8.5, 8.6, 8.7  
1.1 8.7, 8.8 IE7, IE8, Firefox v3.5, Safari v4, Chrome v8

Key Features

  • The ability to add expanding tree menus to your simulations and configure them with a few mouse clicks.
  • Two unique event triggers:
    • An On node change trigger that fires when the selected node is changed by the reviewer.
    • An On node click trigger that fires when any node in the Tree widget is clicked by the reviewer.

Special Properties

Property Use Expects / Produces
Level 1 - 5 Used to populate each level of the tree.   Level 1 is the top level.  Level 2 items are the children of level 1. Level 3 items are the children of level 2, etc.  See image opposite. An array of strings (e.g. a column in a datasheet)
Buttons and Icons Images used to create unique icons for each node. The Icon property ('Custom node icons' in v1.0) is typically populated by a column in a datasheet. See image opposite. An array of images (e.g. a column in a datasheet).
Selected Item 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. A single string containing the label of the selected node.
Node Expanded Determines whether each node is expanded (1) or collapsed (0). Typically populated by a column in a datasheet. See image opposite.
An array of 1's and 0's.

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.
  1. Oct 12, 2010

    Appears that the Tree Data.csv file has image filenames instead of images. At least that's what showed up when I downloaded the CSV file.

    1. Oct 12, 2010

      Datasheet in sample iDoc has icons.

    2. Oct 12, 2010

      True, CSV files don't support binaries.  Replace those with any icon imagery.

  2. Oct 26, 2010

    Can I get the "Tree" iBloc source code to customize for my work?

      1. Oct 26, 2010

        I am not able to find the source code for "Tree"

        1. Dec 29, 2010

          You're right, Vijay, the source code for the Tree widget isn't there. If you still haven't found what you're looking for, please let us know..

  3. Feb 14, 2011

    Has anyone used the tree menu to allow users to click on a node and take an action based on the selection? Using the data sheet example, if you clicked on Kamloops - have your simulation show a map or text about Kamloops somewhere else on the page?

  4. Feb 15, 2011

    Is there some way to replace the folder icon with your own custom icon? I've added my own custom icon to buttons, folder, end nodes and custom icons under the icons tab, and the only time I see my icon is in the end nodes in the tree.

    Jim, I think was able to attach an event like you're talking about under the Events tab and attaching it to a node by using the "on node click" event. I'm totally new to irise, so I might be misunderstanding your question. Thanks!

    1. Feb 16, 2011

      Sorry, Holli.  The Tree iBloc currently doesn't support custom folder icons, but we'll consider this in a future release of the Tree widget.

      (Enhancement ID: BLOCS-70)