Styling Reports

A report consists of several components, each of which can you can format or style. WebFOCUS App Studio is installed with a set of StyleSheet files, each of which has a distinctive theme. You can select one of these themes for your output and you can customize selected report components individually. You can create your own styles or use the themes included with WebFOCUS App Studio.

Using a styling theme is an excellent way to easily style many different aspects of a report, for example, headings, footings, column titles, backgrounds, fonts, grids, borders, images, and so on. Many companies apply standard style themes to their reports so all of their reports look consistent and professional.

A style theme, once it is applied to a report, is used every time the report is run. If you want to display some of the data differently, you can customize individual styles either for all data or for data that satisfies specific criteria (called conditional styling).

Styling Characteristics

The physical characteristics of a style for a report component consist of the following basic attributes:

• Text font. You can use different fonts and font sizes, and selectively apply text styles, such as bold or italic.
• Color. You can select a color for the text or background.
• Conditional styling. You can apply different styles to the same component based on report values.
• Column widths. You can have column widths based on the column content, the field format specified in the Master File, or specify a width.
• Column placement. You can specify the starting position of individual columns and arrange columns in any order regardless of the sequence established in the report request. In addition, you can indicate how much space to leave before and after individual columns.
• Page size. You can select from a wide range of page sizes for PostScript and PDF reports.
• Page orientation. You can select either portrait or landscape for PostScript, PDF, and EXL2K reports.
• Page margins. You can specify the top, bottom, left, and right margins, measured in inches, centimeters, or points for PostScript and PDF reports.
• Justification. You can justify individual report components.
• Grids, borders, and images. You can emphasize headings, footings, and column titles in a report by adding borders and grid lines around them. You can add and position images in a report. An imaged, such as a logo gives corporate identity to a report, or provides visual appeal.

Introducing StyleSheets

A StyleSheet describes how you want your report to look. You can create a StyleSheet within a report request (useful when you are applying a set of styles to only one report) or as a separate file (useful when you want to create a StyleSheet theme that you can apply to any report). In addition, you can create a StyleSheet on one platform and then port it to, and run it on, other platforms.

You use the Style group, on the Report tab, to apply stylistic changes to a report, including data, title, and all other components of the report. The commands are:

• Change Theme. Changes the theme of the report from a list of available StyleSheets.
• Manage Theme. References or embeds an external StyleSheet or applies no styling to your report. When you click this button, the StyleSheet Selection dialog box opens. If you do not select a StyleSheet, a default StyleSheet is applied.
• Save Theme. Saves your current style options as a stylesheet file (.sty) for future use.

A StyleSheet consists of a set of declarations, which:

• Identify a report component or subcomponent.
• Describe the formatting to apply to that component.
• Optionally, if the component is a heading, footing, or column, specify a position and justification for the component.
• Optionally, specify the distance between columns, column sequence, and column width.
• Optionally, specify a condition that must be true in order to apply the style. This technique is called conditional styling.

In your StyleSheet, you only need to include declarations for those components whose format you want to change. Within each declaration, you only need to include those attributes you want to change.

Each declaration in a StyleSheet consists of attribute=value pairs separated by commas, and terminated with a comma and dollar sign (,$). The syntax is:

TYPE=component, attribute=value, ... ,$

For example:

TYPE=Report, FONT=Times, SIZE=10, $
TYPE=Data, COLUMN=REVENUE_US, BACKCOLOR=Aqua, COLOR=Navy, STYLE=Bold, 
 WHEN=REVENUE_US GT 500, $
TYPE=Title, FONT='Helvetica', $
TYPE=Heading, FONT='Helvetica', STYLE=Bold, SIZE=14, JUSTIFY=Center,
 BACKCOLOR=Dark Turquoise, COLOR=White, $
TYPE=Heading, LINE=6, BACKCOLOR=White, COLOR=Dark  Turquoise,$

Select a Styling Theme

Procedure
1. On the Home tab, in the Content group, click Report.

   The Report Wizard opens.

2. Click Create Report.

   The Select Data Source window opens.

3. Select the wf_retail.mas data source and click Finish.

   The Report canvas opens.

4. Select the Full Name, Product Name, and Revenue fields and click Run on the Quick Access toolbar to view the report with no conditional styling.

   

5. On the Report tab, in the Style group, click Change Theme.
6. In the Open File dialog box, click the Legacy Style Templates folder, as shown in the following image.

   

7. From the list of style files in the right pane, locate and select a template file, for example, ENBlue_Light1.sty. The report styling in the canvas automatically changes, as shown in the following image.

   

Apply a Style Theme Using WebFOCUS Syntax

TABLE FILE WF_RETAIL
SUM REVENUE_US
BY FULLNAME
BY PRODUCT_NAME
ON TABLE SET HTMLCSS ON 
ON TABLE SET STYLE * 
INCLUDE = enblue_light1, 
$
ENDSTYLE
END

Create a StyleSheet in a Report Request

ON TABLE SET STYLE *
.
.
.
ENDSTYLE

TABLE FILE WF_RETAIL
SUM REVENUE_US BY FULLNAME BY PRODUCT_NAME 
ON TABLE SET STYLE *
TYPE=REPORT, FONT=ARIAL, SIZE=10, $
TYPE=REPORT, COLUMN=REVENUE_US, COLOR=RED, $
TYPE=REPORT, COLUMN=FULLNAME, COLOR=BLUE, $
TYPE=REPORT, COLUMN=PRODUCT_NAME, COLOR=GREEN, $
ENDSTYLE 
END 

Conditionally Styling Components in a StyleSheet

You can conditionally format report components or display a graphic in your report based on the values in your report. Using conditional styling, you can:

• Draw attention to particular items in the report.
• Emphasize differences between significant values.
• Customize the resources to which an end user navigates from different parts of the report.

Apply Conditional Styling with the Traffic Lights Feature

Procedure
1. On the Home tab, in the Content group, click Report.

   The Report Wizard opens.

2. Click Create Report.

   The Report Wizard - Select Procedure Location window opens.

3. Select a location for your report and click Next.

   The Select Data Source window opens.

4. Select the wf_retail.mas data source and click Finish.

   The Report canvas opens.

5. Select the Customer Full Name, Product Name, and Revenue fields, and then click Run on the Quick Access toolbar to view the report with no conditional styling.
6. Return to the Report canvas to create a condition for the Revenue field, for which you will later specify styling. Click the Revenue field to highlight it.
7. On the Appearance tab, in the Traffic Lights group, click the drop-down list box and select Add/Edit Conditions.
   Note: The Traffic Lights group in the Appearance tab is used to highlight column data only. To highlight an entire row, use the Traffic Lights group in the Reports tab instead.

   The Condition List dialog box opens.

8. Click New.

   The Edit Condition dialog box opens. In the Condition field, a default name COND0001 is specified for your new condition, which you can change as required.

9. Complete the Edit Condition dialog box as shown in the following image.
   • Select Revenue for the field.
   • Select is less than for the Relation.
   • Select Value for the Compare Type.
   • Type 500 for the Value.

   

10. Click OK to save your new condition and close the Edit Condition dialog box.

    You are returned to the Condition List dialog box. Notice that the new condition COND0001 is now listed.

11. Click OK.
12. Select COND0001 from the Traffic Lights drop-down list box to specify styling for the new condition.
13. On the Appearance tab, in the Style group, set the background color to red.

    Note that the red background displays as a preview in the Report canvas when COND0001 is selected.

14. Click Run on the Quick Access toolbar to view the report with conditional styling.
    Note that only the Revenue amounts below 500 appear with the red background, as shown in the following image.

    

    The example above shows conditional styling applied to the column data only, because the Traffic Lights group in the Appearance tab was used. To highlight the entire row, use the Traffic Lights group in the Reports tab instead.

Set Conditional Styling Using the WebFOCUS Syntax

TABLE FILE WF_RETAIL
SUM REVENUE_US
BY FULLNAME
BY PRODUCT_NAME
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
   INCLUDE = endeflt,$ 
TYPE=DATA, COLUMN=REVENUE_US, WHEN=REVENUE_US LT 500, BACKCOLOR='RED' ,$ 
ENDSTYLE
END

Styling Report Components