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:
x
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
- 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.
- 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.
- 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.
- Branch to the
WebFOCUS StyleSheet declarations for the current type of report output
(which is indicated by &FORMAT).
- 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.
- If there is
any formatting that is applicable only to HTML output, specify it
here, using external Cascading Style Sheet classes.
- Branch to the
WebFOCUS StyleSheet declarations that apply the macros to the report
components.
- This label
marks the beginning of the macro definitions and unique formatting declarations
for non-HTML report output.
- 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.
- If there is
any formatting that is applicable only to non-HTML output, specify
it here using native WebFOCUS StyleSheet attributes.
- This label
marks the beginning of the declarations that apply macros to the report.
- 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}
- 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.
- Set CSSURL
to link to the external Cascading Style Sheet reports.css to format
the HTML output of the report.
- Set the display
type of the report to the value of &FORMAT.
- Branch to the
WebFOCUS StyleSheet declarations for the current type of report output
(HTML).
- Define the
HTML version of the WebFOCUS StyleSheet macros, which are implemented
using external Cascading Style Sheet classes.
- Branch to the
WebFOCUS StyleSheet declarations that apply the macros to the components
for the report.
- This label
marks the beginning of the macro definitions for PDF report output.
- 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.
- This label
marks the beginning of the declarations that apply macros to the report.
- These are the
macros that were defined earlier and are being applied to the report.
- This Cascading
Style Sheet declaration makes text bolder than it had been.
- This Cascading
Style Sheet declaration makes a background light blue.
- These CSS rules
for the TABLE and TD elements remove the default grid for the report.
The procedure displays this report: