Page cover

Datentabelle

Die Avonni Datentabelle-Komponente ermöglicht es Ihnen, Datensammlungen in einer strukturierten und organisierten Tabellenansicht darzustellen.

Einrichten Ihrer Datentabelle

Wählen Sie Ihre Datenquelle

Der erste Schritt besteht darin, der Datentabelle mitzuteilen, woher sie ihre Daten beziehen soll.

Hier sind Ihre Optionen:

Spalten definieren und Daten zuordnen

Sobald Ihre Datenquelle verbunden ist, müssen Sie festlegen, welche Felder als Spalten angezeigt werden und wie sie konfiguriert sind.

Spalten hinzufügen und konfigurieren:

  1. Spalte hinzufügen: Klicken Sie auf die Schaltfläche „Spalte hinzufügen“, um eine neue Spalte zu erstellen. Wiederholen Sie dies für jedes Feld, das Sie anzeigen möchten.

  2. Datenfelder zuordnen:

    • Quellfeld: Wählen Sie das Feld aus Ihrer gewählten Datenquelle (Manuell, Variable oder Abfrage), das diese Spalte füllen soll.

    • Spaltenbeschriftung (optional): Geben Sie einen benutzerfreundlichen Namen für die Spaltenüberschrift an. Wenn Sie das Feld leer lassen, kann das System den Feldnamen oder das Label verwenden.

    • Datentyp: Die Datentabelle erkennt den Datentyp (Text, Zahl, Datum usw.) in der Regel automatisch. Sie können diesen bei Bedarf oft überschreiben (z. B. um eine Zahl als Währung anzuzeigen).

  3. Spalteneinstellungen anpassen: Passen Sie diese Einstellungen nach Bedarf an:

    • Filterbar: Ermöglichen Sie Benutzern, die Tabelle anhand dieser Spalte zu filtern.

    • Bearbeitbar: Ermöglichen Sie Benutzern, Daten direkt in den Zellen dieser Spalte zu ändern. Wichtig: Siehe den Abschnitt „Inline-Bearbeitung aktivieren“ weiter unten für Details zum Speichern von Änderungen.

    • Durchsuchbar: Beziehen Sie diese Spalte in die tabellenweiten Suchvorgänge ein.

    • Sortierbar: Ermöglichen Sie Benutzern, die Tabelle nach dieser Spalte zu sortieren.

    • Breite: Geben Sie eine feste oder prozentuale Breite für die Spalte an.

    • Ausrichtung: Steuern Sie die Textausrichtung (links, zentriert, rechts).

    • Weitere Optionen: Erkunden Sie zusätzliche Spalteneinstellungen in der Dokumentation zur Datentabelle für erweiterte Anpassungen.

  4. Spalten neu anordnen (optional): Ziehen Sie Spalten im Konfigurationsbereich per Drag & Drop, um die Anzeigeordnung zu ändern.

Inline-Bearbeitung aktivieren (optional)

Ermöglichen Sie Benutzern, Daten direkt in den Tabellenzellen zu bearbeiten.

Optionen für die Inline-Bearbeitung

  • Stift-Symbol: Wenn Sie die Einstellung „Bearbeitbar“ für eine Spalte aktivieren, wird ein Stift-Symbol angezeigt. Benutzer klicken darauf, um den Wert der Zelle zu bearbeiten.

  • Direkte Zellbearbeitung („Als Eingabefeld anzeigen“): Für ein schlankeres Erlebnis wählen Sie die Option „Als Eingabefeld anzeigen“. Dadurch werden Zellen bearbeitbar, ohne einen zusätzlichen Klick zu erfordern.

Speichern von Inline-Änderungen

Wichtig

Tutorial 👇

Wie man ein Feld editierbar macht

Zeilenaktionen hinzufügen (optional)

Bieten Sie schnellen Zugriff auf Aktionen, die sich auf einzelne Datensätze in der Tabelle beziehen.

Erstellen von Zeilenaktionen:

  • Erstellen Sie eine Aktionsspalte: Fügen Sie Ihrer Tabelle eine neue Spalte hinzu und setzen Sie deren Typ auf „Aktion“. Dies ist wesentlich zum Erstellen von Zeilenaktionen.

  • Aktionsbeschriftungen definieren: Fügen Sie in den Einstellungen der Aktionsspalte die gewünschten Aktionen hinzu (z. B. „Bearbeiten“, „Löschen“, „Details anzeigen“). Diese Bezeichnungen werden in einem Dropdown-Menü in jeder Zeile angezeigt.

Konfigurieren der Funktionalität von Zeilenaktionen:

  • Interaktionen: Sie müssen definieren Interaktionen für jede Zeilenaktion. Beispielsweise sollte das Klicken auf „Löschen“ eine Interaktion auslösen, die einen Bestätigungsfluss öffnet.

Daten gruppieren (optional)

Organisieren Sie Daten in Kategorien für eine einfachere Analyse und ein besseres Verständnis.

Gruppierung einrichten:

  • Gruppierungsspalte: Wählen Sie eine Spalte, nach der in der Datenzuordnungssektion gruppiert werden soll (z. B. „Status“, „Region“, „Besitzer“).

Gruppenanzeige anpassen

  • Anzeigeoptionen:

    • Undefined-Labels ausblenden: Steuern Sie die Anzeige leerer Gruppierungswerte.

    • Gruppen einklappen: Klappen Sie Gruppen initial ein, um Platz zu sparen.

    • Zeilenanzahl anzeigen: Zeigen Sie die Anzahl der Datensätze innerhalb jeder Gruppe an.

  • Gruppenreihenfolge: Legen Sie die Sortierreihenfolge für Gruppen fest (Standard, aufsteigend, absteigend oder benutzerdefiniert).

  • Werte verlinken: (Für Nachschlagefelder) Machen Sie Gruppenkopfwerte anklickbar, sodass der Benutzer zum zugehörigen Datensatz navigiert


Weitere Einstellungen

Allgemeine Eigenschaften

Einstellung
Beschreibung

Tabellenkopf ausblenden

Blendet die Tabellenkopfzeile aus, wenn aktiviert

Tabellenkopf umbrechen

Lange Spaltenüberschriften werden automatisch bis zu 3 Zeilen umgebrochen, wodurch abgeschnittene Texte vermieden und die Lesbarkeit verbessert wird

Kontrollkästchen-Spalte ausblenden

Entfernt die Kontrollkästchenspalte, die zur Zeilenauswahl verwendet wird

Zeilennummern-Spalte anzeigen

Zeigt Zeilennummern in der ersten Spalte an, wenn aktiviert. HINWEIS: Die Avonni-Datentabelle verwendet die standardmäßige Salesforce-Datentabelle als Grundlage. Deshalb erscheinen bei Aktivierung der „Inline-Bearbeitung“ (die es Benutzern erlaubt, Daten direkt in der Tabelle zu bearbeiten) automatisch Zeilennummern. So hat Salesforce es entworfen und dieses Verhalten können wir nicht ändern.

Maximale Zeilenauswahl

Legt die maximale Anzahl der auswählbaren Zeilen fest.

Fußleiste unterdrücken

Blendet die Fußzeile mit den Schaltflächen „Speichern“ und „Abbrechen“ während der Inline-Bearbeitung aus.

Anzahl der ausgewählten Elemente anzeigen

Zeigt die Anzahl der ausgewählten Elemente an, wenn aktiviert.

Schreibgeschützt

Verhindert das Bearbeiten von Datensätzen und macht die Tabelle schreibgeschützt

unterstützen nicht direkt das Vorauswählen von Zeilen mithilfe von Datensatz-IDsWichtiger Hinweis zur Vorauswahl von Zeilen

Die Avonni-Datentabelle, wie auch Salesforces lightning-datatable, unterstützt nicht direkt das Vorauswählen von Zeilen mithilfe von Datensatz-IDs. Die Zeilenauswahl wird verwaltet durch:

  1. Daten: Das Daten die der Tabelle bereitgestellt werden.

  2. Benutzerinteraktion: Klicks innerhalb der Tabelle.

Sie können Zeilen nicht programmgesteuert per ID über eine integrierte Eigenschaft auswählen. Stattdessen ist die Zeilenauswahl eine Folge der angezeigten Daten und direkter Benutzeraktionen.

Mobile Reaktionsfähigkeit

Die Avonni-Datentabelle basiert auf der Lightning Data Table von Salesforce. Die Lightning Data Table hat eine begrenzte Reaktionsfähigkeit und passt sich möglicherweise nicht automatisch an kleinere Bildschirme an. Um die Datentabelle für Mobilgeräte zu optimieren, ziehen Sie diese Optionen in Betracht:

  • Erstellen Sie eine separate Datentabelle für Mobilgeräte: Erstellen Sie eine vereinfachte Version mit weniger Spalten, die speziell für mobile Benutzer konzipiert ist. Verwenden Sie die Sichtbarkeitseinstellungen der Salesforce-Komponente, um diese mobilfreundliche Tabelle nur auf kleineren Bildschirmen anzuzeigen.

  • Verwenden Sie die Avonni-Liste Komponente: Für eine reaktionsfähigere Lösung sollten Sie die Avonni-List-Komponente in Betracht ziehen. Diese Komponente verfügt über eingebaute responsive Einstellungen die die Anzeige basierend auf der Bildschirmgröße anpassen. Kombinieren Sie dies mit den Sichtbarkeitseinstellungen der Salesforce-Komponente, um die Liste nur auf mobilen Geräten anzuzeigen.


Der Header ist die oberste Zeile Ihrer Datentabelle. Verwenden Sie den Header-Bereich, um dessen Erscheinungsbild anzupassen und Funktionen hinzuzufügen.

Header-Optionen

  • angezeigterTitel: Geben Sie Ihrer Datentabelle einen klaren und beschreibenden Titel. Dies hilft Benutzern, den Inhalt der Tabelle auf einen Blick zu verstehen.

  • Bildunterschrift: Fügen Sie eine kurze Beschreibung oder zusätzliche Informationen unter dem Titel hinzu, um Kontext oder Details zu den Daten bereitzustellen.

  • Symbol: Fügen Sie ein Symbol im Header hinzu, um ihn optisch ansprechender zu gestalten oder den Zweck der Tabelle zu repräsentieren.

  • Ist verbunden: Diese Option entfernt die untere Rahmenlinie des Headers, sodass er nahtlos mit dem Rest der Tabelle oder anderen Komponenten verschmilzt.

  • Aktionen: Fügen Sie Schaltflächen zu Ihrem Header hinzu, damit Benutzer schnellen Zugriff auf alltägliche Aktionen haben, z. B. zum Erstellen eines neuen Datensatzes oder zum Exportieren von Daten. Sie können diese Aktionen im Tab „Interaktion“ anpassen.

  • Sichtbare Aktionen: Steuern Sie, wie viele Aktionsschaltflächen direkt im Header angezeigt werden. Der Rest wird in einem Dropdown-Menü platziert, wenn Sie mehr Aktionen haben, als Sie anzeigen möchten. Wenn Sie beispielsweise 4 Aktionen haben, aber „Sichtbare Aktionen“ auf 2 setzen, werden nur die ersten 2 Schaltflächen direkt angezeigt.

  • Aktionen ausblenden: Blendet das Aktionsmenü im Header vollständig aus.

  • Aktionen deaktivieren: Macht das Aktionsmenü inaktiv (ausgegraut), aber weiterhin sichtbar im Header

Tutorial: So machen Sie Header-Aktionen in der Avonni-Datentabelle dynamisch grau


Spaltenbreiten

Spaltenbreiten können bei Bedarf angepasst werden. Standardmäßig haben alle Spalten min- und Max-Werte in Pixeln.

Einstellung
Beschreibung
Details & Optionen

Modus für Spaltenbreiten

Gibt an, wie Spaltenbreiten berechnet werden.

- Feste Breite: Gleiche Breiten für alle Spalten. - Automatisch: Breiten basierend auf Inhalt und Tabellenbreite. Standard ist „Feste Breite“.

Maximale Spaltenbreite

Legt die maximale Breite für alle Spalten fest.

Verhindert, dass Spalten zu breit werden.

Minimale Spaltenbreite

Legt die minimale Breite für alle Spalten fest.

Stellt sicher, dass Spalten nicht zu schmal werden und die Lesbarkeit beeinträchtigen.

Maximale Zeilen zum Umbruch von Text

Gibt die maximale Anzahl von Zeilen an, bevor der Inhalt abgeschnitten wird.

Der Inhalt wird nach der eingestellten Zeilenanzahl abgeschnitten und mit Auslassungspunkten angezeigt. Muss 1 oder größer sein.

Spaltenanpassung deaktiviert

Deaktiviert das manuelle Ändern der Spaltenbreite.

Hilfreich, um konsistente Spaltenbreiten beizubehalten.

Schrittgröße der Größenänderung

Breitenanpassungsbetrag beim Ändern der Spaltengrößen mit den Pfeiltasten.

Ermöglicht fein abgestimmte Anpassungen der Spaltenbreite.

SPALTENBREITE EINZELN FESTLEGEN

Die Spaltenbreite kann einzeln festgelegt werden für jede Spalte wie folgt:

  • Gehen Sie zum Datenzuordnungsabschnitt

  • Klicken Sie auf eine Spalte

  • Scrollen Sie nach unten vollständig und klicken Sie auf „Erweiterte Option"

  • Legen Sie eine spezifische feste Breite für diese Spalte fest.


Spaltensortierung

Sie können die Sortieroptionen für Spalten festlegen. Die Standard- Sortierrichtung wird auf sortierte Spalten angewendet.

Jede Spalte kann durch Aktivieren des Sortierumschalters direkt in den Spalteneigenschaften sortierbar gemacht werden.


Paginierung

Das Paginierung Abschnitt ermöglicht es Ihnen, die Paginierung für Ihre Datentabelle zu aktivieren.

Hier ist wie Sie Paginierung hinzufügen an Ihrer Datentabelle:

  • Erweitern Sie im Eigenschaftsbereich den Abschnitt Paginierungsoptionen

  • Aktivieren Sie den „Paginierung anzeigen“-Schalter

  • Geben Sie Ihre gewünschte Anzahl von Elementen pro Seite ein

  • Passen Sie andere Einstellungen wie an:

    • Ausrichtung der Paginierung

    • Symbol und Beschriftung der Schaltflächen.


Pill-Container

Wenn Sie die Option Pill-Container aktivieren, werden ausgewählte Elemente in einem Pill-Container angezeigt. Pillen können sortiert und durch Aktivierung der entsprechenden Option in einer einzigen Zeile dargestellt werden.

Das Beschriftungsfeld Attribut zeigt den Pill-Namen durch das ausgewählte Feld an.

Endergebnis

Einstellung
Beschreibung

Beschriftungsfeld

Bestimmt den Feldnamen, der für das Pill-Label verwendet wird.

Sortierbar

Aktiviert das Sortieren innerhalb des Pill-Containers.

Einzelne Zeile

Begrenzt den Pill-Container auf eine einzige Zeile.


Daten filtern

Die Avonni-Datentabelle erleichtert es Benutzern, die benötigten Informationen zu finden, indem sie Filter auf die Daten anwenden. Sie haben mehrere Optionen zum Einrichten von Filtern:

  • In den Komponenteneinstellungen (Eigenschaftsbereich): Passen Sie die Filtereinstellungen innerhalb der Eigenschaften der Komponente an.

  • Filtern nach nicht sichtbaren Daten: Sie können Daten sogar basierend auf Spalten filtern, die in der Tabelle nicht sichtbar sind.

Jede Methode gibt Ihnen Kontrolle darüber, wie Benutzer ihre Ansicht der Daten verfeinern können.

So fügen Sie Filter hinzu

Aus dem Eigenschaftsbereich

  • Gehen Sie zum Datenzuordnungsabschnitt

  • Klicken Sie auf die Spalte des Feldes, das Sie durchsuchbar machen möchten

  • Scrollen Sie nach unten und schalten Sie den Filterbar Attribut zu verwenden.

Filtern nach nicht sichtbaren Daten

Im Abschnitt Datenzuordnungen können Sie bestimmte Felder als Filter verwenden für andere Felder, die nicht als Spalten sichtbar sind. Dadurch können Sie zusätzliche Filter zu Ihren Daten hinzufügen, ohne Ihre Datentabelle mit zusätzlichen Spalten zu überladen.

So wenden Sie Feldfilter in der Datentabelle an, ohne die Felder anzuzeigen

Filteroptionen

Die Avonni-Datentabelle bietet drei Filtertypen, die jeweils darauf ausgelegt sind, unterschiedlichen Benutzerpräferenzen und Bildschirmgrößen gerecht zu werden.

Filtertyp
Beschreibung
Illustration

Horizontal

Diese Filter erscheinen direkt über der Datentabelle in einer horizontalen Reihe

Popover

Diese Option ermöglicht es, Filter hinter anklickbaren Symbolen oder Schaltflächen zu verbergen; beim Klicken erscheint eine kleine, schwebende Oberfläche, die die Filteroptionen enthält,

Seitenpanel

Filter in einem Seitenbereich befinden sich links oder rechts von Ihrer Datentabelle und sind über ein Panel zugänglich, das erweitert oder reduziert werden kann

Zugriff auf das Filtermenü

  • Wählen Sie die Datentabelle aus

  • Scrollen Sie im Eigenschaftsbereich zum Abschnitt Filter.

  • Wählen Sie, wie Sie die Filter anzeigen möchten.

Das Filterpanel anpassen

Wenn Sie Ihre Avonni-Datentabelle so konfigurieren, dass sie einen „Panel“-Filter verwendet, können Sie Filteroptionen in einem praktischen Seitenpanel präsentieren. Dieses Panel bietet zusätzliche Anpassungseinstellungen, die nachfolgend beschrieben werden:

  • Position (Links, Rechts):

    • Diese Einstellung legt fest, ob Ihr Filterpanel beim Interagieren des Benutzers von der linken oder rechten Seite des Bildschirms hereinschiebt.

  • Ist geschlossen:

    • Diese Option steuert den Anfangszustand des Filterpanels.

    • Setzen Sie „Ist geschlossen“ auf „Wahr“, wenn das Filterpanel standardmäßig versteckt starten soll. Dies ist nützlich, wenn Sie zunächst den Inhalt der Datentabelle betonen möchten.

    • Setzen Sie „Ist geschlossen“ auf „Falsch“, wenn das Filterpanel standardmäßig geöffnet sein soll, damit Benutzer sofort ihre Datenansicht anpassen können.

  • Umschalttaste verbergen:

    • Gibt an, ob eine Umschalttaste sichtbar ist, wenn das Filterpanel manuell geöffnet und geschlossen wird.

    • Setzen Sie „Umschalttaste ausblenden“ auf „Wahr“, wenn Sie möchten, dass das Panel basierend auf anderen Ereignissen innerhalb Ihres Flows (z. B. beim Klicken auf ein Filtersymbol) geöffnet und geschlossen wird.

    • Setzen Sie „Umschalttaste ausblenden“ auf „Falsch“, um den Benutzern eine stets sichtbare Umschalttaste zur Steuerung des Panels zu geben.

Relevante Picklist-Filter

Die Picklist-Filter der Avonni-Datentabelle passen sich automatisch an Ihre Daten an. Beim Filtern einer Picklist-Spalte zeigt das Filtermenü nur Picklist-Werte an, die in mindestens einer Zeile der aktuellen Tabellendaten vorhanden sind. Dadurch werden ungenutzte Optionen vermieden und der Filtervorgang vereinfacht.

Aktivieren Sie dies, indem Sie „Leere Picklist-Werte ausblenden“ in den Eigenschaften der Datentabelle auf „Ein“ setzen.


Suche

Die Suchoptionen lassen Sie die Suchfeldoption konfigurieren. Sie können den Platzhaltertext anpassen und die Position Ihres Suchfelds festlegen. Das Suchfeld wird angezeigt, wenn mindestens ein Feld durchsuchbar ist.

Wichtige Hinweise zu durchsuchbaren Feldern

Ein Feld durchsuchbar machen

Aus dem Eigenschaftsbereich

  • Gehen Sie zum Datenzuordnungsabschnitt

  • Klicken Sie auf die Spalte des Feldes, das Sie durchsuchbar machen möchten

  • Scrollen Sie nach unten und schalten Sie den Durchsuchbar Attribut zu verwenden.

Suche auf nicht sichtbaren Daten

Mit dieser Funktion können Benutzer Suchanfragen auf bestimmte Felder des zugrunde liegenden Datensatzes ausführen, auch wenn diese im Tabellenansicht nicht sichtbar sind.

  • Wählen Sie die Datentabelle aus

  • Öffnen Sie den Abschnitt Datenzuordnungen

  • Im Suchfelder Attribut, wählen Sie die Felder aus, die durchsuchbar sein müssen, ohne sie in der Datentabelle anzuzeigen.

Legen Sie einen Standard-Suchwert fest

In den Suchoptionen ermöglicht das Attribut 'defaultSearchValue', einen vordefinierten Suchbegriff in Ihren Tabellen festzulegen. Wenn die Datentabelle geladen wird, führt sie automatisch eine Suche mit diesem angegebenen Begriff durch.


Interaktionen

Sie können verschiedene interaktive Elemente innerhalb der Avonni-Datentabelle konfigurieren, um den Benutzern Möglichkeiten zur Interaktion mit den Daten zu bieten:

Header-Aktionen (Tabellenweite Aktionen)

  • Zweck: Bieten Sie Aktionen an, die auf die gesamte Datentabelle wirken oder allgemeine Aufgaben auslösen.

  • Implementierung: Fügen Sie Schaltflächen oder andere interaktive Komponenten in den Header-Bereich der Datentabelle ein.

  • Beispiele: „Neuen Datensatz erstellen“, „Als CSV exportieren“, „Massenaktualisierung“, „Filtervorgabe anwenden“.

Zeilenaktionen (Datensatzspezifische Aktionen)

  • Zweck: Ermöglichen Sie Benutzern, Aktionen im Zusammenhang mit einem bestimmten Datensatz in der Tabelle auszuführen.

  • Implementierung: Fügen Sie Schaltflächen oder andere interaktive Komponenten zu jeder Datenzeile hinzu.

  • Beispiele: „Datensatz bearbeiten“, „Datensatz löschen“, „Datensatzdetails anzeigen“, „Zustimmen/Ablehnen“, „Workflow starten“.

Änderungen speichern (Speichern-Aktion)

  • Zweck: Um alle innerhalb der bearbeitbaren Zellen der Datentabelle vorgenommenen Änderungen zu übernehmen.

  • Implementierung: Konfigurieren Sie eine bestimmte Interaktion, um die „Datensätze speichern“-Aktion“ auszulösen, die die Änderungen in der zugrunde liegenden Datenquelle übernimmt.

Änderungen verwerfen (Abbrechen-Aktion)

  • Zweck: Ermöglichen Sie Benutzern, nicht gespeicherte Änderungen rückgängig zu machen und die Tabelle in ihren vorherigen Zustand zurückzusetzen.

  • Implementierung: Konfigurieren Sie eine bestimmte Schaltfläche oder Aktion, um ausstehende Änderungen abzubrechen

Zuletzt aktualisiert

War das hilfreich?