Editable Grid (Pro)
Editierbare Tabellen bieten die Möglichkeit mehrere bestehende Datensätze effektiv mit der Tastatur zu bearbeiten.
Overview
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Intro
Editable Grids bieten die Möglichkeit mehrere bestehende Datensätze effektiv mit der Tastatur zu bearbeiten. Editable Grids können je nach Anwendungsfall Teil eines Formulars sein, oder auf einer dedizierten Seite genutzt werden. Analog zu Formularen lassen sich auch Fehlermeldungen und Hilfestellungen nutzen.
Verwendung
Live-Variante
Die Live-Variante der editierbaren Tabellen stellt die aller einfachste Form dieser Komponente dar. Sie speichert Änderungen in einer Zelle direkt in die Datenbank. Daher ist diese Variante nur für äußerst einfache Anpassungen an Daten, die so gut wie vollständig auf Validierungen und Hilfestellungen verzichten können, geeignet. In den meisten fällen ist die Entwurf-Variante zu bevorzugen.
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn kleine einfache Änderungen an einer größeren Menge von Daten durchgeführt werden sollen. ... wenn schnelles, massenhaftes bearbeiten möglich sein soll. ... wenn Validierungen beim Bearbeiten der Daten so gut wie vollständig außer Acht gelassen werden können. | ... wenn viele Spalten notwendig wären, verwende dazu Formulare. ...wenn Eingabefelder größer als ein normales Feld sein müssen, wie z.B. mehrzeilige Textfelder. ... wenn Nutzer typischerweise immer nur Änderungen an einzelnen Objekten durchführen müssen, verwende dazu ein Formular. ... wenn das Hinzufügen und Entfernen von Objekten die Regel beim Bearbeiten darstellt. Verwende dazu ein Formular in Kombination mit einer Tabelle, wie es z.B. in den Tabellensektionen der Objektseite zu sehen ist. ... wenn eine übergreifende Validierung über mehrere Objekte beim Editieren notwendig ist, um z.B. einen konsistenten Gesamtzustand zu erreichen. ... wenn eine übergreifende Validierung über mehrere Objekte beim Editieren notwendig ist, um z.B. einen konsistenten Gesamtzustand zu erreichen. Verwende dazu die Entwurf-Variante ... wenn Validierungen und Hilfestellungen notwendig sind, verwende dazu die Entwurf-Variante. ... wenn Editable Grids im Kontext eines Formulars verwendet werden sollen. Verwende dazu die Entwurf-Variante. |
Entwurf Variante
Die Entwurf-Variante der editierbaren Tabellen stellt die mächtigere Form dieser Komponente dar. Sie hält Änderungen in Entwürfen fest, um dadurch auch komplexere, zeilenübergreifende Validierungen zu unterstützen. Darüber hinaus bietet sie gute Möglichkeiten, um Rückmeldungen zu Validierungen und weitere Hinweise zu geben.
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn kleine Änderungen an einer größeren Menge von Daten durchgeführt werden sollen. ... wenn schnelles, massenhaftes Bearbeiten möglich sein soll. ... wenn eine übergreifende Validierung über mehrere Objekte beim Editieren notwendig ist, um z.B. einen konsistenten Gesamtzustand zu erreichen. ... wenn Editable Grids im Kontext eines Formulars verwendet werden sollen.. | ... wenn viele Spalten notwendig wären, verwende dazu Formulare. ... wenn Eingabefelder, größer als ein normales Feld sein müssen, wie z.B. mehrzeilige Textfelder. ... wenn Nutzer typischerweise immer nur Änderungen an einzelnen Objekten durchführen müssen, verwende dazu ein Formular. ... wenn das Hinzufügen und Entfernen von Objekten die Regel beim Bearbeiten darstellt. Verwende dazu ein Formular in Kombination mit einer Tabelle, wie es z.B. in den Tabellensektionen der Objektseite zu sehen ist. |
Do's and Don'ts
Einfache Suche
| 👍 Do | 👎 Don't |
|---|---|
| Verzichte auf die Suche der Tabellenfunktionsleiste | Editierbare Tabelle mit aktivierter Suche in Tabellenfunktionsleiste |
Komplexere Suchen
| 👍 Do | 👎 Don't |
|---|---|
| Verzichte auf die Suchleiste. Nutze eine Tabellenseite für die Suche und eine eigene Ansicht mit editierbarer Tabelle zum Bearbeiten. | Editierbare Tabelle mit Suchleiste |
Hinzufügen und Löschen
| 👍 Do | 👎 Don't |
|---|---|
| Verzichte auf Funktionen zum direkten Löschen und Hinzufügen, während die Nutzer die editierbare Tabelle nutzen. | Editierbare Tabelle mit Funktionen zum direkten Löschen und Hinzufügen von Objekten. |
Live-Variante und Speichern-Tasten
| 👍 Do | 👎 Don't |
|---|---|
| Stelle keine Tasten zum Speichern im Umfeld der Tabelle dar. Diese führen sonst zu Verwirrungen bzgl. des Speicherzeitpunktes dieser Variante. | Live-Variante der editierbaren Tabellen mit Funktionsleiste die Speichern-Tasten beinhaltet. |
Guidelines
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Aufbau
Live-Variante
- Tabellen-Funktionsleiste
- Erklärungen (Optional)
- Details (Optional)
- Nicht editierbare Zellen (Optional)
- Editierbare Zellen
- Fehlermeldungen in Zellen
- Tabellenfußzeile (Optional)
Entwurf-Variante
- Tabellen-Funktionsleiste
- Details (Optional)
- Editierbare Zellen
- Nicht editierbare Zellen (Optional)
- Ungespeicherte Änderungen
- Erklärungen (Optional)
- Fehlermeldungen in Zellen
- Fehler-Filter
- Errors-on-top
- Tabellenfußzeile (Optional)
- Funktionsleiste
 | |
 | |
 |
Verhalten
Editieren
Editiermodus starten
- Ein einfacher Klick oder Tap auf eine editierbare Zelle startet den Editiermodus.
- Wenn eine Zelle fokussiert ist, dann kann der Editiermodus durch die Eingabetaste , die Leertaste oder durch die Eingaben von einem alphanumerischen Zeichen gestartet werden.
Dev:
Stelle sicher das Edit on Single Click aktiviert ist.
Während dem Editieren
- Durch die Esc Taste lässt sich der Editiermodus abbrechen. Dabei werden die Eingaben in der Zelle verworfen.
- Eingabetaste oder Umschalttaste+Eingabetaste führen zur Übernahme der Daten der Zelle in einen Entwurf. Der Editiermodus wird verlassen.
- Bei Bedarf kann bei der Eingabetaste und Umschalttaste+Eingabetaste der Editiermodus aktiv bleiben. Dabei wird die nächste oder vorherige Zeile fokussiert. Dies ist nützlich um effektiv mehrere Werte in einer Spalte hintereinander zu bearbeiten.
- Tab oder Umschalttaste+Tab führen zur Übernahme der Daten der Zelle in einen Entwurf. Die nächste oder vorherige editierbare Zelle wird fokussiert. Der Editiermodus bleibt aktiv.
Eingabetypen
Folgende Eingabetypen werden zum Editieren empfohlen:
| Komponente | Empfohlene Verwendung | Bemerkung |
|---|---|---|
| Eingabefeld (Text field) | Editieren von Texten | |
| Date Picker, Time Picker, Date Time Picker | Eingabe von Zeitbezogenen Werten | |
| Dropdown-Liste (Drop down) | Auswahl eines einzelnen Wertes aus einer Liste an Optionen die weniger als 200 Einträge enthält | |
| Kombinationsfeld (ComboBox) | Auswahl eines einzelnen Wertes aus einer größeren Liste an Optionen die potenziell mehr als 200 Einträge enthält | |
| Lookup | Auswahl eines einzelnen Wertes aus einer größeren Liste an Optionen die potenziell mehr als 200 Einträge enthält und mehr mind. 3 Kriterien zur richtigen Bestimmung notwendig sind. | Technisch aktuell noch nicht möglich. Geplant in nächster Version. |
| Mehrfachauswahl (Checkbox) | Einzelne Checkbox zum Editieren von booleschen Werten | |
| Alternativauswahl (Radio button) | Nicht empfohlen, verwende dazu eine Dropdown-Liste. |
Formatierungen
Zellen die Werte wie z.B. Geldbeträge oder IBANs enthalten können beim defokussieren formatiert werden um z.B. Tausenderpunkte einzutragen.
Dynamische Inhalte
Zellen oder Inhalte in der Tabellen-Fußzeilen können durch das Editieren beeinflusst werden. Aktualisierungen sollten dabei erst nachdem die entsprechende Zelle defokussiert wird erfolgen.
Speichern
Live-Variante
Die Änderungen in einer Zelle werden automatisch in der Datenbank gespeichert, sobald der Editiermodus verlassen wird oder die nächste Zelle fokussiert wird. Sollte das Speichern fehlschlagen, wird der Wert in der Zelle zurückgesetzt. Zusätzlich wird ein Hinweis angezeigt, der das Problem kommuniziert.
Entwurf-Variante
Die Änderungen in einer Zelle werden als Entwurf festgehalten, sobald der Editiermodus verlassen wird oder die nächste Zelle fokussiert wird. Dadurch lassen sich Änderungen an mehreren Zeilen in Form eines Entwurfs vornehmen. Erst durch das ausdrückliche Speichern über die Funktionsleiste am unteren Bildschirmrand erfolgt eine abschließende Validierung, und die Daten werden in der Datenbank gespeichert.
Sollte das Speichern fehlschlagen, z.B. durch fehlgeschlagene Validierungen oder sonstige Fehler, dann werden die Änderungen nicht verworfen, und es werden entsprechende Fehlermeldungen an den Zellen oder in Form von Errors-on-top angezeigt. Mehr dazu unter Validierungen.
Validierungen und Fehlermeldungen
Live-Variante
In der Live-Variante gibt es lediglich die Post-Submit Validierungen, weil diese Variante beim Defokussieren immer direkt versucht, die Daten zu speichern.
Entwurf-Variante
Pre-Submit Validierung
- Treten Validierungsfehler beim Defokussieren der Zelle auf, dann wird diese als invalide angezeigt.
- Die Fehlermeldungen der einzelnen Zellen lassen sich durch ein Mouse-Over anzeigen.
- Das Fokussieren der invaliden Zelle zeigt ebenfalls die Fehlermeldung an.
- Sollten invalide Zellen in der Tabelle vorhanden sein, so werden diese durch die Problem-Anzeige zusätzlich signalisiert. Ein Klick auf die Taste "Probleme" filtert die Tabelle auf die Zeilen die eine invalide Zelle haben.
 | |
 | |
 |
Post-Submit Validierung
Zeilen übergreifende Fehler könne nach dem Klick auf "Speichern" über eine Errors-on-top Meldung dargestellt werden
Weitere Details anzeigen
Sollten weitere Kontextinformationen zum Bearbeiten einer Zeile notwendig sein und man kann oder will keine weiteren Spalten einführen, dann lassen sich auf- und zuklappbare Zeilen nutzen.
- Der Indikator dafür befindet sich immer am Zeilenanfang. Mit der Icon-Taste lässt sich die Zeile auf- und zuklappen.
- Der Details-Container kann beliebigen Inhalt beinhalten.
Erklärung anzeigen
Atypische Zustände von Zeilen müssen mit einer Erklärung versehen werden. Diese ist in einem Tooltip am Anfang der Zeile mit dem Info-Icon aufrufbar.
Tabellenfußzeile
Wie bei normalen Tabellen können bei den editierbaren Tabellen Fußzeilen (1) genutzt werden. Fußzeilen können beliebige Inhalte beinhalten. Die Fußzeile ist immer sticky an der Untergrenze der Tabelle.
Barrierefreiheit
Die editierbare Tabelle erfüllt die selben Anforderungen wie die regulären Tabellen. Dabei implementieren beide den ARIA Authoring Practices Guide (APG) .
Develop Flow
Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Feditable-grid