4.7 Baumansicht — Hierarchische Daten als Baum darstellen

4.7 Baumansicht — Hierarchische Daten als Baum darstellen

Schritt-für-Schritt-Anleitung zur Einrichtung eines TreeView-Ansichtselements im UDM Admin Client.

1

Überblick

Die Baumansicht (TreeView) zeigt hierarchische Daten mit Eltern-Kind-Beziehungen als aufklappbaren Baum an. Sie eignet sich ideal für Organisationsstrukturen, Kategoriebäume, Stücklisten oder jede andere Datenstruktur, bei der Datensätze auf sich selbst verweisen (Selbstreferenz).

Das Ansichtselement basiert auf einer Datenquelle, deren Datensätze über ein Schlüssel-Feld und ein Vorgänger-Feld in eine Baumhierarchie gebracht werden. Datensätze ohne Vorgänger bilden die Wurzelebene, alle anderen werden als Kindknoten unter ihrem jeweiligen Elternknoten einsortiert.

Szenario: Abteilungsstruktur als Baum

Ein Unternehmen möchte seine Organisationsstruktur als Baumansicht darstellen. Jede Abteilung hat ein Feld AbteilungsId (Schlüssel) und ein Feld ÜbergeordneteAbteilungsId (Vorgänger). Die Geschäftsleitung hat keinen Vorgänger und bildet die Wurzel. Darunter hängen Hauptabteilungen, die wiederum Unterabteilungen enthalten.

  • Geschäftsleitung (Wurzel)
  •   → Vertrieb → Vertrieb Inland, Vertrieb Ausland
  •   → Technik → Entwicklung, Qualitätssicherung
  •   → Verwaltung → Personal, Finanzen
2

Voraussetzungen

  • Datenquelle — Eine Datenquelle mit selbstreferenzierenden Datensätzen muss konfiguriert sein.
  • Schlüssel-Feld — Die Datenquelle muss ein eindeutiges Schlüsselfeld besitzen (z. B. Id).
  • Vorgänger-Feld — Ein Feld, das auf den Schlüssel des übergeordneten Datensatzes verweist (z. B. ParentId).
  • Admin-Berechtigung — Sie benötigen Zugriff auf den Admin-Bereich, um Ansichtselemente zu konfigurieren.
3

Einrichtung Schritt für Schritt

  1. Ansichtselement anlegen (Typ Tree)

    Erstellen Sie ein neues Ansichtselement in Ihrer App. Wählen Sie als Typ:

    Tree (Baumansicht)

    Vergeben Sie einen aussagekräftigen Namen (z. B. „Abteilungsbaum“ oder „Kategoriestruktur“).

  2. Datenquelle zuweisen

    Weisen Sie dem Ansichtselement eine Datenquelle zu, deren Datensätze die hierarchische Struktur abbilden. Die Datenquelle muss mindestens ein Schlüsselfeld und ein Vorgängerfeld enthalten.

    Tipp Stellen Sie sicher, dass die Datenquelle auch die Spalten enthält, die Sie als Anzeigetext im Baum verwenden möchten (z. B. Bezeichnung oder Name). Diese werden über die Spaltenkonfiguration des Ansichtselements gesteuert.
  3. Schlüssel-Feld und Vorgänger-Feld definieren Pflichtfeld

    Wechseln Sie zum Tab „Baum“ (Einstellungen der Baumansicht). Konfigurieren Sie dort die beiden zentralen Felder:

    Feld Beschreibung
    Schlüssel-Feld Pflicht Das eindeutige Feld, das jeden Datensatz identifiziert (primärer Schlüssel).
    Beispiel: AbteilungsId, Id, KategorieNr
    Vorgänger-Feld Pflicht Das Feld, das auf den Schlüssel des übergeordneten Datensatzes verweist (Selbstreferenz). Datensätze mit leerem Vorgänger-Feld bilden die Wurzelebene des Baums.
    Beispiel: ÜbergeordneteAbteilungsId, ParentId
    Wichtig Schlüssel-Feld und Vorgänger-Feld müssen denselben Datentyp haben. Wenn das Schlüsselfeld eine Ganzzahl ist, muss auch das Vorgängerfeld eine Ganzzahl sein. Andernfalls kann die Hierarchie nicht korrekt aufgelöst werden.
  4. Anzeigespalten konfigurieren

    Die im Baum angezeigten Spalten werden über die Spaltenkonfiguration des Ansichtselements gesteuert — genau wie bei einer Listenansicht. Fügen Sie die gewünschten Felder als Spalten hinzu (z. B. Bezeichnung, Kostenstelle, Leitung). Die erste Spalte wird als Baumknoten-Text dargestellt und enthält die Aufklapp-Schaltflächen.

  5. Weitere Optionen einstellen

    Im Tab „Baum“ stehen zusätzliche Optionen zur Verfügung:

    Option Beschreibung
    Mehrfach-Markierung Erlaubt die gleichzeitige Auswahl mehrerer Knoten im Baum.
    Zeilenauswahl-Spalte Zeigt eine zusätzliche Spalte mit Checkboxen zur Auswahl von Zeilen an.
    Filterzeile aktiv Blendet eine Filterzeile oberhalb der Spalten ein, mit der Anwender den Baum nach Spalteninhalten filtern können.
    Virtuelles Scrolling Aktiviert virtuelles Scrolling für grosse Datenmengen. Nur die sichtbaren Knoten werden gerendert, was die Performance bei vielen Datensätzen verbessert.
UserClient → Abteilungsbaum mit aufgeklappter Hierarchie
+ Neue Abteilung Alle aufklappen Alle einklappen Suche...
📁 Geschäftsleitung
📁 Vertrieb
📂 Vertrieb Inland
📂 Vertrieb Ausland
📁 Technik
📂 Entwicklung
📂 Qualitätssicherung
📁 Verwaltung
📂 Personal
📂 Finanzen
4

Übersicht: Alle TreeView-Einstellungen

Einstellung Typ Beschreibung
Schlüssel-Feld Pflicht Eindeutiger Schlüssel jedes Datensatzes. Bestimmt die Identität der Knoten.
Vorgänger-Feld Pflicht Verweis auf den Schlüssel des Elternknotens. Leere Werte erzeugen Wurzelknoten.
Mehrfach-Markierung Optional Erlaubt die Auswahl mehrerer Knoten gleichzeitig (Standard: deaktiviert).
Zeilenauswahl-Spalte Optional Zeigt Checkboxen zur Zeilenauswahl an (Standard: deaktiviert).
Filterzeile aktiv Optional Blendet eine Filterzeile über den Spalten ein (Standard: deaktiviert).
Virtuelles Scrolling Optional Rendert nur sichtbare Knoten für bessere Performance bei grossen Datenmengen (Standard: deaktiviert).
AdminClient → Tab „Baum“ — TreeView-Einstellungen
Grunddaten
Titel
Abteilungsbaum
Typ
Tree (Baumansicht)
Datenquelle
DS_Abteilungen
Hierarchie
Schlüssel-Feld
AbteilungsId
Vorgänger-Feld
ÜbergeordneteAbteilungsId
Optionen
Mehrfach-Markierung
aus
Zeilenauswahl-Spalte
aus
Filterzeile aktiv
aktiv
Virtuelles Scrolling
aktiv
5

Hinweise und Best Practices

Tipp: Sortierung der Knoten Die Reihenfolge der Knoten innerhalb einer Ebene richtet sich nach der Sortierung der Datenquelle. Wenn Sie die Knoten alphabetisch anzeigen möchten, konfigurieren Sie eine entsprechende Sortierung in der Datenquelle (z. B. nach dem Feld Bezeichnung aufsteigend).
Spaltenkonfiguration Die Baumansicht unterstützt mehrere Spalten, genau wie eine Listenansicht. Die erste Spalte wird zum Baumknoten und enthält die Aufklapp-Pfeile. Alle weiteren Spalten werden als zusätzliche Spalten neben dem Baum angezeigt. Details zur Spaltenkonfiguration finden Sie in der Anleitung „Spaltenkonfiguration“.
Zirkuläre Referenzen vermeiden Achten Sie darauf, dass in den Daten keine zirkulären Verweise entstehen (z. B. A → B → C → A). Solche Schleifen führen dazu, dass der Baum nicht korrekt aufgebaut werden kann.
Tipp: Performance bei grossen Bäumen Bei Bäumen mit mehreren tausend Knoten empfiehlt es sich, Virtuelles Scrolling zu aktivieren. Dadurch werden nur die aktuell sichtbaren Knoten gerendert und der Speicherverbrauch im Browser deutlich reduziert.
6

Häufige Fragen

Warum wird der Baum „flach“ angezeigt (alle Knoten auf einer Ebene)?

Prüfen Sie, ob das Vorgänger-Feld korrekt konfiguriert ist und ob die Werte im Vorgängerfeld tatsächlich auf gültige Schlüsselwerte anderer Datensätze verweisen. Wenn das Vorgängerfeld bei allen Datensätzen leer ist, werden alle als Wurzelknoten dargestellt.

Kann ich den Baum standardmässig aufgeklappt anzeigen?

Der Baum wird standardmässig eingeklappt geladen. Der Anwender kann einzelne Knoten oder den gesamten Baum über die Oberfläche aufklappen.

Werden Änderungen an den Daten sofort im Baum sichtbar?

Ja. Wenn ein Anwender einen Datensatz bearbeitet (z. B. den Vorgänger ändert), wird die Baumstruktur nach dem Speichern automatisch aktualisiert.

Kann ich Aktionen auf Baumknoten ausführen?

Ja. Die Baumansicht unterstützt dieselben Aktionen wie eine Listenansicht. Sie können Aktionen konfigurieren, die beim Klick auf einen Knoten oder über das Kontextmenü ausgeführt werden (z. B. „Details öffnen“ oder „Unterknoten anlegen“).

Was passiert, wenn ein Elternknoten gelöscht wird?

Kindknoten, deren Vorgängerwert auf einen nicht mehr existierenden Datensatz verweist, werden als Wurzelknoten angezeigt. Es empfiehlt sich, beim Löschen von Elternknoten auch die Kindknoten zu berücksichtigen — beispielsweise über eine kaskadierte Löschung oder eine Validierungsregel.

Kann ich Icons für Baumknoten zuweisen?

Icons für einzelne Knoten können über die Spaltenkonfiguration und die dortigen Icon-Einstellungen gesteuert werden. Wenn ein Icon-Feld in der Datenquelle vorhanden ist, kann dieses als Icon-Spalte konfiguriert werden.