enhancement
major
minor
defect
critical
major
minor
minor
#30199
React-Views: When a constraint is violated, the editable table displays only a red border, not an error message
Problem
In a <table row-edit="ALL"> within a <form>, a cell containing a value that is rejected by a constraint-by-expression of the attribute is only outlined in red. Saving is then disabled.
- The constraint’s error message does not appear anywhere: neither in the cell, nor as a tooltip when hovering over it, nor next to the Save button.
- So the user can only see that something is wrong, but not what exactly.
Version: 8.0.0-alpha12, module tl-layout-react (RowSetTableControl, RowSetEditSession).
Reproduction
- Apply a constraint to an attribute that, for example, rejects any non-empty value: {{{
<constraint-by-expression>value -> object -> if($value != null, "Not allowed here.", null)</constraint-by-expression>
}}}
- Embed a <table row-edit="ALL"> containing an attribute column into a <form>.
- Editing, setting a value in a row: The cell is highlighted in red, the “Save” button is disabled, and no text is displayed.
Expected Behavior (Suggestion)
- The message appears as a tooltip on the invalid cell, similar to form fields.
- Desirable: When the “Save” button is disabled, the errors are listed with row and column numbers.
Impact
During bulk editing—such as a status overview with many rows—the user cannot tell why they cannot save without a message.
Cause
An edited cell contained only the bare input element, without the border of a form field (TLFormField), which displays the message below the field. Only text, number, and password fields displayed the message itself as a tooltip; drop-down lists, date fields, checkboxes, color fields, compact dialog cells, and composition cells displayed only the red border. The disabled Save button, the rejection of a save attempt, and the rejection in the edit dialog for a table row only indicated in general terms (or not at all) that errors were present.
Solution
- Compact display of the field frame: ReactFormFieldChromeControl (TLFormField) has a compact display mode (setCompact(true)) that takes up no space next to or below the input element: The label is available only for screen readers. An error or warning appears as a small icon in the upper-right corner of the field; tapping, clicking, or pressing Enter opens a popup with the message, while hovering over it with the mouse displays it as a tooltip. This way, the message is also accessible on touch devices, and the row height remains the same.
- Every editable table cell is contained within this frame (ColumnSetup.createEditControl): this includes cells in row-editable tables and composition tables in forms, as well as directly editable value columns, regardless of the input element. The frame follows the cell’s field model (new: ReactFormFieldChromeControl.setFieldModel), even for composition and dialog cells. The cell’s label (column name) does not appear in the cell’s tooltip.
- Form messages specify the exact errors and their locations: A FormParticipant reports its visible errors (visibleErrors()) as “Field: Message” or “Row, Column: Message” (row without a label: “Row n”); Errors affecting the row set as a whole are listed under the attribute name. A maximum of 10 errors are listed, followed by “... and N more.” (ValidationErrors). This list appears
- in the tooltip of the disabled Save button ( FormValid rule, also when saving the form automatically),
- when a save attempt is rejected—which is what makes the errors visible in the first place—
- when “OK” is rejected in the edit dialog for a table row,
- in the tooltip for the disabled Save button on a configuration form (ConfigFormValid), in the order the fields are displayed.
- Messages next to a field in a configuration form no longer name the field itself (“A value is required.”), since the list is prefixed to the location.
- Demo: Constraint test in tl-demo-react, “Entries” composition table with a value range (set) and a “Status” selection column with a constraint (“Locked” is rejected).