Tree View
The Tree View control facilitates navigation through forms arranged in a hierarchical tree structure. Forms are accessed by selecting nodes within the tree view, which directs users to the corresponding form upon clicking.
Working with TreeView
1: Create a form having ‘TreeView control’, as shown below: –
(Figure 1)
2: In TreeView, user can add nodes by Data Source Configuration as shown below:
(Figure 2, Figure3)
(Figure 2)
(Figure 3)
3: User can perform the node as add node, delete node, cut node, paste node etc by clicking on the arrow of nodes.
(Figure 4)
4: In the Tree View Configuration window, the names, images, IDs, and sort IDs of selected nodes can be edited (Figure 5), and forms can be navigated to each node via the Navigate URL (Figure 6).
(Figure 5)
(Figure 6)
5: Forms are navigated to nodes from the ‘Navigate Form’ window. Select a form, configure the target field name and source field name, then click on ‘Add’, followed by clicking the ‘Ok’ button.
(Figure 7)
6: The direct form URL of a form containing the Tree View control is depicted in Figure 8. Upon clicking on each node, the form configured within the nodes will open.
(Figure 8)
TreeView Properties
Here is the fundamental list of properties that can be utilized from rules.
Style.Width – For selecting and setting the Width of TreeView control.
Style.Height – For selecting and setting the Height of TreeView control.
Style.Margin – For selecting and setting the Margin of TreeView control.
Style.BoxShadow – For selecting and setting the Box Shadow of TreeView control.
Style.FontColor – For selecting and setting the Font Color of TreeView control.
Style.FontSize – For selecting and setting the Font Size of TreeView control.
Style.BackGroundColor – For selecting and setting the Background Color of TreeView control.
Style.Visibility – For selecting and setting the Visibility of TreeView control.
Style.Enable – For selecting and setting the Enable property of TreeView control.
Style.TextFont – For selecting and setting the TextFont of TreeView control.
ToolTip – The text that needs to be displayed when a user pauses the mouse pointer over the control.
Label.ShowLabel – To Show or Hide the Label attached to the TreeView control.
Label.Text – To select and set the Text of the label attached to the TreeView control.
Label.Position- To select and set the position of the label attached to the TreeView control.
Label.Style.Width – To select and set the Width of the Label attached to the TreeView control.
Label.Style.Height – To select and set the Height of the Label attached to the TreeView control.
Label.Style.TextAlignment – To select and set the Text Alignment of the Label attached to the TreeView control.
Label.Style.TextVerAlignment- To select and set the V-Text Alignment of the Label attached to the TreeView control.
Label.Style.Margin- To select and set the Margin of the Label attached to the TreeView control.
Label.Style.BoxShadow- To select and set the Box Shadow of the Label attached to the TreeView control.
Label.Style.TextFont- To select and set the Text Font of the Label attached to the TreeView control.
Label.Style.FontSize- To select and set the Font Size of the Label attached to the TreeView control.
Label.Style.Bold- To select and set the Bold property of the Label attached to the TreeView control.
Label.Style.Italic- To select and set the Italic property of the Label attached to the TreeView control.
Label.Style.Underline- To select and set the Underline property of the Label attached to the TreeView control.
Label.Style.FontColor- To select and set the Font Color of the Label attached to the TreeView control.
Label.Style.BackGroundColor- To select and set the Background Color of the Label attached to the TreeView control.
SelectedItem- For selecting and setting the selected Item property of TreeView control.
Designer Properties
Here’s the list of available properties in TreeView Control from designer.
Control Name: TreeView
Group: Navigation
| S.no | Property name | Data type | Description | ||
| General | |||||
| 1 | Tooltip | String | The texts that needs to be displayed when the user hover the mouse pointer over the control, without clicking it. | ||
| 2 | Remarks | String | To make a comment or observation about the control for reference. | ||
| Attached Label | |||||
| 3 | Show Label | Boolean | To display the attached label along with the control. | ||
| 4 | Label Text | String | Sets the text content of the label attached to the control. | ||
| 5 | Label Position | String | To place the label attached in various positions around the control. | ||
| 6 | Label Width | String | Sets the suggested width or thickness of the label attached to the control. | ||
| 7 | Label Height | String | Sets the suggested height of the label attached to the control. | ||
| 8 | Text Alignment | String | To align the texts inside the label attached to different positions within the control. | ||
| 9 | V-Text Alignment | String | Specifies whether the text is set to top, middle or bottom aligned. | ||
| 10 | Margin | String | Sets the edge or outer margin to the control. | ||
| 11 | Padding | String | Sets the padding of the control(left, top, right, bottom). | ||
| 12 | Box Shadow | String | Shows box shadow values(Horizontal shadow, vertical shadow, blur shadow , color). | ||
| 13 | Font | String | Sets the font face\style. | ||
| 14 | Font Size | String | Sets the size of the text in attached label. | ||
| 15 | Bold | Boolean | To make the attached label text Bold. | ||
| 16 | Italic | Boolean | Italicize the attached label text. | ||
| 17 | Underline | Boolean | To Underline the attached label text. | ||
| 18 | Font Color | String | Sets the Font Color of the control. | ||
| 19 | Background Color | String | Sets the BackGround Color of the control. | ||
| DataSource | |||||
| 20 | Items | On clicking Browse button of the items will open a data source window. | |||
| Style | |||||
| 21 | Width | String | Sets the suggested width or thickness of the control. | ||
| 22 | Height | String | Sets the suggested height of the control. | ||
| 23 | Margin | String | Sets the edge or outer margin to the control. | ||
| 24 | Padding | String | Sets the padding of the control( left, top, right, bottom). | ||
| 25 | Box Shadow | String | Show box shadow values(Horizontal shadow, vertical shadow, blur shadow , color). | ||
| 26 | Enable Custom Font | String | Enable custom font family | ||
| 27 | Font | String | Sets the font face\style. | ||
| 28 | Font Size | String | Sets the font size. | ||
| 29 | Font Color | String | Sets the Font Color of the control. | ||
| 30 | Background Color | String | Sets the Background color of the control. | ||
| 31 | Visible | Boolean | Sets the visibility of the control while rendering. | ||
| 32 | Enable | Boolean | Sets the accessibility of the control during rendering. | ||
| 33 | Bold | String | To make the control text Bold. | ||
| 34 | Italic | String | Italicize the control text. | ||
| 35 | Column Span | String | To merge the number of column specified. | ||
| Rules | |||||
| 36 | Rules | After selecting the control, If user clicks Rules tab it will be expanded and displays a Rules property. Create Rule can be selected from a drop down list. On clicking the Create Rule link button will navigate the user to the Rules Engine. The same control will be added as a trigger by default to execute the Rule. | |||
| Custom Style | |||||
| 37 | CSS Class | String | Allows you to add CSS class to your control to change the default formatting for any of our themes | ||
| Template | |||||
| 38 | Inherit Template | Boolean | Enable this property to inherit control style from applied template | ||
| Reports | |||||
| 39 | Control Report | Control Report will redirect to Reports tab that will display all the configurations, rules and data sources details associated to the selected control. | |||
Quick Action Menu
TreeView control will contain Quick action menus such as – Control, Label, Data Source, Rules /Attributes.
