Das "Baum" Element bietet die Möglichkeit Einträge als Baumstruktur darzustellen, diese zu durchsuchen und eine Auswahl der Einträge durch den Benutzer anzubieten.

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

Damit eine solche Baumstruktur aus dynamischen Daten erzeugt werden kann, werden definierte Bedingungen an die Struktur der Datenquelle gestellt.
Gemeint ist vor allem, unter welchem Datenfeld die Unterknoten eines Eintrags gelesen werden sollen. Ferner können auch jeweils Datenfelder für die Beschriftung oder ein Icon pro Eintrag definiert werden.
Dem oben gezeigte Anwendungsbeispiel wurde ein "StaticValuesService" mit einem "FixedValuesConverter" als Datenquelle für die Baumknoten hinterlegt:

Beispiel Datenstruktur für Baumknoten

[
    {
        "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"
                    }
                ]
            }
        ]
    }
]

Wie die Informationen der Datenstruktur zu interpretieren sind, wird über den Eigenschafteneditor festgelegt:

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

Das "Kinder Datenfeld" (1) legt fest, unter welchem Datenfeld die Unterknoten eines Knotens gelesen werden sollen. Hier im Beispiel "items" (vergleiche Beispieldatenstruktur).

Die Beschriftung der Knoten (2) [Kategorie "Einträge und Service"] kann mit Hilfe eines Ausdrucks festgelegt werden (Es stehen sämtliche Ausdrücke und Funktionen des Ausdruckparsers zur Verfügung).
In diesem Beispiel wird lediglich der Inhalt des "label" Feldes verwendet (vergleiche Beispieldatenstruktur).

Analog zur Beschriftung kann auch eine optionale Icon-Quelle (3) als Ausdruck hinterlegt werden. Hier im Beispiel "icon" (vergleiche Beispieldatenstruktur).

Styling-Experten können mit Hilfe des "Css-Klassen Ausdrucks" (4) auch Css-Klassen auf einzelne Baumeinträge anwenden. Mehrere Klassennamen werden durch Leerzeichen voneinander getrennt.
Auch hier stehen sämtliche Funktionen des Ausdruckparsers zur Verfügung. Die Css-Klassen selbst können im Style-Designer Modul definiert werden (empfohlen nur für Experten!).
Beispiel: "Klassenname1 Klassenname2 Klassenname3"

Ereignisse (Verhalten)

Ereignis	Beschreibung
Geändert	Wird ausgelöst, wenn sich die Menge der angehakten Elemente ändert. Die ausgewählten Elemente werden an das Verhalten übergeben (siehe auch Datenmodell)
Eintrag ausgewählt	Wird ausgelöst, sobald ein Eintrag im Baum markiert wird (z.B. Click auf einen Baumknoten). Achtung: Nicht zu verwechseln mit "angehakt". Der ausgewählte Eintrag wird als Objekt an das konfigurierte Verhalten übergeben. Ist die Option "Mehrfachselektion" aktiv, so wird hier immer der erste Eintrag in der Selektionsliste übergeben
Einträge ausgewählt	Wird ausgelöst wenn die Option "Mehrfachselektion" aktiv ist und übergibt immer eine Liste von Einträgen, auch wenn nur einer ausgewählt wurde. Die Liste der ausgewählten Einträge wird an das konfigurierte Verhalten übergeben.
Eintrag Doppelklick	Wird ausgelöst sobald auf einen Baumknoten doppelt geklickt wurde. Der geklickte Eintrag wird an das konfigurierte Verhalten übergeben.
Suchbegriff geändert	Wird ausgelöst, sobald der Suchbegriff im Suchfeld des Baumes geändert wird. Der neue Suchbegriff wird an das Verhalten übergeben

Datenmodell

Unter der Haube der Baumkomponente verbirgt sich das Datenmodell einer Multi-Combobox (Siehe auch Kapitel Listenelemente für Details zu Services). Dabei sind die Baumknoten als Eintrag-Pool und "angekreuzte" Knoten als die "Werte" des Baumes zu verstehen.
Um das Datenmodell des Baumes überhaupt erst verwenden zu können muss die Eigenschaft "Einträge auswählbar" über den Eigenschafteneditor aktiviert werden.

Eine weitere nützliche Einstellung ist die Option "Nur Blätter als Werte". Diese legt fest, ob Knoten, welche wiederum Unterknoten besitzen (Äste) als Werte der Elementdaten auftauchen oder eben nur Einträge ohne Unterknoten (Blätter).

Das initial gezeigte Beispiel (Bild ganz oben) hätte beispielsweise folgende Elementdaten (das Datenfeld des Baumes ist "tree"):

Daten des oben gezeigten Baumes

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

Elementtyp Tabelle

Die Baumkomponente bietet über die Eigenschaftenrubrik "Allgemein" auch eine weitere Darstellungsart an: "Tabelle". Diese Darstellungsart ermöglicht das Hinzufügen von Spalten, um weitere Informationen pro Eintrag, entsprechend formatiert, darstellen zu können.
Wie so eine Baumtabelle konfiguriert wird erläutert das Kapitel Baum Elementtyp: Tabelle.