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.

Die Avonni-Timeline ist reaktiv-fähig

Sehen Sie sie in einem echten Projekt

Meine Installation verfolgen: Ein Installations-Tracker in einem Kundenportal, nach Monat gruppiert.

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.

Gruppierung, einklappbare Gruppen, Elementaktionen, Element-Symbolgröße, Klick-Hervorhebung und die Mehr anzeigen Schaltfläche gelten nur für die vertikale Ausrichtung.

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.

Steuert den äußeren Abstand um die Zeitachse.

Steuert den inneren Abstand der Zeitachse.

Steuert die Abmessungen der Zeitachse (Breite / Höhe / Überlauf).

Steuert den Rahmen um die Zeitachse (Farbe / Größe / Stil / Radius).

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

Zuletzt aktualisiert vor 2 Tagen

War das hilfreich?