> 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 - Zeitachse ## Übersicht **AX - Timeline** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze in chronologischer Reihenfolge auf Experience-Sites-Seiten anzeigt. Verwenden Sie es, um Portalbenutzern datumsbasierte Aktivitäten anzuzeigen – wie ihren Fallverlauf, die Auftrags-Timeline, 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 sehen, die nach Zeiträumen organisiert sind. Ziehen Sie Daten aus jedem Standard- oder benutzerdefinierten Objekt mit Datumsfeldern. Perfekt für Aktivitäts-Feeds, Fallverläufe, Auftragsverfolgungs-Timelines, Projektstatus-Updates oder überall dort, wo Portalbenutzer in einem scrollbareren, chronologischen Format sehen müssen, „was wann passiert ist“. {% hint style="success" %} Die Avonni-Timeline ist [reaktionsbereit](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) {% endhint %} ## Konfiguration ### Datenquelle | Name | Beschreibung | | --------------- | ------------------------------------------------------------------------------------------------------ | | **Manuell** | Timeline-Elemente und ihre Details manuell eingeben. | | **Datenquelle** | Verwenden Sie eine Abfrage, um die Timeline automatisch mit Elementen aus einer Datenquelle zu füllen. | ### Grundkonfiguration **Titel** ist die Hauptüberschrift für die Timeline, und **Untertitel** ist ein kurzer Beschreibungstext oder ergänzender Text darunter. **Titelstil-Text** und **Beschriftungsstil-Text** passt den Schriftstil jedes Elements zur visuellen Hervorhebung an. ### Visuelle und funktionale Elemente **Symbolname** wählt ein Symbol aus dem Salesforce Lightning Design System aus, um Timeline-Elemente darzustellen, und **Symbolgröße** legt dessen Größe zur visuellen Konsistenz fest. **Ausrichtung** wählt ein `vertikales` oder `horizontales` Layout basierend auf Inhalts- und Platzüberlegungen. **Sortierrichtung** wählt `aufsteigend` (aufsteigende) oder `absteigend` (absteigende) chronologische Reihenfolge. **Gruppieren nach** ordnet Timeline-Elemente nach `Woche`, `Monat`, oder `Jahr` für einfachere Navigation und besseres Verständnis. **Datumsformat des Elements** formatiert die Anzeige von Datumsangaben in Timeline-Elementen für Klarheit und Konsistenz. **Ist verbunden** bestimmt, ob Timeline-Elemente visuell durch eine Linie oder einen Pfad verbunden sind. **Geschlossen** schaltet um, ob die Timeline geschlossen oder offen ist. **Einklappbar** ermöglicht das Einklappen von Bereichen der Timeline und verbessert die Benutzerinteraktion. **Durchsuchbar** ermöglicht Benutzern die Suche innerhalb der Timeline nach bestimmten Elementen oder Ereignissen. **Seitenumbruch anzeigen** implementiert eine Seitennummerierung für Timelines mit einer großen Anzahl von Elementen, und **Maximal sichtbare Elemente** legt die maximale Anzahl von Elementen fest, die vor dem Einsetzen der Seitennummerierung angezeigt werden. **API-Name** ist eine eindeutige Kennung zur Referenzierung der Komponente. **Größe des Elementsymbols** legt die Größe der Symbole pro Element fest, und **Bei Klick hervorheben** hebt ein Element visuell hervor, wenn darauf geklickt wird. ### Interaktivität und Anpassung **Kopfzeilenaktionen** fügen Aktionsschaltflächen in der Timeline-Kopfzeile für Benutzerbefehle und Interaktionen hinzu, und **Elementaktionen** fügen auf Elementebene Aktionsschaltflächen für bestimmte Funktionen hinzu. **Feldeigenschaften** konfiguriert die Anzeige von Feldern innerhalb von Timeline-Elementen, einschließlich der Anzahl der Spalten und der für die Feldanzeige verwendeten Variante. **Filteroptionen** umfassen einen Filtermechanismus, der als Popover zum Sortieren oder Eingrenzen von Timeline-Elementen angezeigt wird. **Suchmaschinenoptionen** passt die Suchfunktion mit Platzhaltertext und Positionseinstellungen an. **Paginierungsoptionen** passt die Ausrichtung an und individualisiert die Beschriftungen und Symbole für die `erste`, `letzte` und `nächste` Paginierungssteuerelemente. ## Styling {% tabs %} {% tab title="Kopfzeile" %} | Name | Beschreibung | | --------------------------------------------- | ---------------------------------------------------------------------------------------- | | **Hintergrundfarbe** | Legt die Farbe des Hintergrunds der Kopfzeile fest. | | **Rahmenfarbe** | Bestimmt die Farbe des Rahmens der Kopfzeile. | | **Rahmengröße** | Passt die Dicke des Rahmens um die Kopfzeile an. | | **Rahmenstil** | Wählt den Stil des Rahmens aus (z. B. durchgezogen, gestrichelt, gepunktet). | | **Rahmenradius** | Rundet die Ecken der Kopfzeile für ein weicheres Aussehen ab. | | **Untere Rahmenfarbe (ist verbunden)** | Wenn die Timeline-Elemente verbunden sind, legt dies die Farbe des unteren Rahmens fest. | | **Untere Rahmenstärke (ist verbunden)** | Passt die Dicke des unteren Rahmens an, wenn Elemente verbunden sind. | | **Unterer Rahmenstil (ist verbunden)** | Wählt den Stil des unteren Rahmens für verbundene Elemente aus. | | **Innenabstand (oben, rechts, unten, links)** | Legt den Innenabstand innerhalb der Kopfzeile fest. | | **Unterer Abstand** | Bestimmt den Abstand unterhalb der Kopfzeile. | | {% endtab %} | | {% tab title="Kopfzeilentitel" %} | Name | Beschreibung | | ------------------ | --------------------------------------------------------------------- | | **Farbe** | Ändert die Farbe des Titeltexts. | | **Schriftgröße** | Ändert die Farbe des Titeltexts. | | **Schriftgewicht** | Ändert die Fettigkeit bzw. Dicke des Titeltexts. | | **Schriftstil** | Wendet eine Formatierung (z. B. kursiv, normal) auf den Titeltext an. | | {% endtab %} | | {% tab title="Kopfzeilenbeschriftung" %} | Name | Beschreibung | | ------------------ | -------------------------------------------------------- | | **Farbe** | Legt die Farbe des Beschriftungstexts fest. | | **Schriftgröße** | Passt die Größe des Beschriftungstexts an. | | **Schriftgewicht** | Ändert die Fettigkeit bzw. Dicke des Beschriftungstexts. | | **Schriftstil** | Wendet eine Formatierung auf den Beschriftungstext an | | {% endtab %} | | {% tab title="Header-Avatar" %} | Name | Beschreibung | | ------------------ | ------------------------------------------------------------------- | | **Farbe** | Legt die Hintergrundfarbe des Avatars fest. | | **Schriftgröße** | Ändert die Farbe des Inhalts des Avatars (z. B. Symbol oder Bild). | | **Schriftgewicht** | Passt die Hilfsfarbe für Kontrast oder Hervorhebung an | | **Schriftstil** | Rundet die Ecken des Avatars für ein weicheres Erscheinungsbild ab. | | {% endtab %} | | {% tab title="Paginierungsschaltflächen" %} | Name | Beschreibung | | ---------------------------------- | ----------------------------------------------------------------------------------- | | **Rahmen** | Legt die Rahmeneigenschaften der Paginierungsschaltflächen fest. | | **Hintergrund** | Ändert die Hintergrundfarbe der Schaltflächen. | | **Text-/Symbolfarbe** | Passt die Farbe des Texts oder der Symbole innerhalb der Schaltflächen an. | | **Farbe der aktiven Schaltfläche** | Gibt die Farbe der Paginierungsschaltflä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, and the optional `goal` query parameter: ``` 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 optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.