App design - Tree selector widget

Version 2.2 introduces a new widget that allows users to visualise the data structure (hierarchy) and select a single element from the tree. With this tool, users can easily select specific elements from the hierarchy and categories, greatly improving data management.

Widget use

The widget allows the tree to be linked to other widgets, such as a spreadsheet or a single field. This makes it possible to display additional information or specific values from the hierarchy. The solution presented is extremely useful in situations where complex data structures need to be presented.

Example of structure

By using the above modes, users can easily manage the data structure, select specific elements and display additional information.

Widget - tree selector

Widget properties

After adding the 'Tree Selector' widget, enter the lookup formula with the table name in the 'Filter' field in the properties to link the table to the tree widget.

Widget modes

The widget is divided into two modes, which allow for different approaches to data presentation:

1. Category 

This mode allows records to be grouped according to values from a specific column, which is particularly useful in situations where it is necessary to organise data into categories.

Mode - categories

Formula - defines a rule for grouping elements at a given hierarchy level. Records for which the formula returns the same value will be placed in one category. The formula can use the name of a column in the data table. 
 
Icon - the name of the icon that will be displayed next to the item in the tree. You can select it from a list, type the icon name or return it using formulas.
 
Text style- we can specify the appearance of the element by setting one of the defined styles, or create our own.
 
Icon style - you can specify the style of the icon from the defined styles, or create your own

Widget - Selection from the tree by category mode

1 Example

Example table

Mode - Categories

Tree widget (collapsed) - view in an instance

Tree widget (expanded) - view in an instance

2 Example

The table contains the same structure and data as above. In this example, the categories are listed differently.

Categories - department, position, name

Result of the 'Tree selector' widget with category mode

 

Displaying values from the tree to sections - category mode

It is possible to display the tree elements in the spreadsheet section and in a single field. When you click on a tree element, the value of the selected record will appear in the spreadsheet setion. This functionality works similarly to the master-detail.

Use of formulas in the designer

To display in the spreadsheet or in a single field the value from a specific category of the tree, use =tree_name.level in the cell, where level is the number corresponding to the category.

If you use only =tree_name in the formula, the value from the last category level will be displayed.

However, this value will be displayed only when the user clicks on the last level of the tree.

Result

In the instance when an employee's name is clicked in the tree, it will be displayed in the first cell of the sheet. In the second cell, the formula =section4.level2 will return the value 'CEO', as the second category in the tree is 'POSITION'.

2. Parent-child mode

A hierarchical mode for arranging data according to relationships. In the resulting tree, each element corresponds to one record. This mode allows the representation of complex relationships between data.

 
Parent-child mode
 
 
In a tree widget in parent-child mode, we are dealing with a hierarchical display of data. Each element must have an identifier and a parent identifier.
 
Identifier - the name of the column by which we will identify the individual elements in the tree structure. In combination with the parent identifier, this allows the hierarchy and structure of the entire tree to be determined.
 
Parent's ID - The name of the column in which the identifier of the parent row in the tree structure is given. In other words, the parent identifier is the key by which the records in the table will be linked.
 
Displayed value - the formula for the displayed value. The tree elements will contain the texts returned by this formula.
 
Icon - the tree elements will contain the icons returned by this formula.
 
Widget - Tree selector in parent-child mode
 
In this example, our identifier is the ID and the parent identifier (i.e. the parent element) is the POSITION_ID
Example values - parent-child mode
 
Tree widget in parent-child mode in an instance (collapsed)
 
View of the 'Tree Selector' widget with application of the parent-child mode
 

Displaying values from a tree to a section - parent-child mode

It is possible to display the tree elements in a spreadsheet section as well as a single field. When you click on a tree element, the section will display the value from the selected record. This works in a similar way to the master-detail section.

In hierarchical mode, we can use the formula =tree_name.path, which returns an array of values from all levels from the selected row.

To pull specific elements from the array, use e.g:
 
FIRST - Displays the first element of a particular branch. Example: "John" is displayed as the first element of the branch.
LAST - Displays the last element from the given branch. Example: "Thomas" has been displayed as the last element of the branch.
JOIN- concatenates elements from the entire branch in the hierarchy with the separator ','. Example: "John,Mary,Thomas" shows the full structure from the highest to the lowest position in the branch.

The result of the above formula
 
Searching for elements in the tree in an app instance

Use the arrows next to the search bar to collapse and expand the structure.

At the top of the widget is a search bar where we can enter the name of the item we want to search for.

 

Styles - Tree selector
 
  • Section:

    • We can choose a style from the list or specify it using a formula.
    • Border settings:
      • Using the border options, we can set its parameters (top, bottom, left, and right) by selecting the appropriate color and rounded edges.
    • Adding section shadow:
      • By adding a shadow to the section, we have the option to adjust its color
  • Header:
    • We can give a header style to a section by selecting it from a list of styles or by calculating it using formulas. We can also give a border (top, bottom, left, right) and round the edges. In addition, we can set our own style from the formatting bar and save it.
  • Search bar:
    • We can select a style from a list, set the italicisation of the text to be typed into the search engine and its colour, and then save it.
  • Search bar - placeholder:
    • We can select a style from a list, set the italicisation of the text to be typed into the search engine and its colour, and then save it.
  • Buton:
    • We can set the style from a list or using formulas, as well as the colour of the button on the top right next to the search bar.
  • Button (hover):
    • We can set the same styles as for the button, but they will be visible when the cursor hovers over the
  • Contents:
    • We can give a style to the content of the widget by selecting a style from a list or by calculating it using formulas. We can also give a colour, set a border (top, bottom, left, right).
  • Item text:
    • We can give a style to the text of an element by selecting from a list of styles or by calculating it using formulas. In addition, we can set our own style from the formatting bar and save it.
  • Item text (hover):
    • We can set the same styles as for the element text, but they will be visible when the cursor is hovered over.
  • Selected item text:
    • The text style can be obtained by clicking on a value in the tree. We can give a style from a list or calculate using formulas, and also set the font and background colour.
  • Item icon:
    • We can set the style from a list, calculate it using formulas or give the icon a colour.
  • Item icon (hover):
    • We can set the same styles as for the item icon, but they will be visible when the cursor is hovered over.
  • Warning icon:
    • When a warning occurs in the tree, a style can be given by selecting it from a list, calculating it using formulas or giving a custom colour to the icon.

There is an icon next to each style property:

-with which we can reset the set style

-with which we can save the selected style

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk