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


8.5, 8.6, 8.7



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



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

  • No labels


  1. 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. Datasheet in sample iDoc has icons.

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

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

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

        1. 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. 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. 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. 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)