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 theWidget
library andAdvanced input
. We are going to use theTree widget
from theAdvanced input
library. You can also select other available libraries. When selected, they will appear in your template editor.
How to use the Tree widget
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:
Database list for the Tree widget
- 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 theTreeview
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 theAdvanced input menu
and place it within aBlock 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 nodeTree widget.Treelist.Path |
Advanced, Operand: “pipe-sign” + [TreeWidget.Treelist.ID] |
Assignment nodeTree 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 fieldParent 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 setAction
toSet 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 theGenerate CountChildren function
; - Then assign (with green assignment nodes) the 4 values for
Parent
,Label
,Path
andCountChildren
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 toUpdate_Label_Path_CountChildren
; - Open the flowchart and delete every node till User Interaction node
Label
; - Next connect the
Start
node to the User Interaction nodeLabel
.
The result should look something like this:
- Next open the
Add sibling
flowchart and delete every node from the User Interaction nodeLabel
. Leave theEnd
node on the canvas; 5. Drag & drop a subflowchart node on the canvas and select the just createdUpdate_Label_Path_CountChildren flowchart
; 6. Connect the green assignment node to the subflowchart node; 7. Finally connect the subflowchart node to theEnd
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 theTreelist
database list; - Connect the Yes Exit of the
Decision node
theLoop node
; - Drag & drop a green assignment node on the canvas. Select
[Tree widget.Treelist Temp]
and set the Action toSet to current entity row
; - Drag & drop a green assignment node on the canvas. Select
[Tree widget.Treelist.CountChildren]
and set the Action toAdvanced
. 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 theSave all database list changes
; - Connect the No Exit of the
Decision node
to theEnd 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 toSet 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 theGenerate CountChildren function
; - Then assign the value for
Parent
andTreelist Needs Update of ChildCount
as below (theLabel
,Path and CountChildren
are already been taken care of in the existing flowchartUpdate_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
- 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 theAdd a sibling
,Update_Label_Path_CountChildren
flowchart andCountChildren 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 aForm element
with theLabel
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 theHasValue
function to check if the[TreeWidget.TreelistItemActive]
has a value,HasValue ([TreeWidget.TreelistItemActive])
;
c. If the function evaluates to No, then go to theEnd
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 theUser 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 ayellow Decision node
on the canvas;
b. Use theHasValue
function to check if the[TreeWidget.TreelistItemActive]
has a value,HasValue ([TreeWidget.TreelistItemActive])
;
c. If the function evaluates to No, then go to theEnd
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 addProduct name
,Description
andPicture
. You can choose to display the User interaction node as an overlay;
- Create
Save
andCancel
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 theProducts
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 calledShow content active treelist item
on the database listProducts
:[Content.Products.TreelistItem] = [TreeWidget.TreelistItemActive]
. Use this filter on the datagrid;
c. Next create a new button calledAdd 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 calledAdd content
.
d. Connect theAdd content
exit with theAdd 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) theParent
andPath
. All the children have to move with their parent. Always recalculate theCountChildren
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 nodeTreeview
from theMain treeview
flowchart to the currentMove list item
flowchart and rename it toMove 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
andMove 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 ExitMove 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 ExitMove 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 theMove item
User interaction node;
b. Create a new button exit namedCancel
and place it in the button bar. Don’t forget to check “Ingnore user input”.
c. Drag & drop aDiscard all database list changes
on the canvas and link this to theCancel
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 ayellow decision node
on the canvas;
b. Condition:[TreeWidget.TreelistItemActive] = [TreeWidget.CurrentTreelistItemStartingAction]
;
c. When it evaluates to Yes then go toDiscard all database list changes
;
d. When it evaluates to No then go to the green assignment nodeMove item to root
:No; -
Next we are going to create a new flowchart to update the
Parent
,Path
andCountChildren after moving the treelist item
:
a. Create a new flowchart calledUpdate_Parent_Path_CountChildren_AfterMove
;
b. The result should look something like this. The CountChildren function has already been created. TheUpdate_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 Treelist
database 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.
Properties of the Tree widget
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. |