> 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 - Zeitleiste ## Übersicht **AX - Zeitleiste** 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 – etwa ihren Fallverlauf, ihre Bestellzeitleiste, Projektmeilensteine oder beliebige datierte Datensätze. Benutzer können Einträge suchen und filtern, auf Elemente klicken, um zu Datensätzen zu navigieren, und Ereignisse, die nach Zeiträumen organisiert sind, anzeigen. Ziehen Sie Daten aus jedem Standard- oder benutzerdefinierten Objekt mit Datumsfeldern. Perfekt für Aktivitäts-Feeds, Fallverläufe, Bestellverfolgungs-Zeitleisten, Projektstatus-Updates oder überall dort, wo Portalbenutzer in einem scrollbaren, chronologischen Format sehen müssen, „was wann passiert ist“. {% hint style="success" %} Die Avonni-Zeitleiste ist [reaktivfähig](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} ## Eigenschaften {% tabs %} {% tab title="Grundkonfiguration" %} | Name | Beschreibung | | -------------------------- | ------------------------------------------------------------------------- | | **Titel** | Die Hauptüberschrift für die Zeitleiste. | | **Titelstil-Text** | Passen Sie den Schriftstil des Titels für eine visuelle Hervorhebung an. | | **Beschriftung** | Eine kurze Beschreibung oder ergänzender Text für die Zeitleiste. | | **Beschriftungsstil-Text** | Passen Sie den Schriftstil der Beschriftung an, um den Titel zu ergänzen. | | {% endtab %} | | {% tab title="Visuelle und funktionale Elemente" %} | Name | Beschreibung | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | **Symbolname** | Wählen Sie ein Symbol aus dem Salesforce Lightning Design System aus, um Zeitleistenelemente darzustellen. | | **Symbolgröße** | Bestimmen Sie die Größe des Symbols für visuelle Konsistenz. | | **Ausrichtung** | Wählen Sie je nach Inhalt und verfügbarem Platz zwischen den Layouts „vertikal“ und „horizontal“. | | **Sortierrichtung** | Wählen Sie „asc“ für aufsteigende oder „desc“ für absteigende chronologische Reihenfolge. | | **Gruppieren nach** | Organisieren Sie Zeitleistenelemente nach „Woche“, „Monat“ oder „Jahr“ für eine einfachere Navigation und ein besseres Verständnis | | **Datumsformat des Elements** | Formatieren Sie die Anzeige von Datumsangaben in Zeitleistenelementen für Klarheit und Konsistenz | | **Ist verbunden** | Wählen Sie aus, ob Zeitleistenelemente visuell durch eine Linie oder einen Pfad verbunden werden | | **Geschlossen** | Schalten Sie um, ob die Zeitleiste geschlossen oder offen ist | | **Einklappbar** | Ermöglichen Sie, dass Abschnitte der Zeitleiste einklappbar sind, um die Benutzerinteraktion zu verbessern | | **Durchsuchbar** | Ermöglichen Sie Benutzern, innerhalb der Zeitleiste nach bestimmten Elementen oder Ereignissen zu suchen | | **Seitennummerierung anzeigen** | Implementieren Sie eine Seitennummerierung für Zeitleisten mit einer großen Anzahl von Elementen | | **Maximal sichtbare Elemente** | Legen Sie die maximale Anzahl von Elementen fest, die angezeigt werden, bevor die Seitennummerierung greift | | {% endtab %} | | {% tab title="Interaktivität und Anpassung" %} | Name | Beschreibung | | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Header-Aktionen** | Fügen Sie Aktionsschaltflächen im Header der Zeitleiste für Benutzerbefehle und Interaktionen hinzu. | | **Elementaktionen** | Implementieren Sie Aktionsschaltflächen auf Elementebene für bestimmte Funktionen. | | **Feldattribute** | Konfigurieren Sie die Anzeige von Feldern innerhalb von Zeitleistenelementen, einschließlich der Anzahl der Spalten und der Varianten für die Feldpräsentation | | **Filteroptionen** | Fügen Sie einen Filtermechanismus hinzu, der als Popover angezeigt wird, um Zeitleistenelemente zu sortieren oder einzugrenzen | | **Suchmaschinenoptionen** | Passen Sie die Suchfunktion mit Platzhaltertext und Positionseinstellungen an | | **Optionen für die Seitennummerierung** | Passen Sie die Ausrichtung an und ändern Sie die Bezeichnungen und Symbole für die Seitennummerierungssteuerelemente „erste“, „letzte“ und „nächste“ | | {% endtab %} | | {% tab title="Datenquelle" %} | Name | Beschreibung | | --------------- | -------------------------------------------------------------------------------------------------------- | | **Manuell** | Geben Sie Zeitleistenelemente und ihre Details manuell ein. | | **Datenquelle** | Verwenden Sie eine Abfrage, um die Zeitleiste automatisch mit Elementen aus einer Datenquelle zu füllen. | | {% endtab %} | | | {% endtabs %} | | ## Styling-Einstellungen {% tabs %} {% tab title="Header" %} | Name | Beschreibung | | --------------------------------------------------- | ------------------------------------------------------------------------------------------ | | **Hintergrundfarbe** | Legt die Farbe des Headers fest. | | **Rahmenfarbe** | Bestimmt die Farbe des Rahmens des Headers. | | **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. | | **Untere Rahmenfarbe (bei verbundenen Elementen)** | Wenn die Zeitleistenelemente verbunden sind, legt dies die Farbe des unteren Rahmens fest. | | **Untere Rahmenstärke (bei verbundenen Elementen)** | Passt die Dicke des unteren Rahmens an, wenn Elemente verbunden sind. | | **Untere Rahmenart (bei verbundenen Elementen)** | Wählt den Stil des unteren Rahmens für verbundene Elemente aus. | | **Abstand innen (oben, rechts, unten, links)** | Legt den inneren Abstand innerhalb des Headers fest. | | **Unterer Rand** | Bestimmt den Abstand unterhalb des Headers. | | {% endtab %} | | {% tab title="Header-Titel" %} | Name | Beschreibung | | ----------------- | ------------------------------------------------------------------ | | **Farbe** | Ändert die Farbe des Titeltexts. | | **Schriftgröße** | Ändert die Farbe des Titeltexts. | | **Schriftstärke** | Ändert die Fettung oder Stärke des Titeltexts. | | **Schriftstil** | Wendet Formatierungen (z. B. kursiv, normal) auf den Titeltext an. | | {% endtab %} | | {% tab title="Header-Beschriftung" %} | Name | Beschreibung | | ----------------- | ------------------------------------------------------ | | **Farbe** | Legt die Farbe des Beschriftungstexts fest. | | **Schriftgröße** | Passt die Größe des Beschriftungstexts an. | | **Schriftstärke** | Ändert die Fettung oder Stärke des Beschriftungstexts. | | **Schriftstil** | Wendet Formatierungen auf den Beschriftungstext an | | {% endtab %} | | {% tab title="Kopf-Avatar" %} | Name | Beschreibung | | ----------------- | ------------------------------------------------------------------- | | **Farbe** | Legt die Hintergrundfarbe des Avatars fest. | | **Schriftgröße** | Ändert die Farbe des Inhalts des Avatars (z. B. Symbol oder Bild). | | **Schriftstärke** | Passt die Utility-Farbe für Kontrast oder Hervorhebung an | | **Schriftstil** | Rundet die Ecken des Avatars für ein weicheres Erscheinungsbild ab. | | {% endtab %} | | {% tab title="Seitennummerierungs-Schaltflächen" %} | Name | Beschreibung | | ---------------------------------- | ------------------------------------------------------------------------------------------- | | **Rahmen** | Legt die Rahmeneigenschaften der Seitennummerierungs-Schaltflächen fest. | | **Hintergrund** | Ändert die Hintergrundfarbe der Schaltflächen. | | **Text-/Symbolfarbe** | Passt die Farbe des Textes oder der Symbole innerhalb der Schaltflächen an. | | **Farbe der aktiven Schaltfläche** | Gibt die Farbe der Seitennummerierungs-Schaltfläche an, wenn sie aktiv oder ausgewählt ist. | | {% 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-timeline.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.