Zeitachse

Die Timeline-Komponente verwandelt Listen von Ereignissen in interaktive visuelle Zeitachsen, um das Verständnis chronologischer Daten zu erleichtern.

Einrichten Ihrer Timeline

1. Datenquelle konfigurieren

Bevor Ihre Timeline irgendwelche Informationen anzeigen kann, müssen Sie ihr sagen, woher sie die Daten erhält. Die Avonni Timeline-Komponente bietet flexible Optionen für Datenquellen, um sich mit verschiedenen Datenquellen zu verbinden.

2. Datenzuordnungen integrieren (für Variable- und Abfragequellen)

Wenn Sie eine Variable- oder Abfrage-Datenquelle mit der Timeline-Komponente verwenden, müssen Sie zuordnen Felder aus Ihrer Datenquelle zu den Attributen der Timeline. Denken Sie an Datenzuordnungen als die „Anweisungen“, die der Timeline-Komponente sagen welche Felder das Startdatum, Enddatum, den Titel, die Beschreibung usw. für jedes Timeline-Element enthalten.

Beispiel (Opportunities):

Wenn Ihre Datenquelle Opportunity Datensätze mit Feldern wie Name, Description__c, und CloseDate, abruft, würden Sie zuordnen:

• Titel: Name

• Beschreibung: Description__c

• Startdatum: CloseDate

Dies teilt der Timeline mit, den Opportunity-Namen für den Elementtitel, das benutzerdefinierte Beschreibungsfeld und das Close Date für das Startdatum zu verwenden.

3. Timeline-Ausrichtung wählen

Ausrichtung	Beschreibung	Abbildung
Horizontal	Ereignisse werden von links nach rechts angezeigt. Es ist ideal, um Ereignisse über einen längeren Zeitraum darzustellen.
Vertikal	Ereignisse werden vertikal gestapelt. Es ist gut geeignet, um die chronologische Reihenfolge zu betonen oder wenn der Platz begrenzt ist.

4. Sortierung und Gruppierung konfigurieren (für vertikale Timelines)

Für vertikale Timelines können Sie Ereignisse mit diesen Einstellungen organisieren:

• Sortierte Richtung: Wählen Aufsteigend (älteste bis neueste) oder Absteigend (neueste bis älteste), um die Reihenfolge der Ereignisse zu steuern.

• Gruppieren nach: Ereignisse nach Zeitintervallen gruppieren: Keine, Tag, Woche, Monat, oder Jahr. Dies erstellt visuelle Abschnitte innerhalb der Timeline, wodurch die Navigation erleichtert wird.

5. Zusätzliche Felder anzeigen und anpassen

Zeigen Sie zusätzliche Felder aus Ihrer Datenquelle innerhalb jedes Timeline-Elements an und passen Sie deren Darstellung an.

Felder hinzufügen:

• Suchen Sie den Abschnitt „Felder“ oder „Elementfelder“ in den Eigenschaften der Timeline-Komponente.

• Fügen Sie die gewünschten Felder aus Ihrer Datenquelle hinzu.

Anzeige der Felder anpassen: Feldlayout

Verwenden Sie die Feldlayout Einstellungen, um die zusätzlichen Felder innerhalb jedes Timeline-Elements anzuordnen und zu gestalten.

Wichtige Einstellungen:

• Anzahl der Spalten: Legt das allgemeine Rasterlayout innerhalb jedes Elements fest (z. B. 1, 2, 3 Spalten). Dies gilt für die Standard-/extra-kleine Bildschirmgröße.

• Anzahl der Spalten Small/Medium/Large Container: Legen Sie die Anzahl der Spalten basierend auf den Bildschirmgrößen fest.

• Variante: Steuert den allgemeinen visuellen Stil der Feldanzeige (Optionen können variieren).

Individuelle Feldanpassung: Aus dem Stil-Panel können Sie das Styling der Elementfelder anpassen.

6. Elementaktionen hinzufügen

Fügen Sie interaktive Schaltflächen zu jedem Timeline-Element mithilfe der Einstellungen „Elementaktionen“ hinzu. Diese Aktionen ermöglichen es Nutzern, mit den Daten für dieses spezifische Element.

Um Aktionen hinzuzufügen und zu konfigurieren:

1. Suchen Sie den Abschnitt „Elementaktionen“ in den Eigenschaften der Timeline-Komponente.

2. Fügen Sie eine neue Aktion hinzu.

3. Legen Sie das Beschriftung und Icon-Name (optional) der Aktion fest.

4. Fügen Sie eine Interaktion zur Aktion aus dem Interaktions-Tab („Bei Klick auf Elementaktion").

5. Wählen Sie einen Aktionstyp (Navigieren, Flow ausführen usw.) und konfigurieren Sie ihn, wobei Sie bei Bedarf Daten aus dem aktuellen Timeline-Element verwenden (unter Bezugnahme auf in Ihren Datenzuordnungen zugeordnete Felder).

7. Filteroptionen konfigurieren

Fügen Sie Ihrer Avonni Timeline Filter hinzu, damit Benutzer die angezeigten Ereignisse eingrenzen können.

Um Filter zu aktivieren:

1. Wählen Sie die Timeline-Komponente aus.

2. Suchen Sie das Attribut „Filter“ im Eigenschaftenbereich unter dem Abschnitt Datenzuordnungen

3. Wählen Sie, welche Felder aus Ihrer Datenquelle filterbar sein sollen.

4. Legen Sie Filtertypen fest und passen Sie sie an.

Die Timeline zeigt ein Filterinterface an, und Benutzer können dann Kriterien auswählen, um die Ereignisse zu filtern. Die Timeline ist standardmäßig filterbar.

Anpassen der Timeline-Komponente

Sobald Sie Ihre Daten verbunden und Filter/Elementaktionen konfiguriert haben, können Sie das Erscheinungsbild und Verhalten der Avonni Timeline-Komponente mithilfe ihrer Eigenschaften anpassen.

Kopfzeilen-Eigenschaften

Die Kopfzeile erscheint über der Timeline selbst und bietet Kontext und allgemeine Aktionen.

• Titel: (Text) Geben Sie den Haupttitel für Ihre Timeline ein (z. B. „Projekt-Timeline“, „Opportunity-Historie“). Dieser wird prominent in der Kopfzeile angezeigt.

• Beschriftung: (Text, optional) Eine kürzere Beschreibung oder Untertitel, der unter dem Titel angezeigt wird. Verwenden Sie dies, um zusätzlichen Kontext zu liefern.

• Icon-Name: (Text, optional) Der Name eines Avonni- oder SLDS-Icons, das in der Kopfzeile angezeigt werden soll (z. B. utility:date_time, standard:event).

• Aktionen: (Aktionen, optional) Fügen Sie Schaltflächen zur Kopfzeile hinzu, um allgemeine Aktionen in Bezug auf die gesamte Timeline bereitzustellen (nicht einzelne Ereignisse). Beispiele:

  • „Daten aktualisieren“-Schaltfläche: Aktualisiert die Datenquelle der Timeline.

  • „Daten exportieren“-Schaltfläche: Ermöglicht Benutzern, die Timelinedaten zu exportieren.

  • „Ereignis hinzufügen“-Schaltfläche: Könnte ein Modal öffnen oder zu einer Seite navigieren, um ein neues Ereignis zu erstellen (dies wäre jedoch eine allgemeine „hinzufügen“-Aktion, die nicht an einen bestimmten Zeitabschnitt gebunden ist, wie z. B. Ziehen-zum-Erstellen).

  • Diese Kopfzeilenaktionen verwenden das Standard-Avonni- Interaktionen System (Bei Klick, usw.).

• Verbunden: (Boolean - Kontrollkästchen) Steuert, ob die Kopfzeile visuell mit dem Timeline-Inhalt verbunden ist oder als separates Element darüber erscheint.

Interaktions-Eigenschaften

Diese Eigenschaften definieren, wie die Timeline auf Benutzerinteraktionen mit den Timeline-Elementen selbst reagiert (nicht auf die Kopfzeilenaktionen).

• Bei Klick auf Element: Definieren Sie eine Interaktion die ausgelöst wird, wenn der Benutzer auf ein Timeline-Element (ein Ereignis) klickt. Sie können Daten aus dem angeklickten Element innerhalb der Interaktion verwenden. Häufige Aktionen:

  • Navigieren: Gehen Sie zur Detailseite des Datensatzes, der durch das angeklickte Element dargestellt wird. Sie würden typischerweise den Elementname Wert (den Sie mit der Datensatz-ID verknüpft haben) in der Navigationsaktion verwenden.

  • Toast anzeigen: Eine Nachricht anzeigen.

  • Flow ausführen: Starten Sie einen Flow und übergeben Sie Daten aus dem angeklickten Element als Eingabevariablen.

  • Flow-Dialog/Panel öffnen: Starten Sie einen Screen Flow.

  • Einen Datensatz aktualisieren: Aktualisieren Sie den Datensatz