Design lines dynamically based on the content

It is possible to use the monitor setting to define row_style To define CSS styles for the respective line based on the data. With the further setting row_styleEnabled you can de/activate this feature globally - for all defined views.

Example

[
  {
    "columnList": ["STATUS"],
    "rowClasses": ".-STATUS-ERROR {background-color: rgba(255, 211, 211, 0.2);}",
    "views": ["viewA", "viewB"]
  },
  {
    "columnList": ["STATUS"],
    "rowClasses": ".-STATUS-ERROR {background-color: green;}",
    "views": ["viewC", "viewD"]
  }
]

On the one hand, columnList lists the columns whose content is relevant for the design. This is necessary in order to create unnecessary CSS class assignments that burden browser performance. For each listed column, a CSS class with the scheme "MONITORID-SPALTENNAME-SPALTENWERT" is created on each line.

The CSS string in the rowClasses field is created as a stylesheet in the document. No monitor IDs need to be entered, these are inserted automatically or ".-" is replaced by ".MONITORID-". The column value is always specified in UPPERCASE.

If several CSS rules apply and information overlaps (e.g. background colour), the browser itself decides whether to use the same CSS rule. Background color), the browser itself decides which specification it uses. However, individual specifications can be prioritized. This is done with the standard CSS specification !important.

Finally, the views in which the design is to be used should be specified under views (if activated) function_gridMultipleViews is activated). A monitor can be designed with several style rules. If no views are specified, the rules are used for all views in the monitor.