Zeitachse

Einrichten Ihrer Timeline

1. Datenquelle konfigurieren

Bevor Ihre Timeline Informationen anzeigen kann, müssen Sie ihr sagen, woher die Daten stammen. 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. Betrachten Sie Datenzuordnungen als die "Anweisungen", die der Timeline-Komponente sagen, Um anzugeben, Felder enthalten das Startdatum, Enddatum, den Titel, die Beschreibung usw. für jedes Timeline-Element.

Beispiel (Opportunities):

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

• Titel: Name

• Beschreibung: Description__c

• Startdatum: CloseDate

Dies weist die Timeline an, den Opportunity-Namen als Elementtitel, das benutzerdefinierte Beschreibungsfeld und das Close Date als Startdatum zu verwenden.

3. Timeline-Ausrichtung wählen

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

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

• Sortierrichtung: Wählen Aufsteigend (ältestes bis neuestes) oder Absteigend (neuestes bis ältestes), 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 und macht die Navigation einfacher.

5. Zusätzliche Felder anzeigen und anpassen

Zeigen Sie zusätzliche Felder aus Ihrer Datenquelle in jedem Timeline-Element an und passen Sie deren Darstellung an.

Felder hinzufügen:

• Finden Sie den Abschnitt "Felder" oder "Elementfelder" in den Eigenschaften der Timeline-Komponente.

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

Anpassen der Feldanzeige: Feldlayout

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

Schlüsseleinstellungen:

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

• Anzahl der Spalten für kleine/mittlere/große 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 die Gestaltung der Elementfelder anpassen.

6. Elementaktionen hinzufügen

Fügen Sie jedem Timeline-Element interaktive Schaltflächen über die Einstellungen "Elementaktionen" hinzu. Diese Aktionen ermöglichen es Benutzern, mit den Daten für das spezifische Element zu interagieren.

Um Aktionen hinzuzufügen und zu konfigurieren:

1. Finden Sie den Abschnitt "Elementaktionen" in den Eigenschaften der Timeline-Komponente.

2. Fügen Sie eine neue Aktion hinzu.

3. Legen Sie die Beschriftung und Symbolname (optional) der Aktion fest.

4. Fügen Sie eine Interaktion zur Aktion aus dem Interaktionen-Tab ("Bei Elementaktionsklick").

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 Felder, die in Ihren Datenzuordnungen zugeordnet sind).

7. Filteroptionen konfigurieren

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

Um das Filtern zu aktivieren:

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

2. Finden 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 diese an.

Die Timeline zeigt eine Filteroberfläche 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 Aussehen und Verhalten der Avonni-Timeline-Komponente mithilfe ihrer Eigenschaften anpassen.

Header-Eigenschaften

Der Header erscheint Fügen Sie eine Columns-Komponente aus der Komponentenbibliothek die Timeline selbst und bietet Kontext und allgemeine Aktionen.

• Titel: (Text) Geben Sie den Haupttitel für Ihre Timeline ein (z. B. „Projektzeitachse“, „Opportunity-Verlauf“). Dieser wird prominent im Header angezeigt.

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

• Symbolname: (Text, optional) Der Name eines Avonni- oder SLDS-Symbols, das im Header angezeigt werden soll (z. B. utility:date_time, standard:event).

• Aktionen: (Aktionen, optional) Fügen Sie Schaltflächen zum Header 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: Kann ein Modal öffnen oder zu einer Seite navigieren, um ein Listenansicht, benötigen Sie oft zusätzliche Konfiguration (die vom spezifischen Avonni-Komponenten abhängen kann). Lesen Sie die Dokumentation der Komponente für Details. Ereignis zu erstellen (dies wäre jedoch eine allgemeine "Hinzufügen"-Aktion, die nicht an einen bestimmten Zeitabschnitt wie Drag-to-Create gebunden ist).

  • Diese Header-Aktionen verwenden das standardmäßige Avonni- Interaktionen System (Bei Klick usw.).

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

Interaktionseigenschaften

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

• Bei Elementklick: 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 repräsentiert wird. Sie würden typischerweise den Elementnamen Wert (den Sie der Datensatz-ID zugeordnet haben) in der Navigationsaktion verwenden.

  • Toast anzeigen: Eine Nachricht anzeigen.

  • Flow ausführen: Einen Flow starten und Daten aus dem angeklickten Element als Eingabevariablen übergeben.

  • Flow-Dialog/Panel öffnen: Einen Screen Flow starten.

  • Einen Datensatz aktualisieren: Den Datensatz aktualisieren