> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-tree-grid.md). # AX - Tree Grid **AX - Baumraster** ist eine Experience-Cloud-Komponente, die hierarchische Daten auf Experience-Sites-Seiten (früher Community Cloud) in einer Baumstruktur mit erweiterbaren und einklappbaren Zeilen sowie optionaler Zeilenauswahl anzeigt. ## Übersicht Verwenden Sie das Baumraster, um Parent-Child-Daten (Konten und die zugehörigen Kontakte, Kategorien und Unterkategorien oder beliebige verschachtelte Datensätze) in einer einzigen Tabelle darzustellen, in der Benutzer Zeilen auf- und zuklappen, um in die Hierarchie einzusteigen. Jede Spalte wird einem Feld aus Ihrer Datenquelle zugeordnet, und Zeilen können ausgewählt, sortiert und paginiert werden. Mit einer **Abfrage** Datenquelle stammen die Ebenen entweder aus verschiedenen verknüpften Objekten oder aus einem Objekt mit Selbstbezug — einer Kontohierarchie, einer Berichtskette, einem Kategorienbaum. **Modus** in der Abfrage entscheidet, welche, und **Hierarchie** Modus richtet den Baum auf einen Datensatz aus, den Sie angeben.

Drei Verschachtelungsebenen, jede übergeordnete Zeile ist aufgeklappt. Die erste Spalte enthält das Umschaltsymbol und rückt jede Ebene ein.

## Konfiguration Fügen Sie die Komponente in Experience Builder zu Ihrer Seite hinzu und konfigurieren Sie sie dann über das Eigenschaftsfenster rechts. ### Datenquelle Im Abschnitt Datenquelle verbinden Sie das Baumraster mit Ihren Daten. Zwei Quellentypen sind verfügbar. | Datenquellentyp | Beschreibung | Anwendungsfall | | --------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------- | | **Manuell** | Geben Sie die Zeilen und ihre Spalten direkt im Builder ein. | Ideal für nicht-dynamische Daten, Tests und Demos. | | **Abfrage** | Erstellen Sie eine Abfrage, die Salesforce-Objektfelder den Spalten der Tabelle zuordnet. | Geeignet für dynamische Echtzeitdaten. | #### Hierarchie aufbauen * **Abfrage:** wählen Sie das übergeordnete Objekt in **Objekt-API-Name**und wählen Sie dann unten im Abfrage-Editor aus, wie die Ebenen mit **Modus**, unten im Abfrage-Editor: * **Mehrstufig** (Standard): fügen Sie jedes zugehörige untergeordnete Objekt unter **Kindelemente** mit **Element hinzufügen**. Jedes Objekt im Abfragebaum wird zu einer Ebene erweiterbarer Zeilen, und eine übergeordnete Zeile lädt ihre untergeordneten Elemente, wenn der Benutzer sie aufklappt. * **Hierarchie:** verfolgen Sie einen Lookup des Objekts auf sich selbst, sodass jede Ebene dasselbe Objekt enthält. Wählen Sie ihn in **Übergeordnetes Lookup-Feld** — die Liste bietet nur die Selbst-Lookups des Objekts an — und setzen Sie **ID des aktuellen Datensatzes** in den Einstellungen der Komponente. Der Baum wird dann von diesem Datensatz ausgehend vom obersten Vorfahren nach unten aufgebaut, wobei der Pfad zum aktuellen Datensatz aufgeklappt ist und die Zeile selbst mit einem **aktuell** Abzeichen markiert wird. Die Filter der Abfrage und **Sortieren nach** gelten für jede Ebene, und die Hierarchie wird bis zu 50 Ebenen tief verfolgt. Beide Einstellungen sind erforderlich: Ohne ein **Übergeordnetes Lookup-Feld** meldet die Komponente, dass der Hierarchiemodus ein übergeordnetes Lookup-Feld und eine Datensatz-ID erfordert, und die Vorschau in Experience Builder meldet dasselbe, während **ID des aktuellen Datensatzes** leer ist. Auf einer Live-Seite führt ein **ID des aktuellen Datensatzes** das leer ist oder auf einen Datensatz verweist, den die Abfrage nicht erreichen kann, dazu, dass das Raster seinen **Keine-Ergebnisse-Meldung** Leerzustand. * **Manuell:** definieren Sie die Spalten (jede mit einem **Label** und einem **Name**Schlüsselfeld **das jede Zeile eindeutig identifiziert, und geben Sie dann die Zeilen unter** Daten **ein und fügen Sie unter einer Zeile untergeordnete Zeilen hinzu, um die Verschachtelung zu erzeugen.** Eine Abfrage-Datenquelle für Konto, mit Kontakt als untergeordneter Ebene und einer Spalte, die jedem Objekt zugeordnet ist.

Datenzuordnung

### Für eine Datenquelle **Abfrage** definieren Sie die Spalten der Tabelle in **Datenzuordnungen**. Jede Spalte ist entweder ein **Objektfeld**, das ein Feld aus einem Objekt in der Hierarchie anzeigt (legen Sie seine **Objekt-API-Name**Beschriftung **Quellfeld**) oder **Benutzerdefiniert**Aktion **Name**Beschriftung * **Quellfeld:** das Feld, an das die Spalte gebunden ist. * **Beschriftung:** der im Spaltenkopf angezeigte Text. Aktivieren Sie **Benutzerdefinierte Beschriftung** um die eigene Beschriftung des Feldes zu überschreiben. * **Typ:** wie der Wert formatiert und bearbeitet wird (`Text` standardmäßig). Über 30 Typen sind verfügbar, darunter Text, Zahl, Währung, Datum, Prozent, E-Mail, Telefon, URL, Abzeichen, Avatar, Fortschrittsbalken, Bewertung und Rich Text, mit typspezifischen Attributen für den gewählten Typ. Die **Aktion**, **Schaltfläche** und **Schaltflächen-Icon** Typen fügen Zeilenaktionen hinzu (siehe unten). * **Icon-Name:** ein Symbol für die Spalte. * **Sortierbar:** ob Benutzer die Tabelle nach dieser Spalte sortieren können. * **Text umbrechen:** ob langer Zelltext umbrochen statt abgeschnitten wird. Angeboten für die Typen Währung, Datum, E-Mail, Standort, Zahl, Prozent, Telefon, Text, Uhrzeit und URL. * **Ausgeblendet:** ob die Spalte ausgeblendet ist. * **Anfangsbreite** (erweiterte Einstellung): die Anfangsbreite der Spalte. * **Zellenattribute:** die Ausrichtung des Inhalts sowie ein optionales Zellsymbol und dessen Position. Nur für einige Typen verfügbar. * **Aktionen:** Ihre eigenen Einträge im Dropdown-Menü des Spaltenkopfs. Jede Aktion benötigt ein **Label**, eine **Name**, einen **Icon-Name**, und optionale **Ausgewählt** und **Deaktiviert** Zustände und besitzt eine eigene **Bei Klick** Interaktion. Eine **Manuell** Die Spalten einer Quelle erhalten ein **Label**, eine **Name** und denselben Spaltenkopf **Aktionen**und zeigen ihre Werte als Text an. Die erste Spalte ist immer die Baumspalte: Sie zeigt das Aufklappsymbol und die Beschriftung jeder Zeile an, unabhängig vom von Ihnen festgelegten Typ. #### Zeilenaktionen Spalten des Typs **Aktion**, **Schaltfläche** oder **Schaltflächen-Icon** haben ihre eigene **Bei Klick** Interaktion, die mit der angeklickten Zeile als `{{Record.}}`Verwenden Sie sie, um einen Datensatz zu öffnen, einen Flow zu starten oder eine andere Interaktion aus einer Zeile heraus auszuführen. ### Allgemein **API-Name** ist ein eindeutiger Bezeichner, der verwendet wird, um auf die Komponente zu verweisen (3 bis 30 Zeichen; Buchstaben, Ziffern, Unterstriche und Bindestriche). **ID des aktuellen Datensatzes** ist die ID des Datensatzes, auf den der Baum im **Hierarchie** Modus ausgerichtet ist: Der Baum zeigt die Vorfahren und Nachkommen dieses Datensatzes, und die Zeile trägt ein **aktuell** Abzeichen. Auf einer Datensatzseite setzen Sie ihn auf den `{!recordId}` Ausdruck, damit der Baum dem Datensatz folgt, den der Benutzer gerade anzeigt. Er hat keine Wirkung im **Mehrstufig** Modus. **Tabellenkopf ausblenden** entfernt die Kopfzeile der Tabelle, und **Kontrollkästchenspalte ausblenden** entfernt die für die Zeilenauswahl verwendete Spalte. **Anzahl der ausgewählten Elemente anzeigen** zeigt „N Elemente ausgewählt“ im Kopfbereich an, solange Zeilen ausgewählt sind. Sobald Zeilen ausgewählt sind, bietet die Kopfzeile außerdem einen **Auswahl aufheben** Link. **Spalte für Zeilennummern anzeigen** fügt eine Spalte hinzu, die jede Zeile nummeriert, und **Versatz der Zeilennummern** verschiebt diese Nummerierung: Die erste Zeile zeigt den Versatz plus eins (standardmäßig 0, sodass die Nummerierung bei 1 beginnt). ### Kopfzeile **Titel der Kopfzeile** und **Untertitel der Kopfzeile** fügen Sie oberhalb der Tabelle einen Titel und einen erläuternden Untertitel hinzu; **Textstil des Kopfzeilentitels** und **Textstil des Kopfzeilenuntertitels** legen Sie den Textstil für beide fest (ein Überschriften- oder Absatzstil). **Name des Kopfzeilensymbols** fügt neben dem Titel ein Symbol hinzu, und **Größe des Kopfzeilensymbols** legt seine Größe fest (**XXS**, **XS**, **Klein**, **Mittel** standardmäßig, oder **Groß**). **Kopfzeile ist verbunden** entfernt den unteren Eckenradius und den Schatten der Kopfzeile, sodass sie bündig mit der darunterliegenden Tabelle abschließt.

Eine Kopfzeile mit Untertitel, Titel, Symbol und zwei Kopfzeilenaktionen sowie der Spalte für Zeilennummern und benutzerdefinierten Umschaltsymbolen (utility:dash für eine geöffnete Zeile, utility:add für eine geschlossene).

### Spaltenbreiten **Modus der Spaltenbreiten** wählt **feste** oder **Automatisch** Spaltenbreiten. **Maximale Spaltenbreite** (standardmäßig 1000 px) und **Minimale Spaltenbreite** (standardmäßig 50 px) legen die Breitenbegrenzungen fest, und **Ändern der Spaltenbreite deaktiviert** deaktiviert das manuelle Ändern der Spaltenbreite. ### Symbol zum Ein-/Ausklappen der Zeile Legen Sie die Symbole fest, mit denen eine Zeile auf- und zugeklappt wird: **Name des Symbols für geöffnet** wird angezeigt, wenn eine Zeile geöffnet ist (`utility:chevrondown` standardmäßig) und **Name des Symbols für geschlossen** wenn sie geschlossen ist (`utility:chevronright` standardmäßig). Beide akzeptieren einen Icon-Namen des Lightning Design System. ### Header-Aktionen Konfigurieren Sie Aktionsschaltflächen, die im Tabellenkopf erscheinen. Jede Aktion hat ein **Label**, eine **Name**, einen **Icon-Name**, einen Hover- **Titel**und **Alternativtext** für das Schaltflächensymbol (eine erweiterte Einstellung). Konfigurieren Sie in der jeweiligen **Bei Klick** Sektion, was jede Schaltfläche tut: Toast anzeigen, Navigieren, Herunterladen, Alert-Modal öffnen, Bestätigungsdialog öffnen, Flow-Dialog öffnen, Flow ausführen, Alle Abfragen aktualisieren oder Abfrage aktualisieren. Die meisten haben eine eigene Seite unter Interaktionen, zum Beispiel [Navigieren](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md). **Sichtbare Aktionsschaltflächen** legt fest, wie viele Aktionsschaltflächen angezeigt werden, bevor der Rest in ein Menü zusammenklappt. Dies sind die eigenen Schaltflächen im Tabellenkopf. Das Dropdown-Menü eines einzelnen Spaltenkopfs wird separat in der Einstellung dieser Spalte unter **Aktionen** Einstellung unter [Für eine](#data-mapping). ### Seitennummerierung **Anzahl zusätzlicher Zeilen** (standardmäßig 100, von 1 bis 500) legt für eine **Abfrage** Quelle fest, wie viele weitere Zeilen jeweils geladen werden, wenn der Benutzer das Ende einer Ebene erreicht. Das Laden weiterer Zeilen ist in der Vorschau von Experience Builder nicht aktiv. ### Sortieren **Standard-Sortierrichtung** legt die Richtung fest (**Aufsteigend** oder **Absteigend**) angewendet wird, wenn eine Spalte zum ersten Mal sortiert wird. ### Keine-Ergebnisse-Meldung **Keine-Ergebnisse-Meldung** ersetzt den standardmäßigen Leerzustand durch Ihren eigenen Text, wenn die Datenquelle keine Zeilen zurückgibt. **Attribute der Keine-Ergebnisse-Meldung** steuert, was dieser Leerzustand anzeigt: **Bild bei Keine-Ergebnisse ausblenden** entfernt die Illustration, und **Keine-Ergebnisse-Meldung ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert. ## Gestaltung {% tabs %} {% tab title="Außenabstand" %} Steuert den Außenabstand um die Komponente. {% endtab %} {% tab title="Innenabstand" %} Steuert den Innenabstand der Komponente. {% endtab %} {% tab title="Größe" %} Steuert die Abmessungen der Komponente. {% endtab %} {% tab title="Rahmen" %} Steuert den Rahmen um das Baumraster (Farbe / Größe / Stil / Radius). {% endtab %} {% tab title="Kopfzeile" %} Legt die Hintergrundfarbe der Kopfzeile, deren inneren Abstand und den Abstand darunter fest. {% endtab %} {% tab title="Rahmen der Kopfzeile" %} Legt Farbe, Größe, Stil und Radius des Rahmens der Kopfzeile fest sowie den unteren Rahmen, der verwendet wird, wenn **Kopfzeile ist verbunden** aktiviert ist. {% endtab %} {% tab title="Titel der Kopfzeile" %} Legt Farbe, Schriftgröße, Schriftstärke und Schriftstil des Kopfzeilentitels fest. {% endtab %} {% tab title="Untertitel der Kopfzeile" %} Legt Farbe, Schriftgröße, Schriftstärke und Schriftstil des Kopfzeilenuntertitels fest. {% endtab %} {% tab title="Flow-Dialog & -Panel" %} Gestaltet den Dialog oder das seitliche Panel, das durch eine Interaktion geöffnet wird, in vier Gruppen: **Flow-Dialog öffnen** oder **Flow-Panel öffnen** Flow-Dialog-Kopfzeile **Flow-Dialog-Fußzeile**, **Flow-Panel**, **Kopfzeile des Flow-Panels** und **Kopfzeile des Flow-Panels**. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-tree-grid.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.