Using External Cascading Style Sheets With Non-HTML Reports

How to:

You can use an external cascading style sheet (CSS) to format a report that is generated as HTML, but not one that is generated as a different output type, such as PDF. If you have a report that you will sometimes generate as HTML and sometimes generate as a different output type, and you wish to gain the benefits of cascading style sheets, we recommend that you use this technique:

You can see the basic code for this technique in Use an External CSS With Multiple Output Types.

Syntax: How to Use an External CSS With Multiple Output Types

If you have a report that you will sometimes generate as HTML and sometimes as other types of output, and you wish to gain the benefits of cascading style sheets (CSS), we recommend that you use this technique: 

1.  -DEFAULTS &FORMAT='output_type'; 
2.  SET ONLINE-FMT = &FORMAT 
    TABLE FILE datasource 
     report_logic
    ON TABLE SET STYLE * 
3.  TYPE=REPORT, CSSURL = CascadingStyleSheetURL, $ 
4.  -IF &FORMAT NE 'HTML' GOTO NONHTML; 
5.  DEFMACRO=macro1, CLASS=class1, $
    DEFMACRO=macro2, CLASS=class2, $
     .
     .
     . 
6.  TYPE=component3, CLASS=class3, $
     .
     .
     . 
7.  -GOTO SHARED 
8.  -NONHTML 
9.  DEFMACRO=macro1, attribute1=value1, $
    DEFMACRO=macro2, attribute2=value2, $
     .
     .
     . 
10. TYPE=component4, attribute4=value4, $
     .
     .
     . 
11. -SHARED 
12. TYPE=component1, MACRO=macro1, $
    TYPE=component2, MACRO=macro2, $
     .
     .
     .
    ENDSTYLE
    END
  1. Assign the type of report output (for example, HTML, PDF, PS, or EXL2K) to the Dialogue Manager variable &FORMAT. You will use this variable to toggle the WebFOCUS StyleSheet between formatting for HTML output and formatting for non-HTML output, and also to provide a value for SET ONLINE-FMT.

    You can use forms and other presentation logic to enable the application user to select the type of report output.

  2. Set the report output type to the value of &FORMAT. In this procedure, SET ONLINE-FMT sets the display type for the report. Alternatively, you could use ON TABLE HOLD to save the report as a file and set its file type.
  3. Set CSSURL to link to the external cascading style sheet to be used for formatting the report HTML output. When the report generates non-HTML output, this command will be ignored.
  4. Branch to the WebFOCUS StyleSheet declarations for the current type of report output (which is indicated by &FORMAT).
  5. Define the HTML version of the WebFOCUS StyleSheet macros. These macros specify formatting that is shared by all output types.

    This HTML version of the macros is implemented using external cascading style sheet classes.

  6. If there is any formatting that is applicable only to HTML output, specify it here, using external cascading style sheet classes.
  7. Branch to the WebFOCUS StyleSheet declarations that apply the macros to the report components.
  8. This label marks the beginning of the macro definitions and unique formatting declarations for non-HTML report output.
  9. Define the non-HTML version of the WebFOCUS StyleSheet macros. These macros specify formatting that is shared by all output types.

    This non-HTML version of the macros is implemented using native WebFOCUS StyleSheet attributes.

  10. If there is any formatting that is applicable only to non-HTML output, specify it here using native WebFOCUS StyleSheet attributes.
  11. This label marks the beginning of the declarations that apply macros to the report.
  12. These are the macros that were defined earlier and are being applied to the report.

Example: Using an External CSS With PDF and HTML Output

This report procedure (videorpt.fex) can generate both HTML and PDF output. When it generates HTML output, it uses an external cascading style sheet (reports.css) to format the report. When it generates PDF output, it uses an inline WebFOCUS StyleSheet. In both cases, the report provides a light blue background for the LASTNAME column and makes all column titles bold.

The procedure as shown is set to generate HTML output.

videorpt.fex

1.  -DEFAULTS &FORMAT='HTML'; 
2.  SET CSSURL = http://websrv2/css/reports.css 
3.  SET ONLINE-FMT = &FORMAT
    TABLE FILE VIDEOTRK
    PRINT LASTNAME AS 'Last Name' FIRSTNAME AS 'First Name'
    BY LOWEST 5 CUSTID AS 'Cust ID'
    ON TABLE SET PAGE-NUM OFF
    ON TABLE SET STYLE * 
4.  -IF &FORMAT NE 'HTML' GOTO NONHTML; 
5.  DEFMACRO=boldTitles, CLASS=bold, $
    DEFMACRO=blueColumn, CLASS=blueBack, $ 
6.  -GOTO SHARED 
7.  -NONHTML 
8.  DEFMACRO=boldTitles, STYLE=bold, $
    DEFMACRO=blueColumn, BACKCOLOR=light blue, $ 
9.  -SHARED 
10. TYPE=DATA, COLUMN=LastName, MACRO=blueColumn, $
    TYPE=TITLE, MACRO=boldTitles, $
    ENDSTYLE
    END

reports.css

11. .bold {font-weight: bolder} 
12. .blueBack {background: lightblue} 
13. TABLE {border:0} 
13. TD    {border:0}
  1. Assign a default value to &FORMAT to toggle the WebFOCUS StyleSheet between formatting for HTML output and formatting for PDF output. It is currently set to HTML output.
  2. Set CSSURL to link to the external cascading style sheet reports.css to format the HTML output of the report.
  3. Set the display type of the report to the value of &FORMAT.
  4. Branch to the WebFOCUS StyleSheet declarations for the current type of report output (HTML).
  5. Define the HTML version of the WebFOCUS StyleSheet macros, which are implemented using external cascading style sheet classes.
  6. Branch to the WebFOCUS StyleSheet declarations that apply the macros to the components for the report.
  7. This label marks the beginning of the macro definitions for PDF report output.
  8. These declarations define the PDF version of the WebFOCUS StyleSheet macros, which are implemented using native WebFOCUS StyleSheet attributes. These macro definitions will be ignored because &FORMAT is set to HTML.
  9. This label marks the beginning of the declarations that apply macros to the report.
  10. These are the macros that were defined earlier and are being applied to the report.
  11. This cascading style sheet declaration makes text bolder than it had been.
  12. This cascading style sheet declaration makes a background light blue.
  13. These CSS rules for the TABLE and TD elements remove the default grid for the report.

The procedure displays this report: