> 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-timeline.md). # AX - Timeline ## Überblick **AX - Zeitachse** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze auf Experience-Sites-Seiten in chronologischer Reihenfolge anzeigt. Verwenden Sie sie, um Portalbenutzern datumsbasierte Aktivitäten anzuzeigen, wie ihre Fallhistorie, Bestellzeitachse, Projektmeilensteine oder beliebige datierte Datensätze. Benutzer können Einträge durchsuchen und filtern, einen Datensatz aus einem Element öffnen (mit einer **Bei Klick** Interaktion auf den Elementen) und Ereignisse nach Zeiträumen geordnet sehen. Ziehen Sie Daten aus beliebigen Standard- oder benutzerdefinierten Objekten mit Datumsfeldern. Perfekt für Aktivitäts-Feeds, Fallhistorien, Bestellverfolgungs-Zeitachsen, Projektstatus-Updates oder überall dort, wo Portalbenutzer sehen müssen, „was wann passiert ist“ in einem scrollbaren, chronologischen Format.

Eine vertikale Zeitachse, nach Monat gruppiert, neueste zuerst. Die zwei neuesten Einträge sind in ihren Feldern geöffnet, dargestellt in zwei Spalten.

{% hint style="success" %} Die Avonni-Timeline ist [reaktiv-fähig](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} {% hint style="info" %} **Sehen Sie sie in einem echten Projekt** [Meine Installation verfolgen](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/track-my-installation): Ein Installations-Tracker in einem Kundenportal, nach Monat gruppiert. {% endhint %} ## Konfiguration ### Elemente Die **Elemente** Eigenschaft enthält die Einträge der Zeitachse. Wählen Sie aus, woher sie stammen: | Name | Beschreibung | | ----------- | ---------------------------------------------------------------------------------------------- | | **Manuell** | Zeitachsen-Elemente und ihre Details manuell eingeben. | | **Abfrage** | Verwenden Sie eine Abfrage, um die Zeitachse automatisch mit Salesforce-Datensätzen zu füllen. | Jedes Element wird aus denselben Einstellungen erstellt. Im **Manuell** Modus füllen Sie sie pro Element aus; im **Abfrage** Modus ordnen Sie jedes einzelne einem Feld des abgefragten Objekts zu. | Einstellung | Was es bewirkt | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | **Titel** | Die Überschrift des Elements. | | **Beschreibung** | Der Text unter dem Titel. | | **Avatar** | Das Symbol des Elements: **Initialen**, **Symbolname**, **Bild**, und ein **Präsenztyp**. | | **Datum** | Erforderlich. Platziert das Element auf der Zeitachse. Im Abfragemodus sortiert es auch die Abfrage, im **Sortierrichtung**. | | **Ist aktiv** | Kennzeichnet das Element als das aktuelle. | | **Hat Kontrollkästchen** | Fügt dem Element ein Kontrollkästchen hinzu. | | **Felder** | Paaren aus Beschriftung und Wert, die angezeigt werden, wenn der Benutzer das Element öffnet. **Feldattribute** legt ihr Layout fest. | | **Name** / **Schlüsselfeld** | Die eindeutige Kennung des Elements (Manuell: **Name**; Abfrage: **Schlüsselfeld**, `{{Record.Id}}` standardmäßig). | | **Filter** | Nur im Abfragemodus. Die Felder, nach denen Benutzer filtern können, siehe **Filtermenü-Attribute**. | | **Suchfelder** | Nur im Abfragemodus. Die Felder, in denen das Suchfeld sucht. Erfordert **Durchsuchbar**. | | **Bei Klick** | Was passiert, wenn ein Benutzer auf das Element klickt, z. B. zum Datensatz navigiert. Ohne dies ist ein Element nicht anklickbar. | ### Grundkonfiguration **Titel** ist die Hauptüberschrift für die Zeitachse, und **Untertitel** ist eine kurze Beschreibung oder ein ergänzender Text darunter. **Titeltextstil** und **Untertiteltextstil** legen die Typografie für beide fest: `Überschrift 1` auf `Überschrift 4`, oder `Absatz 1` / `Absatz 2`. ### Visuelle und funktionale Elemente | Einstellung | Was es bewirkt | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **API-Name** | Eine eindeutige Kennung, mit der auf die Komponente verwiesen wird. | | **Symbolname** | Ein Symbol aus dem Salesforce Lightning Design System, das neben dem Titel der Zeitachse angezeigt wird. Das eigene Symbol jedes Elements wird am Element unter **Avatar**. | | **Symbolgröße** | Die Größe dieses Header-Symbols: `Xxs`, `Xs`, `Klein`, `Mittel` (Standard) oder `Groß`. | | **Element-Symbolgröße** | Die Größe der Elemente-Symbole: `Xxs`, `Xs`, `Klein` (Standard), `Mittel` oder `Groß`. | | **Ausrichtung** | `Vertikal` (Standard) oder `Horizontal` Layout. | | **Sortierrichtung** | `Aufsteigend` oder `Absteigend` (Standard) chronologische Reihenfolge. | | **Gruppieren nach** | Gruppiert die Elemente nach `Tag`, `Woche`, `Monat`, oder `Jahr`. Lassen Sie es leer, um die Elemente ungeordnet aufzulisten. Elemente mit einem Datum nach heute werden unter **Anstehend**. | | **Datumsformat des Elements** | Wie Daten auf den Elementen angezeigt werden: **Standard**, **Relativ** (z. B. „vor 2 Tagen“), **Voreinstellung** (eine Luxon-Voreinstellung, `DATE_MED` standardmäßig) oder **Benutzerdefiniert** (der Standard, `LLLL dd, yyyy, t`, was „02. September 2026, 13:00 Uhr“ ergibt). | | **Ist verbunden** | Verbindet den Header mit dem Hauptbereich der Zeitachse, ohne Abstand dazwischen. Seine untere Umrandung wird gestaltet unter **Header-Rahmen**. Standardmäßig deaktiviert. | | **Einklappbar** | Ermöglicht es Benutzern, jede Gruppe ein- oder auszuklappen. Erfordert **Gruppieren nach**. Standardmäßig deaktiviert. | | **Geschlossen** | Startet diese Gruppen eingeklappt. Erfordert **Einklappbar**. Standardmäßig deaktiviert. | | **Durchsuchbar** | Fügt ein Suchfeld hinzu. Im manuellen Modus durchsucht es den Titel und die Beschreibung der Elemente; im Abfragemodus durchsucht es die Felder, die unter **Suchfelder** in der Zuordnung der Elemente aufgeführt sind. Standardmäßig deaktiviert. | | **Seitennummerierung anzeigen** | Teilt die Elemente in Seiten auf, mit **Maximal sichtbare Elemente** als Seitengröße (20, wenn leer). | | **Maximal sichtbare Elemente** | Mit **Seitennummerierung anzeigen** aktiviert, die Seitengröße. Ist es deaktiviert, zeigt die vertikale Zeitachse so viele Elemente an, dann eine **Mehr anzeigen** Schaltfläche. | | **Beim Klicken hervorheben** | Hebt ein Element visuell hervor, wenn darauf geklickt wird. | {% hint style="info" %} Gruppierung, einklappbare Gruppen, Elementaktionen, Element-Symbolgröße, Klick-Hervorhebung und die **Mehr anzeigen** Schaltfläche gelten nur für die vertikale Ausrichtung. {% endhint %}

Dieselben Elemente mit auf Horizontal gesetzter Ausrichtung. Der obere Bereich zeigt ein 15-Tage-Fenster; der Streifen darunter umfasst jedes Element, und Benutzer ziehen das hervorgehobene Fenster daran entlang.

### Interaktivität und Anpassung **Header-Aktionen** fügen Aktionsschaltflächen im Header der Zeitachse hinzu. Jede Aktion hat eine **Beschriftung**, eine **Name**, eine **Symbolname**, eine **Titel**, **Alternativtext** und eine **Bei Klick** Interaktion. **Sichtbare Aktionsschaltflächen** legt fest, wie viele Header-Aktionen als Schaltflächen angezeigt werden, bevor der Rest in ein Menü verschoben wird. **Elementaktionen** fügen auf Elementebene Aktionsschaltflächen hinzu (nur vertikale Ausrichtung). **Feldattribute** legen das Layout jedes Elements fest **Felder**: * **Anzahl der Spalten**: standardmäßig 1. Gilt für Container, die schmaler als 480 px sind, und immer dann, wenn kein größenabhängiger Wert festgelegt ist. * **Klein**, **Mittel** und **Spalten für große Container**: die Anzahl der Spalten für jede Containergröße. * **Variante**: `Standard` (Standard), `Beschriftung ausgeblendet`, `Beschriftung inline` oder `Beschriftung gestapelt`. **Filtermenü-Attribute** legen fest, wie die Filter dargestellt werden. Filter gibt es nur im Abfragemodus: Wählen Sie zuerst die **Filter** Felder in der Zuordnung der Elemente aus. **Typ** platziert sie `Horizontal` (Standard), in einer `Popover`, oder in einem `Panel`, und **Sortierreihenfolge für Auswahllistenfilter**, **Datensatz-Auswahllistenwerte verwenden** und **Kaskadierende Filterwerte verwenden** steuern, wie Auswahllistenoptionen aufgelistet werden. Jeder Filter besitzt außerdem einen Operator, der aus einem Menü oben im Filter ausgewählt wird. Text-, Auswahllisten-, Mehrfachauswahllisten- und Nachschlagefilter bieten `Gleich` (der Standard), `Ungleich`, `Leer` und `Nicht leer`. Zahlen-, Datums- und Zeitfilter bieten `Zwischen` (der Standard), `Nicht zwischen`, `Gleich`, `Ungleich`, `Kleiner als`, `Kleiner oder gleich`, `Größer als`, `Größer oder gleich`, `Leer` und `Nicht leer`. `Leer` und `Nicht leer` keinen Wert an, sodass die Eingaben des Filters ausgeblendet werden, solange einer von beiden ausgewählt ist. Kontrollkästchen-Filter haben kein Operator-Menü. **Attribute der Suchmaschine** passen das Suchfeld an: sein **Platzhalter** (`Suchen` standardmäßig) und seine **Position**, `Links` (Standard), `Rechts`, `Zentriert` oder `Auffüllen`. **Attribute der Seitennummerierung** legen die Beschriftungen und Symbole der **Erste**, **Vorherige**, **Nächste** und **Letzte** Schaltflächen und ihre Ausrichtung fest: `Links` (Standard), `Zentriert` oder `Rechts`. **Keine-Ergebnisse-Nachricht** ersetzt den standardmäßigen Leerzustand durch Ihren eigenen Text, wenn kein Element zur Suche oder den Filtern passt — oder wenn die Datenquelle überhaupt nichts zurückgibt. **Attribute der Keine-Ergebnisse-Nachricht** steuert, was dieser Leerzustand anzeigt: **Keine-Ergebnisse-Bild ausblenden** entfernt die Illustration und **Keine-Ergebnisse-Nachricht ausblenden** entfernt den Text. Beide sind standardmäßig deaktiviert. ## Stil Passen Sie das Erscheinungsbild der Zeitachse im **Stil** Abschnitt des Eigenschaftseditors an. {% tabs %} {% tab title="Rand" %} Steuert den äußeren Abstand um die Zeitachse. {% endtab %} {% tab title="Innenabstand" %} Steuert den inneren Abstand der Zeitachse. {% endtab %} {% tab title="Größe" %} Steuert die Abmessungen der Zeitachse (Breite / Höhe / Überlauf). {% endtab %} {% tab title="Rahmen" %} Steuert den Rahmen um die Zeitachse (Farbe / Größe / Stil / Radius). {% endtab %} {% tab title="Kopfzeile" %} | Name | Beschreibung | | --------------------------------------------- | ---------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds des Headers fest. | | **Innenabstand (Oben, Rechts, Unten, Links)** | Legt den inneren Abstand innerhalb des Headers fest. | | **Außenabstand unten** | Bestimmt den Abstand unter dem Header. | | {% endtab %} | | {% tab title="Header-Rahmen" %} | Name | Beschreibung | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | **Rahmenfarbe** | Bestimmt die Farbe des Header-Rahmens. | | **Rahmengröße** | Passt die Dicke des Rahmens um den Header an. | | **Rahmenstil** | Wählt den Stil des Rahmens aus (z. B. durchgezogen, gestrichelt, gepunktet). | | **Rahmenradius** | Rundet die Ecken des Headers für ein weicheres Erscheinungsbild ab. | | **Farbe der unteren Rahmenlinie (Ist verbunden)** | Wenn **Ist verbunden** aktiviert ist, legt die Farbe des unteren Rahmenrandes des Headers fest. | | **Größe der unteren Rahmenlinie (Ist verbunden)** | Passt die Dicke dieses unteren Rahmens an, wenn **Ist verbunden** aktiviert ist. | | **Stil der unteren Rahmenlinie (Ist verbunden)** | Wählt den Stil dieses unteren Rahmens, wenn **Ist verbunden** aktiviert ist. | | {% endtab %} | | {% tab title="Header-Titel" %} | Name | Beschreibung | | ------------------ | --------------------------------------------------------------------- | | **Farbe** | Ändert die Farbe des Titeltexts. | | **Schriftgröße** | Passt die Größe des Titeltexts an. | | **Schriftschnitt** | Ändert die Fettung oder Stärke des Titeltexts. | | **Schriftstil** | Wendet eine Formatierung (z. B. kursiv, normal) auf den Titeltext an. | | {% endtab %} | | {% tab title="Header-Untertitel" %} | Name | Beschreibung | | ------------------ | --------------------------------------------------- | | **Farbe** | Legt die Farbe des Untertiteltexts fest. | | **Schriftgröße** | Passt die Größe des Untertiteltexts an. | | **Schriftschnitt** | Ändert die Fettung oder Stärke des Untertiteltexts. | | **Schriftstil** | Wendet eine Formatierung auf den Untertiteltext an | | {% endtab %} | | {% tab title="Header-Avatar" %} | Name | Beschreibung | | -------------------- | ------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Hintergrundfarbe des Header-Avatars fest. | | **Vordergrundfarbe** | Legt die Farbe des Inhalts des Avatars fest (sein Symbol oder seine Initialen). | | **Rahmenradius** | Rundet die Ecken des Avatars für ein weicheres Erscheinungsbild ab. | | {% endtab %} | | {% tab title="Element" %} | Name | Beschreibung | | --------------------------- | -------------------------------------------------------------------------------------------------------------- | | **Zeilenbegrenzung** | Begrenzt die Beschreibung eines Elements auf eine festgelegte Anzahl von Zeilen, bevor sie abgeschnitten wird. | | **Symbol-Hintergrundfarbe** | Legt die Hintergrundfarbe des Elementsymbols fest. | | {% endtab %} | | {% tab title="Elementkörper" %} | Name | Beschreibung | | ------------------------------------- | ---------------------------------------------------------------------------------- | | **Hintergrundfarbe bei Hover** | Hintergrundfarbe eines Elements, wenn sich der Zeiger darüber befindet. | | **Hintergrundfarbe der Hervorhebung** | Hintergrundfarbe eines Elements, hervorgehoben durch **Beim Klicken hervorheben**. | | {% endtab %} | | {% tab title="Elementfelder" %} | Name | Beschreibung | | ---------------------- | ------------------------------------------------------------------- | | **Abstand inline** | Horizontaler Abstand zwischen den Feldern innerhalb eines Elements. | | **Abstand blockweise** | Vertikaler Abstand zwischen den Feldern innerhalb eines Elements. | | **Hintergrundfarbe** | Legt die Hintergrundfarbe des Feldbereichs des Elements fest. | | **Rahmenfarbe** | Bestimmt die Farbe des Rahmens des Feldbereichs. | | **Rahmengröße** | Passt die Dicke dieses Rahmens an. | | **Rahmenstil** | Wählt den Stil dieses Rahmens aus. | | **Rahmenradius** | Rundet die Ecken des Feldbereichs ab. | | {% endtab %} | | {% tab title="Seitennummerierungs-Schaltflächen" %} | Name | Beschreibung | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Ändert die Hintergrundfarbe der Schaltflächen mit getrennten Werten für Aktiv, Hover und Deaktiviert. | | **Text-/Symbolfarbe** | Passt die Farbe des Texts oder der Symbole innerhalb der Schaltflächen an, mit getrennten Werten für Aktiv, Hover und Deaktiviert. | | **Rahmenfarbe** | Legt die Rahmenfarbe der Schaltflächen fest, mit getrennten Werten für Aktiv, Hover und Deaktiviert. | | **Rahmengröße / -stil** | Legt die Rahmenattribute der Seitennummerierungs-Schaltflächen fest. | | **Aktive Schaltfläche …** | Dieselben Hintergrund-, Text-/Symbol- und Rahmenfarben, angewendet auf die Schaltfläche der aktuell angezeigten Seite. | | {% endtab %} | | {% tab title="Fußzeile" %} | Name | Beschreibung | | -------------------- | -------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Fußzeile fest. | | **Rahmenfarbe** | Bestimmt die Farbe des Fußzeilenrahmens. | | **Rahmengröße** | Passt die Dicke des Fußzeilenrahmens an. | | **Rahmenstil** | Wählt den Stil des Fußzeilenrahmens aus. | | **Rahmenradius** | Rundet die Ecken der Fußzeile ab. | | {% endtab %} | | {% tab title="Schaltfläche „Mehr anzeigen“" %} | Name | Beschreibung | | ------------------------------- | ---------------------------------------------------------------------------- | | **Blockanfang / Blockende** | Vertikaler Abstand oberhalb und unterhalb der Schaltfläche. | | **Inline-Anfang / Inline-Ende** | Horizontaler Abstand vor und nach der Schaltfläche. | | **Hintergrundfarbe** | Hintergrundfarbe der Schaltfläche mit getrennten Werten für Aktiv und Hover. | | **Textfarbe** | Textfarbe der Schaltfläche mit getrennten Werten für Aktiv und Hover. | | **Rahmenfarbe** | Rahmenfarbe der Schaltfläche mit getrennten Werten für Aktiv und Hover. | | **Rahmengröße / Rahmenradius** | Dicke und Abrundung der Ecken des Schaltflächenrahmens. | | {% endtab %} | | {% tab title="Flow-Dialog & -Panel" %} Gestaltet den Dialog oder das Seitenpanel, das von einem **Flow-Dialog öffnen** oder **Flow-Panel öffnen** Interaktion. | Name | Beschreibung | | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | | **Flow-Dialog-Kopfzeile** | Hintergrund, unterer Rahmen (Farbe und Größe) und Beschriftungs-Typografie (Farbe, Schriftgröße, Schriftstärke). | | **Flow-Dialog-Fußzeile** | Hintergrund und oberer Rahmen (Farbe und Größe). | | **Flow-Panel** | Hintergrundfarbe und Rahmen (Farbe, Größe, Stil, Radius) des Panels selbst. | | **Flow-Panel-Kopfzeile** | Hintergrund, unterer Rahmen, Beschriftungs-Typografie und Farben des Schließen-Symbols. | | {% 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-timeline.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.