Dynamically format rows based on their content

It is possible to use the Monitor Setting row_style to define CSS styles for each row based on the data. Using the additional setting row_styleEnabled , you can enable or disable 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 contents are relevant for styling. This is necessary to avoid creating unnecessary CSS class assignments that can impact browser performance. For each listed column, a CSS class following the pattern "MONITORID-COLUMNNAME-COLUMNVALUE" is generated for each row.

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

If multiple CSS rules apply and specifications overlap (e.g., background color), the browser decides on its own which specification to use. However, you can prioritize individual properties. This is done using the standard CSS property !important.

Finally, under views, you should specify in which views the style should be applied (if function_gridMultipleViews enabled). A monitor can be styled using multiple style rules. If no views are specified, the rules are applied to all views in the monitor.