- 02 Dec 2024
- 7 Minutes to read
- Print
- PDF
Tree View
- Updated on 02 Dec 2024
- 7 Minutes to read
- Print
- PDF
The Tree View control in Form Designer module provides a visual representation of data in a hierarchical structure, resembling a tree with parent and child nodes.
This control is specifically useful for displaying data that has a nested or hierarchical relationship, such as product categories or classification. It allows users to easily navigate through levels of data, expand or collapse nodes to view or hide details, and interact with the data in an intuitive way.
Figure: Tree View Example
Figure: Tree View Control
Use Case User Persona: Application Designer | Solution |
NovaTechaims to enhance its Service Catalog by providing users with a structured view of service categories and subcategories, facilitating easy navigation through the catalog's offerings. | To meet this requirement, Sam can make use of the Tree View control. This control displays the parent category along with its associated subcategories in a hierarchical format, offering users a clear and organized view of the available services. By implementing the Tree View control, NovaTech ensures a seamless and intuitive browsing experience for its users within the Service Catalog. |
Configure Tree View Control
Here's a sneak peek into how you can configure the Tree View Control.
1. Navigate to General tab of Form Designer. Enter all mandatory details required for the Form.
2. In Design Form tab, from the left pane select Controls > Form Controls > Tree View Control.
3. Drag and drop this control inside a panel to create a Tree View field.
4. Click (Settings icon for this field) Tree View to view Properties pop-up.
UI Control Properties for Tree
You can view the following tabs on the settings for this field:
Properties
This section allows the user to configure the Tree control properties.
Figure: Tree Properties
Field | Description |
General | |
Title | Type in a unique name for the tree. Example: Category |
Sub Title | The subtitle text is useful to give the user an idea of what kind of information they need to fill in. Subtitle text appears directly beneath the control container. Use it to explain why a piece of information is being requested, address security and privacy concerns, or suggest ways of providing answers. |
Render As | Select from the drop-down to determine the behavior of the control. Selection Tree - Enables users to choose items from a hierarchical structure. Selection tree is mostly used by end-users to make selections. Tree Builder - Field with a form that allows users to construct and configure hierarchical structures, such as organizational charts or category trees. Tree Builder is mostly utilized by Administrators to create and customize hierarchical data structures within the application. |
Render Style | Select from the drop-down to choose how you want the Tree View control to appear. Inline - The Tree View control will appear inline within the drop-down. Pop-up - The Tree View control will appear as a pop-up on choosing this option. |
Selection Type | Select from the drop-down to determine the behavior of the control. Single Value - Choose this option to allow the selection of a single value at a time. Multiple Value - Choose this option to allow the selection of multiple values at a time. |
Default Sort Criteria | Select the sort order criteria. Available options are as follows:
For the End User, values are automatically sorted according to the default criteria set by the Application Designer. However, the End User can change the sorting order using Collapse button. Note The sorting functionality applies to both Root Node and Child Node values, ensuring that the entire hierarchy is organized according to the selected sorting preference. |
Advance
This section allows user to enhance the advanced features in Tree View. See Field Description given below.
Figure: Advance
Field | Description |
General | |
Include as Filter | If enabled, then the respective control is available as a filter option on the Form Designer list page of the application. |
Include as a column in grid view | If enabled, then the respective control is available in Grid view on the Form Designer list page of the application. |
Is Clickable | If enabled, a pop-up window with text is displayed. For example: The pop-up window with Text, URL, Email address, Password or Telephone will be displayed. |
Allow Selection of Parent Node | If enabled, this allows the Parent Node to be a selectable field in the Tree View control. |
Include in Template | If enabled, then the Tree View field can be included in the export template for the form. |
Validations
This section contains the list of validation setups using which Application Designer can configure the respective value based on status and any condition. To know more about the fields that are available under the Validations section, see Field Description given below.
The Application Designer can add ‘pre-built validations’ to save time and effort by ensuring data accuracy and completeness without the need for custom rules. These validations offer a standardized method of data validation across forms, reducing errors and improving data reliability.
Figure: Tree Validations
To know more about the fields that are available under the Validations section, see Field Description given below:
Field | Description |
Mandatory | Choose Mandatory from the drop-down to make the control a mandatory control. It ensures that this field must be filled out before submitting the form. |
Disabled | Select Disabled from the drop-down to make the control a disabled control. It makes the control read-only and prevents any changes or inputs. |
Hidden | Select Hidden from the drop-down to hide the control. It ensures that this field must be hidden if it contains any personal information. |
Editable | Select Editable from the drop-down to make the control as an editable control. |
Appearance
Customize controls appearance by aligning brand colors through appearance properties, enhancing user experience, and reinforcing brand identity.
Figure: Tree Appearance
Field | Description |
Text | |
Font Type | Choose the desired font type from the drop-down menu to customize the appearance of the Tree View |
Font Color | Select a font color from the color palette to enhance the visibility and aesthetics of the Tree View. |
Font Size | Adjust the font size to your preference for better readability and presentation of the Tree View. |
Font Style | Apply font styles such as Bold, Underline, or Italic to emphasize specific text within the Tree View. |
Security
This section contains the list of validation setups using which the Application Designer can configure the respective control as mandatory, based on condition, and so on. To know more about the fields that are available under the Security section, see Field Description given below.
Field | Description |
Restrict field access | Enable this option to ensure that designated roles possess exclusive viewing or editing privileges for the content within the Tree View control, thereby restricting access to authorized users only. For example: In a financial management system, only designated financial analysts or managers should have access to view or edit sensitive financial data entered in the Tree View control. |
Encrypted | Enable this option to ensure sensitive information remains secure and confidential by making it unreadable without the appropriate decryption key. For example: In a financial management system, sensitive information such as bank account details can be encrypted and only personnel with a decryption key can access the information. |
Data Source
This section contains the list of validation setups using which the Application Designer can configure the respective control as mandatory, based on condition, and so on. To know more about the fields that are available under the Data Source section, see Field Description given below.
Figure: Tree Data Source
The following screenshot is displayed if the Data Source is selected as API.
Figure: Data Source - API
The following screenshot is displayed if the Data Source is selected as Manual.
Figure: Data Source - Manual
Field | Description |
Data Source | Using this option, you can define from where the data should populate for the Autocomplete control. The available options are:
|
Parent | This is the parent for the parent-child relation necessary for the tree view |
Is Parent Encrypted? | |
Table | Select the required table from the Table drop-down list. |
Label Column | Select the required source column from the Label Column drop-down list. |
Tree Parent Column | Select the required parent for the tree from the Tree Parent Column drop-down list. |
Tree Child Column | Select the required child for the tree from the Tree Child Column drop-down list. |
Duplicate Values at Different Node Levels
In a tree view control, the Application Administrator can configure the same values at different positions within the nodes, provided they are not at the same node level.
For example: 'Others' category can appear under both the 'Software' and 'Software Failure' nodes, as these are distinct parent nodes.
Figure: Duplicate Values at Different Nodes
Figure: Duplicate Values at Same Nodes
The End User can select multiple values selection in Tree View control.
Selected values will display as follows:
- A single value appears alone
- Multiple values are shown as a comma-separated list
The End User can view the entire selection path by hovering over the lead node displayed in the grid, which reveals it as a tooltip.
The End User can apply filter conditions to fields using a tree view control for a simple or advanced filter. Selecting a tree view field loads its operators, followed by tree values. Only chosen node values are displayed, with the full path shown on hover.
In the exported Excel or PDF files, the consumer can view the full tree path. Selected values will be separated by commas or another suitable delimiter.
The Application Designer can see tree control type fields and other fields in the Available Columns section while designing the List page in the form designer. Add these fields to the Display Columns section to have them shown by default when the list page loads.
The End User will see all defined available columns, including tree view and others, directly on the list page. By expanding the Configure Columns option, users can view all controls, regardless of type, and include them on the list page by selecting the corresponding check box.