MockupUI Reference Manual

Tree widget

Draws a UI tree or tree table widget.

MockupUI - Tree widget

  • Simple trees or multi column tree tables.

  • Add content to trees and tree tables by simply indenting CSV lines.

  • Easily add buttons, comboboxes, checkboxes and hyperlinks to items or columns.

  • Tick/untick cell checkboxes individually.

  • Highlight or disable individual tree items.

Adding tree items

Use the Items parameter to set the cells of the table, one line of text per table row. A row is defined as a list of comma separated values, one value per item. The first row defines the header of the table. Add space characters at the beginning of the line to set the the depth of an item in the tree.

Items can be text, numbers, comboboxes, checkboxes, hyperlinks and buttons or a mix of them. You can set the type of a column or individual items by prefixing the header or an item with one of the following characters:

  • * Selected: Highlights the item by adding a different color background.

  • # Disabled: Renders the item or column as greyed.

  • & Hyperlink: Renders the item or the column as an underlined hyperlink.

  • ^ Combobox: Adds a combobox widget to the cell or column.

  • - Checkbox unticked: Adds an unticked checkbox and a label.

  • + Checkbox ticked: Adds a ticked checkbox and a label.

  • [text] Button: Adds a button with a text caption.


Example 1 - Simple tree

Folder 1
  Folder 2
   Item 1
   Item 2

Example 1 - Tree with checkboxes

Folder 1
 +Folder 2
 +Item 1
 -Item 2

Example 2 - Column with hyperlinks

&Folder 1
&Folder 2
&Item 1
&Item 1

Example 3 - Disabled items

Column 1,Column 2
Item   1,#Disabled item 1
Item   2,Disabled item 2
Item   3,#Disabled item 3

Example 4- Buttons

Column 1,Buttons
Item   1,[Button 1]
Item   2,[Button 2]
Item   3,Text item

Example 5 - Mixed item types

Column 1,Column 2
Text item ,[Button 1]
^Combobox ,#-Unchecked disabled
[Button],#[Button disabled]