Conditional formatting in HTML reports

July 15, 2011 by Igor Lozhkin
Conditional formatting feature allows displaying parts of report data differently depending on values in certain data columns and other criteria. In Arnica WebReport ( conditional formatting may be done by individual rows and individual cells within a row. Arnica WebReport generates report output using strict tabular HTML formatting (using table-row-cell elements) and does not use any proprietary semantics to express style requirements, except standard inline CSS and HTML elements attribute string, which are well known to web designers. By applying simple   expressions with evaluatable conditions, WebReport provides a convenient way to express dynamic style requirements of virtually unlimited complexity.

In WebReport the top level row and cell style requirements are controlled by the external CSS, which contains dedicated classes for the HTML <row> and <td> elements (implementing rows and cells). 

The CSS-based style may be adjusted per report template (report templates may be shared by multiple reports) using custom cell attribute strings entered in report template properties page at design time: 

The style can further be adjusted by overwriting template-based cell attribute strings within corresponding properties defined at report level of individual reports. 

Although report template and report-based cell attribute strings may contain evaluatable expressions, these expressions are resolved before the report engine builds HTML table representing actual data. Thus above-mentioned properties may not be used to conditionally format individual rows and cells within report output.

To achieve data-sensitive conditional row and cell formatting, Arnica WebReport includes additional dynamic row and cell style properties, which are evaluated in the context of each row and each cell. The result of evaluation of these properties is an HTML element attribute string and/or inline CSS style, which updates top level attribute string and style defined at the report template and report levels; the final attribute string value is then used for each HTML table row or cell. 

Designer may also utilize HTML table cell style inheritance from its parent row element, to achieve composite conditional style effects. For example, in a report with sales per customer, dynamic row style may highlight the entire record and make font bold in all its cells if Freight value exceeds 100, while dynamic cell style may use red font color if order exceeds a certain value. Corresponding conditional row style expression looks like this:

In addition to conditional expressions, Arnica WebReport gives designers conditional scripts to express more complex style conditions which would be less practical to implement using single like expressions. Conditional scripts may use high performance Arnica scripting engine to enter a code which may consists of multiple lines, calculating an effective style string, eventually returned by the script. For example:
if sourcedata.orderamount < 2000 and sourcedata.orderamount >= 1000
  return 'style="color:green"'

if sourcedata.orderamount < 3000 and sourcedata.orderamount >= 2000
  return 'style="color:red"'

if sourcedata.orderamount < 4000 and sourcedata.orderamount >= 3000
  return 'style="color:red;font-weight:bold;"'

if sourcedata.orderamount >= 4000
  return 'style="color:red;font-weight:bold;background-color:yellow;"'

return 'style="color:#333333;"'

The resulting report may look like the one in the screenshot below. It is also available on the Arnica Software live demo site at he following URL: