Tree

Introduction

With this widget you can get an “explorer”-like tree view to control your application content, you use the "Tree" Widget . The Tree Widget can be seen as a clickable table of contents (TOC) with a mother-child structure. When you click on a tree item, the corresponding content appears. When a tree item contains sub-items (children), it can be unfolded and folded by clicking on the item.

Main features of the widget

• Stores and displays mother-child relations in a "explorer"-like tree view

• Fold and unfold tree items with children

• Stores a selected tree item in a temporary data field (data type = Reference), so you can use it as a pointer

Properties

Property	Type	Description
Source	Data Model, list	Source is a data model list. It can be also temporary data model list. All the necessary tree information (such as display labels and parent-child relationships) must be stored in this list.
Selected Item	Data model, reference	The Selected Item is a reference field to the source data model list, indicating the currently selected item. Each click in the tree will place the clicked element in this field.
Icon	Expression, Image or concept	This is an optional property that allows the standard folder icons to be changed to other images. You can use an image or an ontology item to change the icon image.
Label text	Expression, text	Label text is the expression that indicates what the view in the tree should be. This will in most cases be a text field in the source data model list, but you can possibly enrich the expression with other related fields.
Parent id	Expression, number	Data list field of the database list (Source) that contains the reference to the parent id of the current tree item. This field must be of data type = Reference. This field is a reference to a record in the same data list (Source).
Root nodes	Expression, boolean	Logical value (true or false) to determine if the current tree item is a root node (has no parents). For example: you can use a function IsEmpty(Treelist.ParentID) to determine if the current tree item has a parent. If true, then the current tree item is a root node
Has children	Expression, boolean	Logical value (true or false) to determine if the current tree item has children. For example: you can use an expression to determine the number of children, [Treelist.CountChildren] > 0. If true, the tree item is preceded with a plus sign [+] to indicate that the tree item has children and can be unfolded.
On select	dropdown	Refresh screen, Execute flowchart, Follow exit
Flowchart	flowchart	Choose what flowchart should be executed on selection.

Example

Data-model

In this example we show how to set up a simple tree view in an interaction node. The tree will have a steps before you can properly use them. This tree will consist of folder items and attachments shown with different icons in the tree. The tree becomes powerful when you have it automated more but this example will show a simple set up.

The first step is the datamodel.

1. Add for the different tree items the different icons. In this case "Icon folder" and "Icon WEM". Icons of 16 by 16 px work best.

2. Add a concept called tree types, and add a icon property to the concept. When that is done you can add the "folder" and "attachment" concept with the right icon as property.

3. Now we get to the datamodel here you make a list for the tree items and a session field reference to the datamodel list with tree items. When this is done you add the following fields to the Tree items list:

   • Parent ID (reference to this list)

   • ICON (file)

   • Label (text)

   • NumChildren (number)

   • Rootnode (boolean)

   • Type (concept set Tree types)

Flowchart

Next up is making the flowcharts and add the interaction nodes.

1. Make a flowchart where we are going to set up the tree view.

2. Add a Tree main interaction node, this is where we are going to show the tree.

3. Add an exit for to add items, remove items and one to edit the items.

4. Now we add a list node that adds a row to the tree data lists made in the previous steps, and connect the add item exit from the main interaction node.

5. We will also add a interaction overlay node for editing items, a decision node that chooses a icon and a list node to delete items not wanted anymore.

6. Connect everything up like in the image below:

The Widget

Next step is setting up the tree view and the screens in the interaction node.

1. We begin with the main interaction node with first the tree widget, a data grid with the tree items to visualize what we do and a button to add items.

   • Match the data-list items to the three widgets properties and set the behavior on refresh screen.

   • Set the data-grid with all fields

   • The buttons uses the add item as exit.

2. Set up the second interaction node as a overlay with a form for all writable fields found in the tree data-list except the icon as that is filled in the flowchart. This means the label, number of children, Root node, parent id (set the option label to the label field from this list, and the type. Like this:
3. At last add a save button with a exit that goes back to the main interaction node with the tree widget and add a save node if you want save the items to the database.

4. Start preview add items to your tree and see the result