# AX - Zeitachse ## Übersicht **AX - Zeitachse** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze auf Experience-Sites-Seiten in chronologischer Reihenfolge anzeigt. Verwenden Sie sie, um portalbenutzerbezogene, datumsbasierte Aktivitäten anzuzeigen – etwa ihren Fallverlauf, die Zeitachse von Bestellungen, Projektmeilensteine oder andere datumsstempelbasierte Datensätze. Benutzer können Einträge suchen und filtern, auf Elemente klicken, um zu Datensätzen zu navigieren, und Ereignisse nach Zeiträumen geordnet anzeigen. Ziehen Sie Daten aus beliebigen Standard- oder benutzerdefinierten Objekten mit Datumsfeldern. Perfekt für Aktivitätsfeeds, Fallhistorien, Bestellverfolgungs-Zeitachsen, Projektstatus-Updates oder überall dort, wo Portalbenutzer in einem scrollbaren, chronologischen Format sehen müssen, „was wann passiert ist“. {% hint style="success" %} Die Avonni-Zeitachse ist [Reactive-Ready](/experience-cloud/experience-cloud-de/erste-schritte/reaktive-komponenten.md) {% endhint %} ## Eigenschaften {% tabs %} {% tab title="Grundlegende Konfiguration" %} | Name | Beschreibung | | -------------------------- | --------------------------------------------------------------------------- | | **Titel** | Die Hauptüberschrift für die Zeitachse. | | **Titel-Stiltext** | Passen Sie den Schriftstil des Titels zur optischen Hervorhebung an. | | **Beschriftung** | Eine kurze Beschreibung oder ein ergänzender Text für die Zeitachse. | | **Beschriftungs-Stiltext** | Passen Sie den Schriftstil der Beschriftung an, damit er den Titel ergänzt. | | {% endtab %} | | {% tab title="Visuelle und funktionale Elemente" %} | Name | Beschreibung | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | | **Symbolname** | Wählen Sie ein Symbol aus dem Salesforce Lightning Design System, um Zeitelemente darzustellen. | | **Symbolgröße** | Bestimmen Sie die Größe des Symbols für visuelle Konsistenz. | | **Ausrichtung** | Wählen Sie zwischen den Layouts „vertikal“ und „horizontal“ basierend auf Inhalt und Platzbedarf. | | **Sortierrichtung** | Wählen Sie „asc“ für aufsteigende oder „desc“ für absteigende chronologische Reihenfolge. | | **Gruppieren nach** | Organisieren Sie Zeitelemente nach „Woche“, „Monat“ oder „Jahr“ für eine einfachere Navigation und besseres Verständnis | | **Datumsformat des Elements** | Formatieren Sie die Anzeige von Datumsangaben bei Zeitelementen für Klarheit und Konsistenz | | **Ist verbunden** | Wählen Sie, ob Zeitelemente visuell durch eine Linie oder einen Pfad verbunden sind | | **Geschlossen** | Schalten Sie um, ob die Zeitachse geschlossen oder offen ist | | **Einklappbar** | Aktivieren Sie, dass Bereiche der Zeitachse einklappbar sind, um die Benutzerinteraktion zu verbessern | | **Durchsuchbar** | Ermöglichen Sie Benutzern, innerhalb der Zeitachse nach bestimmten Elementen oder Ereignissen zu suchen | | **Paginierung anzeigen** | Implementieren Sie eine Paginierung für Zeitachsen mit einer großen Anzahl von Elementen | | **Maximal sichtbare Elemente** | Legen Sie die maximale Anzahl an Elementen fest, die vor dem Einsetzen der Paginierung angezeigt werden | | {% endtab %} | | {% tab title="Interaktivität und Anpassung" %} | Name | Beschreibung | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Header-Aktionen** | Fügen Sie Aktionsschaltflächen im Kopfbereich der Zeitachse 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 Zeitelementen, einschließlich der Anzahl der Spalten und Varianten für die Feldpräsentation | | **Filteroptionen** | Fügen Sie einen Filtermechanismus als Popover hinzu, um Zeitelemente zu sortieren oder einzugrenzen | | **Suchmaschinenoptionen** | Passen Sie die Suchfunktion mit Platzhaltertext und Positionseinstellungen an | | **Paginierungsoptionen** | Passen Sie die Ausrichtung an und konfigurieren Sie die Beschriftungen und Symbole für die Paginierungssteuerungen „erste“, „letzte“ und „nächste“ | | {% endtab %} | | {% tab title="Datenquelle" %} | Name | Beschreibung | | --------------- | ------------------------------------------------------------------------------------------------------- | | **Manuell** | Zeitelemente und ihre Details manuell eingeben. | | **Datenquelle** | Verwenden Sie eine Abfrage, um die Zeitachse automatisch mit Elementen aus einer Datenquelle zu füllen. | | {% endtab %} | | | {% endtabs %} | | ## Stileinstellungen {% 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 Erscheinungsbild ab. | | **Untere Rahmenfarbe (Ist verbunden)** | Wenn die Zeitelemente verbunden sind, wird hiermit die Farbe des unteren Rahmens festgelegt. | | **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. | | **Abstand unten** | 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. | | **Schriftstärke** | Ändert die Fettung oder Stärke des Titeltexts. | | **Schriftstil** | Wendet eine Formatierung (z. B. kursiv, normal) auf den Titeltext an. | | {% endtab %} | | {% tab title="Kopfzeilen-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 eine Formatierung auf den Beschriftungstext an | | {% endtab %} | | {% tab title="Kopfzeilen-Avatar" %} | Name | Beschreibung | | ----------------- | ------------------------------------------------------------------- | | **Farbe** | Legt die Hintergrundfarbe des Avatars fest. | | **Schriftgröße** | Ändert die Farbe des Avatar-Inhalts (z. B. Symbol oder Bild). | | **Schriftstärke** | 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 Textes 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: 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-zeitachse.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.