Formatting a Report With an External Cascading Style Sheet

How to:

Reference:

There are just three items required to format a report with an external cascading style sheet (CSS):

To find out how to use these three items to format a report, see How to Format a Report Using an External Cascading Style Sheet.

For an example that demonstrates how these items work together, see Linking to the ReportStyles External Cascading Style Sheet and the following diagram:

Procedure: How to Format a Report Using an External Cascading Style Sheet

To format a report using an external cascading style sheet (CSS):

  1. Specify the report formatting in the CSS. Determine which cascading style sheet you will use, which of its rules specify default formatting for your report, and which of its classes are suitable for you to apply to the report components. Alternatively, if you are creating a new CSS, or extending an existing one, define new rules to specify formatting for your report. To specify formatting for:
    • A report component, you can use a rule for any generic class (that is, any class not declared for an element). For an example, see A CSS Rule for the ColumnTitle Class.

      Graphs differ from other types of reports: to specify formatting for the page in which the graph appears, or for the graph heading or footing, you can use a rule for the BODY element, but not a rule for a class. You cannot format other graph components.

    • The entire report, use a rule for the BODY or TD elements (not a rule for a class of these elements), and skip Step 2. This is an effective way of specifying the default formatting of a report, and generates more efficient report output than does applying a CSS class to the entire report. For an example, see A CSS Rule for the TD Element.

      Graphs differ from other types of reports: you can use a rule for the BODY element, but not one for TD. A rule for BODY will format the page in which the graph appears, and its heading and footing, but not the graph itself.

    For more information, see Working With an External Cascading Style Sheet.

  2. Assign classes to report components. In a WebFOCUS StyleSheet, assign a cascading style sheet class to each report component that you want to format. Specify the class using the CLASS attribute. You can assign each component a different class, and you can assign the same class to multiple components.

    For an example, see Applying a CSS Class to ACROSS Values in a Report. For more information, see Applying External Cascading Style Sheet Formatting.

  3. Link to the CSS. Link to the external cascading style sheet by assigning the CSS file URL to either the CSSURL WebFOCUS StyleSheet attribute or to the CSSURL SET parameter. For instructions, see Using the CSSURL Attribute and Parameter.

    There is one exception: if you embed the report output in an existing HTML page using the -HTMLFORM command, include a LINK element in that HTML page instead of setting CSSURL.

    For an example, see Linking to the ReportStyles External Cascading Style Sheet. For more information, see Linking to an External Cascading Style Sheet.

Problems? If you encounter problems, see Troubleshooting External Cascading Style Sheets.

Reference: A CSS Rule for the ColumnTitle Class

This cascading style sheet (CSS) rule declares the ColumnTitle generic class (that is, a class not tied to an element): 

.ColumnTitle {font-family:helvetica; font-weight:bold; color:blue;}

Reference: A CSS Rule for the TD Element

This cascading style sheet (CSS) rule for the TD element specifies the element's font family: 

TD {font-family:helvetica}

Because this rule is for the TD element, its formatting is applied to an entire report, not just a component of the report.

For a more comprehensive example of using a rule for the TD element to provide general report formatting, see Linking to the ReportStyles External Cascading Style Sheet.

Reference: Applying a CSS Class to ACROSS Values in a Report

This WebFOCUS StyleSheet declaration formats ACROSS values by applying the formatting specified for the ColumnTitle class: 

TYPE=AcrossValue, CLASS=ColumnTitle, $

Reference: Linking to the ReportStyles External Cascading Style Sheet

This WebFOCUS StyleSheet declaration links to the ReportStyles external cascading style sheet: 

TYPE=REPORT, CSSURL=http://webserv1/css/reportstyles.css

or

TYPE=REPORT, CSSURL=IBFS:/WFC/Repository/css/reportstyles.css

You could accomplish the same thing using a SET command: 

SET CSSURL=http://webserv1/css/reportstyles.css

Or within a request: 

ON TABLE SET CSSURL=http://webserv1/css/reportstyles.css

Alternatively, if you want to embed your report output in an existing HTML page using -HTMLFORM, you would specify the link by coding the LINK element in the HTML page in which the report will be embedded, instead of setting CSSURL: 

<HEAD>
<TITLE>Accounts Receivable Report</TITLE>
<LINK REL="STYLESHEET" HREF="http://srv3/css/reports.css" 
TYPE="text/css">
</HEAD>

Example: Formatting a Report Using an External CSS

This report displays the products currently offered by Gotham Grinds, and is formatted using an external cascading style sheet (CSS). The report is formatted so that:

  • Its default font family is Arial.
  • The report heading overrides the default with a font family of Times New Roman. The heading is also in a larger font and center justified.
  • All column titles are in a bolder font and have a light-blue background.
  • When a product unit price is less than $27, the report displays the product row in green italics.

The report request and inline WebFOCUS StyleSheet are shown in the following procedure, curprods.fex. The external cascading style sheet, named report01.css, follows the procedure.

curprods.fex

    TABLE FILE GGPRODS
    HEADING
    "</1 Current Products</1"
    PRINT PRODUCT_DESCRIPTION UNIT_PRICE
    BY PRODUCT_ID
    ON TABLE SET PAGE-NUM OFF 
    
1.  ON TABLE SET STYLE * 
2.  TYPE=REPORT, CSSURL=http://websrv2/css/report01.css, $ 
3.  TYPE=HEADING, CLASS=headText, $ 
4.  TYPE=TITLE, CLASS=reportTitles, $ 
5.  TYPE=DATA, CLASS=lowCost, WHEN=N3 LT 27, $ 
6.  ENDSTYLE
    END

Note: To specify a path that points to a WebFOCUS repository that contains the report01.css file, use the following syntax for the CSSURL parameter on the TYPE=REPORT line in the request: 

TYPE=REPORT, CSSURL=IBFS:/WFC/Repository/css/report01.css, $

Where css is the folder in the WebFOCUS repository where the report01.css file resides.

report01.css

7.  BODY  {font-family:Arial, sans-serif} 
8.  TABLE {border:0} 
8.  TD    {border:0} 
9.  .reportTitles {font-weight:bolder; background:lightblue;} 
10. .lowCost {color:green; font-style:italic;} 
11. .headText {font-family:Times New Roman, serif; font-size:larger;
               text-align:center}
  1. Begin the inline WebFOCUS StyleSheet.
  2. Link to the external cascading style sheet, report01.css.
  3. Format the report heading using the cascading style sheet rule for the headText class.
  4. Format the report column titles using the CSS rule for the reportTitles class.
  5. For each report row for which the product unit cost is less than $27, format that row using the CSS rule for the lowCost class.
  6. End the inline WebFOCUS StyleSheet.
  7. This CSS rule for the BODY element specifies the font family Arial and, if Arial is unavailable, the generic font family sans serif.

    Because this is a rule for BODY, it is applied to the entire report: all text in the report will default to Arial. You can override this for a particular report component by applying a rule for a generic class to that component, as is done in this procedure with the rule for the headText class (see line 11).

  8. These CSS rules for the TABLE and TD elements remove the report default grid.
  9. This CSS rule for the generic class reportTitles specifies a bolder relative font weight and a light blue background color.

    The WebFOCUS StyleSheet applies this to the report column titles (see line 4).

  10. This CSS rule for the generic class lowCost specifies the text color green and the font style italic.

    The WebFOCUS StyleSheet applies this rule conditionally to report rows for which the product unit cost is less than $27 (see line 5).

  11. The CSS rule for the generic class headText specifies the font family Times New Roman and, if Times New Roman is unavailable, the generic font family serif. It also specifies a larger relative font size and center justification.

    The WebFOCUS StyleSheet applies this rule to the report heading. It overrides the default font family specified in the rule for the BODY element (see line 7).

The procedure displays this report: