Introduction

If you want to use an “explorer”-like tree view to control your application content, you can 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

Note: if the widgets menu is not visible in the template editor menu, you will have to activate the widgets library first. To do this go to the Home tab of the modeler and right click on the My project home icon. Now you can select the Widget library and Advanced input. We are going to use the Tree widget from the Advanced inputlibrary. You can also select other available libraries. When selected, they will appear in your template editor.

We are going to explain the use of the Tree widget by using an example. In this example we are going to create a simple breakdown structure for computer and their computer parts, but you can use it for all kind of mother-child structures (e.g. product breakdown such as cars, buildings, bikes). The widget actually is used as a table of contents (TOC).

Preparation: create a database list and temporary fields

Before you start, you will have to prepare a database list to work with the Tree Widget and also 5 temporary fields:

Create a New folder in Data model with the name “Tree Widget”;
Create a New Database list with the name “Treelist” within the just created folder Tree Widget;
Create the following 4 data fields within the just created Treelist database list:

Data field name	Technical name	Datatype	Use of field
Parent	Treelist.Parent	Reference	This is a reference to a row in this same database list.
Label	Treelist.Label	Text (50)	The label (name) of a list item.
Path	Treelist.Path	Text (500)	Path of the list item ID’s that is build based on the mother-child depth. Based on this path you can distinguish all parent list items.
CountChildren	Treelist.CountChildren	Numeric	The number of children when there is a mother-child relation. This value will be calculated in a flowchart.

The result should look something like this:

Next create the following 6 temporary fields;

Note: these are separate fields, NOT part of the Treeview database list

Data field name	Technical name	Datatype	Use of field
Current Treelist item starting the action	TreeWidget.CurrentTreelistItemStartingAction	Reference	Reference to a row in the same Treelist. To determine the starting point list item to start an action like adding sibling/child.
Parent of Current Treelist item	TreeWidget.ParentOfCurrentTreelistItem	Reference	Reference to a row in the same Treelist. To determine the parent of the current list item.
Treelist item active	TreeWidget.TreelistItemActive	Reference	Reference to a row in the same Treelist. To determine the active list item.
Treelist Temp	TreeWidget.TreelistTemp	Reference	Reference to a row in the same Treelist. Temporary field for generic use.
Treelist Needs Update Of ChildCount	TreeWidget.TreelistNeedsUpdateChildCount	Logical Yes/No	When a child in a mother-child relation is changed, this field can be used to determine if the number of childs must be recalculated.
Move item to root	TreeWidget.MoveItemToRoot	Logical Yes/No	When a treelist item has to be moved, this field can be used to determine if the treelist item has to be moved to the root level.

So the result of the data model should look something like this:

All the necessary data for the Tree Widget will be stored in the Treelist database list. The Treelist widget actually works as a table of contents (TOC) where you store the mother-child structure and all associated information such as labels of the list item.

Create the flowcharts

Now that we have set up the database list and temporary fields, we can create the flowcharts. We are going to use the Tree widget as a table of contents (TOC) for a simple breakdown structure for computers and their computer parts.

Go to Flowcharts and create a New folder called “Tree widget”.
Create a Regular flowchart called “Main treeview”.
Drag and drop a blue User interaction node called “Treeview”. Open the template editor by double click on the node.
Select the Tree widget from the Advanced input menu and place it within a Block panel.

Create a template that looks like the screen below. Use columns to create a TOC panel on the left side and a content panel on the right side. Make sure that the Block panel has also a footer. We are going to use the footer to position additional buttons later in this tutorial.

Next we are going to configure the Tree widget by selecting the corresponding values in the properties pane. Click on the Tree widget and select the corresponding values in the properties pane as described below. For a complete description of the properties check the properties of the Tree widget.

Property	Value
Source	Select the database list `Treelist`
Selected item	Select the temporary data field `Treelist item active`
Icon	We leave this property empty
Label text	Select the data field `Label` from the `Treelist`
Parent id	Select the data field `Parent` from the `Treelist`
Root nodes (logical)	Use the function IsEmpty and check if the Parent data field is empty. If true, then the current tree item is a root node. `IsEmpty(Treelist.Parent)`
Has children (logical)	Use a operator to check if there is a value > 0. If true, the tree item is preceded with a plus sign [+] to indicate that the tree item has children and can be unfolded. `[Treelist.CountChildren] ? 0 > 0`
On select	For now, we leave this item on `Refresh screen`

The result should look something like this:

Note 1: when you preview the flowchart you will notice that the treeview is still empty. First we have to create an initial record in the database list. To do so, we create a new flowchart called “Initiate root of tree”.

Note 2: it is useful to show the content of the Treelist database list on the screen during the development of the treeview (for example in a datagrid). This way you gain insight into the structure of the database list. Optionally you can put the datagrid in a conditional, so you can determine when the database list is shown (for example only in Preview).

Initiate root of tree

Create a new flowchcart called “Initiate root of tree”. This flowchart checks if there are any records in the database list. We use the Count() function to do so, Count(Treelist) = 0. When the function evaluates to true (no records found), then a new initial record is created with an initial Label and Path. When the function evaluates to false (records found), we don’t have to initiate the root of tree.

Note: make sure you add a Save all database list changes after the green list node. The reason for this is that WEM only then generates a definitive ID in the database list. You need this ID for the tree path.

The result of the flowchart should look something like this:

In the table below you find the values of each node:

Node	Value
Decision node	Count(Treelist) = 0
Assignment node `Tree widget.Treelist.Path`	Advanced, Operand: “pipe-sign” + [TreeWidget.Treelist.ID]
Assignment node `Tree widget.Treelist.Label`	New value: Root

We have to initiate the Tree widget before we can go to the User interaction screen. So we are going to use the Initiate root of tree flowchart as a subflowchart within the Main treeview flowchart.

Drag & drop a subflowchart node on the canvas and select the Initiate root of tree flowchart;
Link the start node to the subflowchart node and finally link it to the User interaction node Treeview.

The result should look something like this:

Preview the flowchart. The result should look something like this:

Main functions of a Tree view

There are basically 4 main functions for a Treeview:

Adding a treelist item. A treelist item can be a sibling or a child;
Deleting a treelist item;
Editing a treelist item label;
Moving a treelist item. Moving a treelist item is in fact changing (editing) the content of the Path field, setting the correct Parent ID and possibly recalculating the CountChildren field.

The principle of the Tree widget is based on:

Determine the starting point / tree level you are standing on. This is you starting point of all your actions. From this point you can easily determine the root, parent or childs. We use the temporary data >field Current Treelist item starting the action to store the current active treelist item;

Adding, Editing or Moving a treelist item is in fact changing (editing) the content of the Path field, setting the correct Parent ID and possibly recalculating the CountChildren field. The Path data field is a > very useful tool for quickly determining levels.

Next we are going to build 4 flowcharts for each function.

Adding a treelist item, flowchart Add sibling

Principle of the function:
When you add a sibling, you add a treelist item on the same level of the active treelist item. So you actually create a new item with the same mother (the same parent ID) as the active treelist item.

We are going to create a flowchart Add sibling with the following elements:

First determine the starting point / tree level you currently at. This is the active list item ID. Assign this value to the temporary data field Current Treelist item starting the action;
Then determine the Parent of the current treelist item and assign the value to the temporary data field Parent of Current Treelist item;
Next create a new row in the Treelist database list;
After creation of a new row, assign the temporary field [Tree widget.Treelist item active] and set Action to Set to current entity row (assign with the ID of the just created row);
Set the temporary field [Tree widget.Treelist Needs Update Of ChildCount] to Yes. This value is used in the Generate CountChildren function;
Then assign (with green assignment nodes) the 4 values for Parent, Label, Path and CountChildren as below:

Data field name	Technical name	Assigned value
Parent	Treelist.Parent	`[TreeWidget.ParentOfCurrentTreelistItem]`
Label	Treelist.Label	Label, User Interaction node. Use a `Reference element` in the template editor (refer to `[TreeWidget.TreelistitemActive]`) including a `Form element` with the `Label` data field. Use it as an Overlay. See template example below.
Path	Treelist.Path	`[Treelist.Parent] -> [Treelist.Path]` + “pipe sign” +`[TreeWidget.TreelistItemActive] -> [1178265: Tree widget.Treelist.ID]`
CountChildren	Treelist.CountChildren	Calls a generic function (flowchart). This function calculates the number of records where the same parentID in the `Treelist`database list is used and assigns the calculated value to that parent. See description below.

The end result of the flowchart should look something like this:

As you can see, the flowchart is a bit on the large side. And because a part of this flowchart will also be used to Add a child, we are going to split the flowcharts into subflowcharts.

Copy the Add sibling flowchart to the same Folder and rename it to Update_Label_Path_CountChildren;
Open the flowchart and delete every node till User Interaction node Label;
Next connect the Start node to the User Interaction node Label.
The result should look something like this:

Next open the Add sibling flowchart and delete every node from the User Interaction node Label. Leave the End node on the canvas; 5. Drag & drop a subflowchart node on the canvas and select the just created Update_Label_Path_CountChildren flowchart; 6. Connect the green assignment node to the subflowchart node; 7. Finally connect the subflowchart node to the End node.

The result should look something like this:

Link the Add sibling flowchart to a button exit

The final thing we have to do is connect the flowchart to a button exit.

Open the flowchart Main treeview;
Open the User interaction node Treeview and place a button in the footer of the TOC panel;
Call the button exit Add sibling. You can add an icon (e.g. plus sign +) if desired.
The result should look something like this:

Next drag & drop a subflowchart node on the canvas; 5. Select the Add sibling flowchart; 6. Connect the User interation node Treeview with the subflowchart node.

The result should look something like this:

You can preview the flowchart and check if a sibling is added correct.

Generic CountChildren function

Because each parent of a list item is stored in the Treelist database list, you can determine the number of children by counting the same parentID in the database list.

This flowchart calculates the number of records where the same parentID in the Treelist database list is used and assigns the calculated value to that parent. We use a loop node to do this.

We only calculate the number of children when the temporary data field [TreeWidget.TreelistNeedsUpdateChildCount] is set to Yes.

Create a new flowchart called CountChildren function;
Drag & drop a yellow Decision node on the canvas and evaluate the field [TreeWidget.TreelistNeedsUpdateChildCount];
Drag & drop a green Loop node on the canvas based on the Treelist database list;
Connect the Yes Exit of the Decision node the Loop node;
Drag & drop a green assignment node on the canvas. Select [Tree widget.Treelist Temp] and set the Action to Set to current entity row;
Drag & drop a green assignment node on the canvas. Select [Tree widget.Treelist.CountChildren] and set the Action to Advanced. Set as Operand: Count([Treelist] where [Treelist.Parent] = [TreeWidget.TreelistTemp]);
Drag & drop a Save all database list changes on the canvas;
Drag & drop an End node on the canvas;
Connect all the nodes and connect the End of loop node to the Save all database list changes;
Connect the No Exit of the Decision node to the End node.

The result should look something like this:

Adding a treelist item, add a child

Principle of the function:
The principle of adding a child to the tree view is almost similar as adding a sibling to a tree. The main difference is that when you add a child, the active treelist item becomes the mother (Parent) of the >child. So actually you create a new item and assign the active treelist item as the Parent of the child.

We are going to create a flowchart called Add Child with the following elements:

First determine the starting point / tree level you currently at. This is the active list item ID. Assign this value to the temporary data field Current Treelist item starting the action;
Next create a new row in the Treelist database list;
After creation of a new row, assign the temporary field [Tree widget.Treelist item active] and set Action to Set to current entity row (assign with the ID of the just created row);
Set the temporary field [Tree widget.Treelist Needs Update Of ChildCount] to Yes. This value is used in the Generate CountChildren function;
Then assign the value for Parent and Treelist Needs Update of ChildCount as below (the Label, Path and CountChildren are already been taken care of in the existing flowchart Update_Label_Path_CountChildren):

Data field name Technical name Assigned value

Parent Treelist.Parent [TreeWidget.CurrentTreelistItemStartingAction]

Treelist Needs Update of ChildCount Tree widget.Treelist Needs Update Of ChildCount Yes

Data field name	Technical name	Assigned value
Parent	Treelist.Parent	[TreeWidget.CurrentTreelistItemStartingAction]
Treelist Needs Update of ChildCount	Tree widget.Treelist Needs Update Of ChildCount	Yes

Link to the subflowchart Update_Label_Path_CountChildren.

Note: you can also copy the Add sibling flowchart and delete / adjust assignment nodes and values. Once we created the Add a sibling, Update_Label_Path_CountChildren flowchart and CountChildren function flowcharts we can simply reuse them.
The result should look something like this:

Link the Add child flowchart to a button exit

The final thing we have to do is connect the flowchart to a button exit.

Open the flowchart Main treeview;
Open the User interaction node Treeview and place a button in the footer of the TOC panel;
Call the button exit Add child. You can add an icon (e.g. plus sign +) if desired.
The result should look something like this:

Next drag & drop a subflowchart node on the canvas;
Select the Add child flowchart;
Connect the User interation node Treeview with the subflowchart node.

The result should look something like this:

You can preview the flowchart and check if a child is added correct.

Edit a treelist item (Label)

You can edit a treelist item Label by using a simple flowchart with one User interaction node.

Create a flowchart called Edit_Label_Only;
Drag & drop a User interaction node called Edit label;
Open the User interaction node and place a Reference element (refer to [TreeWidget.TreelistitemActive]) including a Form element with the Label data field;
The result should look something like this:

Drag & drop a Save all database list changes node on the canvas;
Drag & drop a Cancel all database list changes node on the canvas;
Drag & drop an End node on the canvas;
Connect all the nodes.

The result should look something like this:

Link the Edit label flowchart to a button exit

The next thing we have to do is connect the flowchart to a button exit.

Open the flowchart Main treeview;
Open the User interaction node Treeview and place a button in the footer of the TOC panel;
Call the button exit Edit label. You can add an icon (e.g. pencil sign) if desired.
The result should look something like this:

Next drag & drop a subflowchart node on the canvas;
Select the Edit_Label_Only flowchart;
Connect the User interation node Treeview with the subflowchart node.

The result should look something like this:

You can preview the flowchart and check if a label can be edited correct.

Note: it is possible that no treelist item was initially selected. When a user clicks on the Edit label button, the Edit screen is then empty.

You can avoid an empty screen by checking if there is a active treelist item. You can expand the Edit_Label_Only flowchart as follow:

Drag & drop a yellow Decision node on the canvas;

Use the HasValue function to check if the [TreeWidget.TreelistItemActive] has a value, HasValue ([TreeWidget.TreelistItemActive]);

If the function evaluates to No, then go to the End node. You can optionally display a clear notification screen (e.g. Please select an item);

If the function evaluates to Yes, then go to the User interaction node. The result should look something like this:

Deleting a list item

Principle of the function:
When deleting a list item you also have to delete all underlying children (and all their underlying children and so on) of the selected list item. To do this, you have to find all the list items with the active >list item as parent in it’s path. For this reason we have already created the datalist field Path. Don’t forget to Update the ChildCount after deleting!

Create a new flowchart called Delete list item;
First check if an item is selected (this is the same function as described earlier):
a. Drag & drop a yellow Decision node on the canvas;
b. Use the HasValue function to check if the [TreeWidget.TreelistItemActive] has a value, HasValue ([TreeWidget.TreelistItemActive]);
c. If the function evaluates to No, then go to the End node. You can optionally display a clear notification screen (e.g. Please select an item);
d. If the function evaluates to Yes, then go to the User interaction node.
Drag & drop a User interaction node called Confirm delete;
a. Optionally you can check if the list item has Children and display a message (you can use a conditional with a message. The message can be something like this:The condition can be something like this: HasValue ([Treelist] where [Treelist.Path] contains [Treewidget.TreelistItemActive]->[Treelist.Path] AND [TreeWidget.TreelistItemActive]<>Rowid([Treelist]))
b. Create Cancel and Delete Exits;
c. Link the Cancel to an End node;
d. Link the Delete to a green list node (see 4.);
Drag & drop a green list node and select Action: Delete multiple rows. Delete rows that matches: [Treelist.Path] contains [TreeWidget.TreelistItemActive]->[Treelist.Path];
Drag & drop a Save all database list changes node on the canvas;
Drag & drop a green assignment node on the canvas and select the datalist field [Tree widget.Treelist Needs Update Of ChildCount]. Select Action: Yes;
Drag & drop a subflowchart node on the canvas and select the flowchart CountChildren function;
Connect all the nodes.

The result should look something like this:

Link the Delete list item flowchart to a button exit

The next thing we have to do is connect the flowchart to a button exit.

Open the flowchart Main treeview;
Open the User interaction node Treeview and place a button in the footer of the TOC panel;
Call the button exit Delete item. You can add an icon (e.g. trashcan sign) if desired.

The result should look something like this:

Next drag & drop a subflowchart node on the canvas;
Select the Delete list item flowchart;
Connect the User interation node Treeview with the subflowchart node.

The result should look something like this:

You can preview the flowchart and check if an list item (and underlying children) can be deleted correct.

Link content to a treelist item

Linking content to a treelist item (or vice versa, linking an item to content) is fairly easy. Just create a database list with the desired content and add reference field referenced to the Treelist database list. When adding a row to the content database list you only have to assign the reference field to the active list item [TreeWidget.TreelistItemActive].

Go to Data model and Create a new folder called Content;
Create a new database list within the Content folder called Products and create a few fields including a reference field to [Treelist] for example;
a. Treelist item (Reference to Treelist);
b. Product name (Text);
c. Description (Text);
d. Picture (File).

The result should look something like this:

Go to Flowcharts and create a new folder called Content;
Create a flowchart called Add content;
First check if an item is selected (this is the same function as described earlier):
a. Drag & drop a yellow Decision node on the canvas;
b. Use the HasValue function to check if the [TreeWidget.TreelistItemActive] has a value, HasValue ([TreeWidget.TreelistItemActive]);
c. If the function evaluates to No, then go to the End node. You can optionally display a clear notification screen (e.g. Please select an item);
d. If the function evaluates to Yes, then go to the green list node (see 6.).
Drag & drop a green list node on the canvas and add a row to the Products database list;
Drag & drop a green assignment node on the canvas and select the [Content.Products.TreelistItem]reference field. Assign it with the [TreeWidget.TreelistItemActive] value;
Drag & drop a blue User interaction node called Edit content to add Product name, Description and Picture. You can choose to display the User interaction node as an overlay;

Create Save and Cancel Exits;
Drag & drop an End node on the canvas and connect all the nodes;

The result should look something like this:

Return to the Main treeview flowchart and open the User interaction node;
a. Place a Datagrid in the Content panel on the right side of the screen and display the Products database list;
b. You only want to display the content for the selected treelist item. So, you have to add a filter. Add a filter called Show content active treelist item on the database list Products: [Content.Products.TreelistItem] = [TreeWidget.TreelistItemActive]. Use this filter on the datagrid;
c. Next create a new button called Add content in the Content pane on the right side in the footer of the Content panel;
i. Select Show footer: Yes in the panel property;
ii. Place a button called Add content.
d. Connect the Add content exit with the Add content flowchart.

The result of the template should look something like this:

The result of the flowchart should look something like this:

You can preview your flowchart and check if you can add content to an active treelist item and display the content correct.

Move a treelist item

Principle of the function:
When you move a treelist item you basically change or clear (move to Root of tree) the Parent and Path. All the children have to move with their parent. Always recalculate the CountChildren field. We have >already built all the necessary components.

Go to the Tree widget Folder in Flowcharts;
Create a new Flowchart called Move list item;
First assign the temporary field [TreeWidget.CurrentTreelistItemStartingAction] with the active treelist item:[TreeWidget.TreelistItemActive];
a. Drag & drop a green assignment node on the canvas;
b. Select the data field [TreeWidget.CurrentTreelistItemStartingAction];
c. Next choose Action: Advanced and Operand: [TreeWidget.TreelistItemActive];
Next we have to create a User interaction for selecting the treelist item to move to. We are going to use the same Tree widget to select the treelist item to move to;
a. Copy and paste the blue User interaction node Treeview from the Main treeview flowchart to the current Move list item flowchart and rename it to Move item. You don’t need to adjust the Tree widget properties. We use the same database list;
b. Show the copied User interaction node as an overlay;
c. Open the User interaction node and adjust the template. You can delete the Content pane and column. You can create a representative title in the panel (optional) as shown beneath;
d. Create 2 button exits: Move to selected item and Move to root;

The result should look something like this:

Return to the flowchart Move list item;

The result of the flowchart should look something like this:

Next we are going to drag & drop 3 green assignment nodes;
Drag & drop a green assignment node on the canvas;
a. Select the data field [TreeWidget.MoveItemToRoot];
b. Next choose Action:Yes;
c. Connect this assignment node with the button Exit Move to root;
Drag & drop a green assignment node on the canvas;
a. Select the data field [TreeWidget.MoveItemToRoot];
b. Next choose Action:No ;
c. Connect this assignment node with the button Exit Move to selected item;
Drag & drop a green assignment node on the canvas;
a. Select the data field [TreeWidget.TreelistNeedsUpdateChildCount];
b. Next choose Action:Yes ;
c. Connect the other 2 assignment nodes with this assignment node;
Create a Cancel Exit:
a. Select the Move item User interaction node;
b. Create a new button exit named Cancel and place it in the button bar. Don’t forget to check “Ingnore user input”.
c. Drag & drop a Discard all database list changes on the canvas and link this to the Cancel button exit;
Next we are going to check if the new selected treelist item (to move to) is a different item than the active treelist item. If so, then you can proceed. Otherwise you are going to move the active treelist item to herself and that is not our intention, so we are going to Cancel the action (do nothing);
a. Drag & drop a yellow decision node on the canvas;
b. Condition: [TreeWidget.TreelistItemActive] = [TreeWidget.CurrentTreelistItemStartingAction];
c. When it evaluates to Yes then go to Discard all database list changes;
d. When it evaluates to No then go to the green assignment node Move item to root:No;
Next we are going to create a new flowchart to update the Parent, Path and CountChildren after moving the treelist item:
a. Create a new flowchart called Update_Parent_Path_CountChildren_AfterMove;
b. The result should look something like this. The CountChildren function has already been created. The Update_Path_Children_AfterMove flowchart is new:

c. Drag & drop a green list node on the canvas with Action: Goto first row…;
d. The operand of the action is: [1178265: Tree widget.Treelist.ID] = [TreeWidget.CurrentTreelistItemStartingAction];
e. Drag & drop a yellow decision node on the canvas with condition: [TreeWidget.MoveItemToRoot];
f. When the decision node evaluates to Yes, then the new level is the same as the Root level which means that it has no Parent. So you have to clear the Parent of the item to be moved;
g. When the decision node evaluates to No, then you have to update the Parent with the new selected treelist item ID and update the Path with the path of the parent plus ID of the initial treelist item that you selected which you wanted to move;
h. When a treelist item has children, then you will have to update their Paths also. To do this we are going to create an new flowchart;
i. Create a new flowchart called Update_Path_Children_AfterMove;
j. Drag & drop a green loop node and select the Treelistdatabase list;
k. Drag & drop a green assignment node on the canvas and select [Tree widget.Treelist.Path] and Operand: [Treelist.Parent] -> [Treelist.Path] + "|" + [1178265: Tree widget.Treelist.ID];
l. Drag & drop a Save all database list changes node and en End node on the canvas;
m. Link all the nodes. The result should look something like this:

n. Return to the Update_Parent_Path_CountChildren_AfterMove flowchart and connect all the nodes. The result should look something like this:

You can preview your flowchart and check if the move list item function works correct.

This section describes the possible values per property.

Property	Description
Source	Required property. Stores the database list (tree content) behind the Tree widget. See description above for the database list structure.
Selected item	Stores the selected tree item (by a user) of the Tree widget. Use a temporary field. This field must be of data type = Reference.
Icon	Optional. If you leave this property empty, then the icon will be a default yellow folder icon. You can also use expressions including functions to determine the matching icon. Example:
Label text	Data list field of the database list (Source) that contains the label text of an tree item.
Parent id	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 (logical)	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 (logical)	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	Refresh screen, Execute flowchart, Follow exit
On select>Flowchart or Exit	When On select>>Execute flowchart or Exit is selected then a flowchart or exit node must be selected.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Treeview

Introduction

How to use the Tree widget

Preparation: create a database list and temporary fields

Database list for the Tree widget

Create the flowcharts

Initiate root of tree

Main functions of a Tree view

Adding a treelist item, flowchart Add sibling

Link the Add sibling flowchart to a button exit

Generic CountChildren function

Adding a treelist item, add a child

Link the Add child flowchart to a button exit

Edit a treelist item (Label)

Link the Edit label flowchart to a button exit

Deleting a list item

Link the Delete list item flowchart to a button exit

Link content to a treelist item

Move a treelist item

Properties of the Tree widget