Tree / Tree View

The tree element is used to represent hierarchical folder structures, such as table of contents. You can change the folder structure in the browser using drag-and-drop. The tree is available as an input element ("Tree") and as a view element ("Tree View").

Both elements can be linked to a data field. The tree input control can save selected values, while the tree view control can load previously saved values on a page specified as the jump destination.

Both elements are part of the overviews. In the description that follows, you will learn how to configure the elements in the "Applications" module.

You can find a practical guide to the tree's features in the browser here: Tips & Tricks - Tree.

 

You can find the tree elements in the "Applications" module under "Elements. " You can create a new element by dragging and dropping it from here onto the workspace.

For more information on creating elements, click here.

Tree and Tree View - Properties

Since the settings for input and display control differ only slightly, they are described together here.

General

When you create the tree, the Properties dialog box opens automatically.

Title

You can enter the tree's title here. You can find information about multilingual titles here.

Input Required

With this setting, the "Tree" input control becomes a required field.

This setting is not available for the "Tree View" element.

Allow moving folders

With this setting, you can use drag-and-drop to move folders to a different location in the tree within the browser.

Click "Next."

Data

Data

Data Group

Select the data group here whose data you want to display in the tree structure. Clicking "Filter" at opens a dialog box where you can set up a filter to narrow down the tree data as needed.

Key

The field selected here should contain unique values that can be used to identify a single tree node. It does not necessarily have to be the primary key.

Parent Key

Field in which the tree element automatically stores the ID of the parent folder as soon as a new folder is created in the browser.

Create a New Data Field

Opens a dialog box where you can create a new data field in the selected data group that contains unique integer values for identifying the records.

Title

Field containing the folder label.

Advanced Features

Opens a dialog box where you can limit the tree view to specific sections.

Filter for the first entry

Clicking "Filter" at opens a dialog box where you can define a filter to hide parts of the tree.

Default value for Folder 1. Level

Enter the parent ID of the folder that is not visible in this section here. This ID can be found in the database. It is automatically entered by the tree checker in the "Parent Key" field for newly created folders at the top level. Only by specifying the "default value for Folder 1." "Level" allows the folder hierarchy to be accurately represented throughout the entire tree.

Number of records per query

Specify here how many records should be preloaded when a branch is expanded. This setting improves performance when displaying layers that contain a large number of entries. Ultimately, the browser displays all entries contained in a folder. The restriction specified here applies only to the initial loading of the records.

Click "OK" to save the settings and close the dialog box.

Sorting

Order

The field selected here determines the sort order of the folders on the same level in the tree.

Create a New Data Field

Opens a dialog box where you can create a new data field that determines the sort order.

Please do not change the values in the data fields associated here with the key, the parent key, and the order. These values are automatically managed by the tree control when new folders are created or existing folders are modified. Otherwise, the proper functioning of the tree check cannot be guaranteed.

Symbols

Symbol

You can use this field if you do not want to use the image specified in the "Default" field (see below).

In this case, select the column from the data group that contains the desired image for the folder.

Specification

The image or icon selected here serves as the default image for the folders in the tree structure.

Edit

Opens a dialog box where you can load any image or icon.

Icon selected

You can use this field if you do not want to use the image specified in the "Default" field (see below).

In this case, select the column from the data group that contains the desired image for the selected folders.

Specification

The image or icon selected here serves as the default image for selected folders in the tree structure.

Edit

Opens a dialog box where you can load any image or icon.

Jump to

Edit

You cannot navigate away from the tree control because clicking on an entry selects it, which prevents a second action—such as loading a page—from being performed. Instead, a dialog box opens here where you can write JavaScript functions and assign them to events.

Selecting "Tree View" opens a dialog box where you can configure the jump destination

You can find all the information about this dialog here.

Click "OK" to save your changes and close the dialog box.

Click "Next."

For the tree control, you can configure the data binding in the next step. You can find more information here.

In the "Tree View," the next step gives you the option to define the element's binding. You can find all the information here.

Then click "Next."

Final Settings

Here, you can show or hide the buttons located above the folder tree in the browser that are used to edit folders.

These buttons can also be created later via the "Edit" main menu, provided that the tree element is selected on the workspace.

When you click "Create Path Navigation," a path navigation is created along with the new tree element; it is then already linked to the tree and configured accordingly.

Click "Finish" to save all settings and complete the tree configuration.

More Information

Tips & Tricks - Tree

Path Navigation for Tree