Hintergrund

Tabellen markieren einzelne Zeilen oder Zellen nach ihren Daten, z. B. eine überfällige Frist, eine Abweichung oder ein gesperrtes Objekt. Dafür gibt es row-class und cell-class an der Tabelle bzw. Spalte und css-class an ResourceDisplayByExpression. Die Doku nennt vier Standardklassen, die das Theme mitbringt: tl-status-error, tl-status-warning, tl-status-success und tl-status-info. Laut Doku tönen sie eine Zeile oder eine Zelle mit dem Status-Token ein. Auch die Beispiele der Doku verwenden tl-status-warning.

Problem

Die Klassen kommen im DOM an, aber keines der geladenen Stylesheets hat eine Regel für sie.

• Die Zelle bzw. Anzeige bleibt unverändert: kein Hintergrund, keine Textfarbe, kein gefärbtes Icon.
• Der Fehler ist still. Die Konfiguration sieht richtig aus und folgt der Doku, die Markierung fehlt trotzdem.
• Die Status-Tokens selbst sind vorhanden, z. B. --tl-status-warning-text und --tl-status-warning-subtle in style/tl-design-system/tokens.css. Nur die Klassen, die sie verwenden sollten, fehlen.

Version: 8.0.0-alpha12, React-View-Layer (tl-layout-view/tl-layout-react), Design-System style/tl-design-system/.

Reproduktion

1. An einer beliebigen Tabelle eine Spalte mit cell-class="'tl-status-warning'" konfigurieren.
2. Alternativ eine computed-column mit <display class="com.top_logic.layout.view.element.ResourceDisplayByExpression" css-class="'tl-status-warning'" icon="'css:bi bi-exclamation-triangle-fill'"/>.
3. Im Browser hat die Zelle bzw. das span.tl-field-value die Klasse tl-status-warning.
4. getComputedStyle zeigt dieselbe Text- und Hintergrundfarbe wie bei einer Zelle ohne Klasse.
5. Die Suche über document.styleSheets findet keine Regel mit dem Selektor .tl-status-warning; nur die Token-Definitionen --tl-status-warning-* sind da.

Beispiel aus einer Anwendung (Prime):

• Drei Stellen nutzen die Klasse wie dokumentiert: Sperrspalte der Dokumente, Klassenabweichung der Projekte, Warnsymbol „Ausschnitt nicht mehr im Teilbaum“ der übernommenen Blätter.
• Alle drei Markierungen waren unsichtbar.
• Prime bringt deshalb eine eigene Klasse mit eigener Regel mit.

Analyse

• Zeilen und Zellen der React-Tabelle wurden getönt: der Client suchte im Klassennamen per regulärem Ausdruck nach den vier Namen und setzte daraus das Attribut data-tl-role, das das Design-System zeichnet. Eine Regel für .tl-status-* gibt es darum absichtlich nicht.
• Die Anzeige (ResourceDisplayByExpression) kannte diese Übersetzung nicht: dort blieb die Klasse wirkungslos.
• Grundproblem: eine CSS-Klasse diente als verdeckter Transport für eine Farbrolle. Ein Tippfehler (tl-status-warn) scheitert genauso still, und jedes Control müsste den Klassennamen selbst durchsuchen.

Lösung

Die Bedeutung einer Markierung wird ein eigenes Skript, die Klasse bleibt ein freier Haken für das Stylesheet der Anwendung.

• Neue TL-Script-Eigenschaften, die eine Farbrolle liefern:
  • row-role an <table>, <tree-table> und <composition-table>,
  • cell-role an einer Spalte (auch an <dynamic-columns> und in <embedded-columns>),
  • role an ResourceDisplayByExpression.
• Das Ergebnis ist eine Rolle aus ValueColor, dem Vokabular der Wertfarben des Modells: error, warning, success, info, brand, category-1 bis category-8 sowie neutral (Rolle ohne Tönung) – als Name ('warning') oder als Wert. Kein Ergebnis bedeutet keine Rolle. Ein anderer Text ist ein Fehler, der den Wert und die gültigen Namen nennt: ein Tippfehler fällt sofort auf.
• Eine Zeile oder Zelle mit Rolle bekommt Fläche und Linie der Rolle (z. B. --tl-status-warning-subtle); eine ausgewählte Zeile zeigt weiterhin die Auswahl, eine Zelle mit eigener Rolle zeigt ihre Rolle. Eine Anzeige mit Rolle ist eine Pill dieser Rolle mit Icon und Beschriftung, wie ein Wert, dem das Modell eine Farbe gibt; ohne Rolle behält sie die Farbe aus dem Modell. Beides im hellen und dunklen Theme.
• Der Server schickt die Rolle als eigenes Feld (TableView#rowColor, #cellColor, Column#color; ein ResourceProvider, der auch ValueColorProvider ist, bestimmt die Rolle seiner Anzeige). Der Client liest keine Klassennamen mehr aus.
• row-class, cell-class und css-class bleiben unverändert, haben aber keine Namen mehr mit Sonderbedeutung: ihre Klassen gestaltet das Stylesheet der Anwendung.
• Die Klassen tl-status-error, -warning, -success und -info entfallen; alle Verwendungen im Framework (Administrationsansichten Rechte, effektive Rechte, Geheimnisse, Steuerprogramm; Demo) sind umgestellt. Die Baumtabellen-Demo der React-Demo zeigt eine Zeilen-, Zell- und Anzeigerolle.

Migration

Ein Skript in row-class, cell-class oder css-class (an ResourceDisplayByExpression), das eine der Klassen tl-status-error, tl-status-warning, tl-status-success oder tl-status-info liefert, wird auf die entsprechende Rollen-Eigenschaft umgestellt und liefert den Rollennamen ohne Präfix:

<table row-class="$row.get(`my:Part#amount`) > 100 ? 'tl-status-warning' : null"/>

wird zu

<table row-role="$row.get(`my:Part#amount`) > 100 ? 'warning' : null"/>

Entsprechend cell-class → cell-role an der Spalte und css-class → role an ResourceDisplayByExpression. Ein Skript, das neben der Statusklasse weitere eigene Klassen liefert, behält diese in der Klassen-Eigenschaft. Eine Anzeige mit Rolle erscheint als Pill, nicht als eingefärbter Text.

Die TL-Script-Funktionen securityGrantsRowClass und securityGrantsCellClass heißen securityGrantsRowRole und securityGrantsCellRole und liefern einen Rollennamen; sie gehören in row-role bzw. cell-role.

Java: RowClassFunction heißt RowFunction (RowFunction.rowClass(...), RowFunction.rowRole(...)); der Record ColumnSetup hat die zusätzliche Komponente cellRole nach cellClass.