The 'Tree' element offers the possibility to display entries as a tree structure, to browse them and to offer a selection of entries by the user.

images/download/attachments/58596639/image2019-2-7_15-47-44-version-1-modificationdate-1601454115709-api-v2.png

In order for such a tree structure to be created from dynamic data, defined conditions are placed on the structure of the data source.
This means above all under which data field the subnodes of an entry are to be read. Furthermore, data fields for the label or an icon per entry can also be defined in each case.
The application example shown above is based on a 'StaticValuesService' with a 'FixedValuesConverter' as the data source for the tree nodes:

Example of data structure for tree nodes

[
    {
        "key": "1",
        "label": "Kategorie: Obst",
        "icon": "fa://fa-apple",
        "items": [
            {
                "key": "11",
                "label": "Banane"
            },
            {
                "key": "12",
                "label": "Apfel"
            } 
        ]
    },
    {
        "key": "2",
        "label": "Kategorie: Gemüse",
        "icon": "fa://fa-envira",
        "items": [
            {
                "key": "21",
                "label": "Bone"
            },
            {
                "key": "22",
                "label": "Salat"
            }
        ]
    },
    {
        "key": "3",
        "label": "Kategorie: Fahrzeuge",
        "icon": "fa://fa-car",
        "items": [
            {
                "key": "31",
                "label": "Autos",
                "items": [
                    {
                        "key": "311",
                        "label": "Ford Mustang"
                    },
                    {
                        "key": "312",
                        "label": "Audi A4"
                    }
                ]
            },
            {
                "key": "32",
                "label": "Motorräder",
                "items": [
                    {
                        "key": "321",
                        "label": "Suzuki"
                    },
                    {
                        "key": "322",
                        "label": "Yamaha"
                    }
                ]
            }
        ]
    }
]

How the information of the data structure is to be interpreted is defined via the property editor:

images/download/attachments/58596639/image2019-4-2_15-7-10-version-1-modificationdate-1601454115690-api-v2.png

(1) Children data field: This defines under which data field the subnodes of a node are to be read. Here in the example 'items' (compare the data structure example).

(2) Label expression: The labeling of the nodes (2) [category 'Entries and Service'] can be defined with the help of an expression (All expressions and functions of the Ausdruckparsers are available).
In this example, only the content of the 'label' field is used (compare the data structure example).

(3) Icon expression: Analogous to the label, this can be optionally stored as an Ausdruck. In this example marked as 'icon' (compare the data structure example).

(4) Css classes expression: Styling experts can also apply Css classes to individual tree entries. Multiple class names are separated by spaces.
All functions of the Ausdruckparsers are available here as well. The Css classes themselves can be defined in the 'Style Designer module' (recommended for experts only!).
Example: 'classname1 classname2 classname3'.

Events (Behaviour)

Event	Description
Changed	Triggered when the set of checked elements changes. The selected elements are passed to the behaviour (see also Data model).
Selected items	Is triggered as soon as an item in the tree is selected (e.g. click on a tree node). Caution: Not to be confused with 'checked'. The selected item is passed as an object to the configured behaviour. If the 'Allow multiple selection' option is active, the first entry in the selection list is always passed here.
Selected items	This is triggered when the 'Allow multiple selection' option is active and always returns a list of items, even if only one has been selected. The list of selected items is passed to the configured behaviour.
Double click item	Triggered as soon as a tree node is double-clicked. The clicked item is passed to the configured behaviour.
Search term changed	Triggered as soon as the search term is changed in the search field of the tree. The new search term is passed to the behaviour.

Data model

Under the umbrella of the tree component is the data model of a Multiselect combobox (see also chapter Listenelement for details on services). The tree nodes are to be understood as an entry pool and 'checked' nodes as the 'values' of the tree.
In order to be able to use the data model of the tree in the first place, the property Items checkable must be activated via the property editor.

Another useful setting is the option Only leaves as values. This determines whether nodes, which in turn have subnodes (branches) appear as values of the element data or only items without subnodes (leaves).

For example, the image at the top shown initially would have the following element data (the data field of the tree).

Daten des oben gezeigten Baumes

{
    "tree": [
        "322",
        "321",
        "21"
    ]
}

Element type table

The tree component also offers another display type via the 'Common' property rubric: 'Table'. This display type allows you to add columns in order to be able to display further information per entry, formatted accordingly.
How to configure such a tree table is explained in the chapter Tree element type: Table.