enhancement
major
minor
defect
critical
major
minor
minor
#30199
React-Views: Zeilenbearbeitende Tabelle zeigt bei verletztem Constraint nur einen roten Rahmen, keinen Meldungstext
Problem
In einer <table row-edit="ALL"> innerhalb eines <form> wird eine Zelle mit einem Wert, den ein constraint-by-expression des Attributs ablehnt, nur rot umrandet. Speichern ist dann gesperrt.
- Der Meldungstext des Constraints erscheint nirgends: weder in der Zelle noch als Tooltip beim Überfahren noch beim Speichern-Knopf.
- Der Anwender sieht also nur, dass etwas nicht stimmt, nicht was.
Version: 8.0.0-alpha12, Modul tl-layout-react (RowSetTableControl, RowSetEditSession).
Reproduktion
- Ein Attribut mit einem Constraint versehen, der z. B. jeden nicht leeren Wert ablehnt: {{{
<constraint-by-expression>value -> object -> if($value != null, "Hier nicht erlaubt.", null)</constraint-by-expression>
}}}
- Eine <table row-edit="ALL"> mit einer Attributspalte darauf in ein <form> einbinden.
- Bearbeiten, in einer Zeile einen Wert setzen: Die Zelle bekommt einen roten Rahmen, „Speichern“ ist deaktiviert, ein Text wird nicht angezeigt.
Erwartetes Verhalten (Vorschlag)
- Die Meldung erscheint als Tooltip an der fehlerhaften Zelle, wie bei Formularfeldern.
- Wünschenswert: Beim deaktivierten Speichern-Knopf werden die Fehler mit Zeile und Spalte aufgelistet.
Auswirkung
Bei der Massenpflege, etwa einer Statusübersicht mit vielen Zeilen, kann der Anwender ohne Meldung nicht erkennen, warum er nicht speichern kann.
Ursache
Eine bearbeitete Zelle enthielt nur das nackte Eingabeelement, ohne den Rahmen eines Formularfelds (TLFormField), der die Meldung unter dem Feld anzeigt. Nur Text-, Zahl- und Passwortfelder zeigten die Meldung selbst als Tooltip; Auswahllisten, Datums-, Checkbox-, Farbfelder, kompakte Dialog-Zellen und Kompositionszellen zeigten nur den roten Rahmen. Der gesperrte Speichern-Knopf, die Ablehnung eines Speicherversuchs und die Ablehnung im Bearbeitungsdialog einer Tabellenzeile nannten nur pauschal (oder gar nicht), dass Fehler vorliegen.
Lösung
- Kompakte Darstellung des Feldrahmens: ReactFormFieldChromeControl (TLFormField) hat eine kompakte Darstellung (setCompact(true)), die keinen Platz neben oder unter dem Eingabeelement beansprucht: Die Beschriftung ist nur für Screenreader vorhanden. Ein Fehler oder eine Warnung erscheint als kleines Symbol an der oberen rechten Ecke des Felds; Antippen, Klicken oder Enter öffnet ein Popup mit der Meldung, Überfahren mit der Maus zeigt sie als Tooltip. So ist die Meldung auch auf Touch-Geräten erreichbar, und die Zeilenhöhe bleibt gleich.
- Jede bearbeitete Tabellenzelle steht in diesem Rahmen (ColumnSetup.createEditControl): die Zellen zeilenbearbeitender Tabellen und Kompositionstabellen in Formularen ebenso wie direkt bearbeitete Wertspalten, unabhängig vom Eingabeelement. Der Rahmen folgt dem Feldmodell der Zelle (neu: ReactFormFieldChromeControl.setFieldModel), auch bei Kompositions- und Dialog-Zellen. Die Beschriftung der Zelle (Spaltenname) taucht nicht im Tooltip der Zelle auf.
- Formularmeldungen nennen die konkreten Fehler mit Ort: Ein FormParticipant meldet seine sichtbaren Fehler (visibleErrors()) als „Feld: Meldung“ bzw. „Zeile, Spalte: Meldung“ (Zeile ohne Beschriftung: „Zeile n“); Fehler der Zeilenmenge als Ganzes stehen unter dem Attributnamen. Gelistet werden höchstens 10 Fehler, dann „... und N weitere.“ (ValidationErrors). Diese Liste erscheint
- im Tooltip des gesperrten Speichern-Knopfs (Regel FormValid, auch beim eingebauten Speichern des Formulars),
- in der Ablehnung eines Speicherversuchs, der die Fehler erst sichtbar macht,
- in der Ablehnung von „OK“ im Bearbeitungsdialog einer Tabellenzeile,
- im Tooltip des gesperrten Speicherns eines Konfigurationsformulars (ConfigFormValid), in Anzeigereihenfolge der Felder.
- Meldungen am Feld eines Konfigurationsformulars nennen das Feld nicht mehr selbst („Ein Wert ist erforderlich.“), da die Liste den Ort voranstellt.
- Demo: Constraint-Test in tl-demo-react, Kompositionstabelle „Einträge“ mit Wertebereich (Menge) und einer Auswahlspalte „Status“ mit Constraint („Gesperrt“ wird abgelehnt).