Previous Page

|

Next Page

Customizing SAS Web Report Studio Report Styles

Customizing Report Styles for SAS Web Report Studio

Overview of Providing Custom Report Styles

Report viewers can select one of the following styles (which ship with SAS Web Report Studio) for a report: Plateau, Meadow, Seaside, or Festival. The default report style is Plateau. You can add your own custom styles to the list of available styles.

Note:   The ability to apply custom styles is available for applications that run in all locales worldwide.  

SAS Web Report Studio relies on CSS files to render styles for reports. To supply a custom style, follow these steps:

1. Create a CSS file and define the formats that you want for the style. For information about the supported formats as well as a sample CSS file, see CSS Formats for Custom Report Styles.

2. In the Web Report Studio 4.3 Properties dialog box within SAS Management Console Configuration Manager, provide information that SAS Web Report Studio needs in order to locate and render the style. For instructions, see Specify Property Names and Values for Styles.

Specify Property Names and Values for Styles

The following table shows the property names that you specify, and explains the property values that you enter in the Advanced tab of the Web Report Studio 4.3 Properties dialog box.

Property Names of Report Styles Specified in the Web Report Studio 4.3 Properties Dialog Box

Property Name	Description
<css>	Provides the fully qualified path to one or more external CSS files from which style schemes will be read. If you specify multiple files, separate them with a comma. If you remove a filename from this element, then any report that has been created with the corresponding style might not render correctly. The rendering behavior is undefined if the CSS file has been removed.
<schemelist>	Specifies the list of styles that are available to SAS Web Report Studio users. You must add your custom style name to the list in order for that style to be available for use. The name must match exactly the name of a CSS file in the <css> list (but without the file path or CSS filename extension). Any mismatches cause the name not to be available in SAS Web Report Studio. If you specify multiple styles, separate the style names with a comma. Default styles are Plateau, Meadow, Seaside, and Festival. If you remove any of these names from the list, then the corresponding styles will no longer be available to users. However, existing reports that reference the styles will continue to render properly because these styles are built in and inherently known by SAS Web Report Studio.
<defaultscheme>	Defines the default styles that will be applied to new reports. If no style is specified, then the default style is Plateau.

To specify the styles that you want to use, follow these steps:

1. In SAS Management Console on the Plug-ins tab, navigate to Application Management  Configuration Manager  Web Report Studio 4.3.

2. Right-click and select Properties to display the Web Report Studio 4.3 Properties dialog box.

3. Click on the Advanced tab.

4. Click Add to display the Define New Property dialog box.

5. Enter the property names as shown and insert your own property values for sas.wrs.style.css, sas.wrs.style.schemelist, and sas.wrs.style.defaultscheme.

   Property Name: sas.wrs.style.css

   Property Value: Comma-delimited list of CSS files

   Property Name: sas.wrs.style.schemelist

   Property Value: your custom style names

   Property Name: sas.wrs.style.defaultscheme

   Property Value: default style

6. Click OK to exit the Define New Property dialog box.

7. Click Add to add another property.

8. When you are finished adding properties, click OK to exit the Web Report Studio 4.3 Properties dialog box.

9. To enable these properties to take effect, restart your Web application server.

CSS Formats for Custom Report Styles

About Cascading Style Sheet Formats

In order to provide custom report styles, you create one or more CSS files. CSS files are text files that can be edited with a text editor. CSS file enables specified formats (CSS rule sets) to be available for users to modify in SAS Web Report Studio. These files are stored in the C:\SAS\config\Lev1\Web\Applications\SASWebReportStudio4.3\customer folder. A default CSS file is also available at that location.

When CSS files are created and their filenames are specified on the Advanced Tab of the Web Report Studio 4.3 Properties, the following elements can be modified by users in SAS Web Report Studio:

• tables, both list and crosstabulation

• graphs

• text objects

• headers and footers

• display filters

In the CSS file, lines that start with < or - are considered comments. These lines are ignored by SAS Web Report Studio.

SAS Web Report Studio does not support at-rules, such as @import. Such directives are ignored.

A sample CSS file is available to help you develop your own custom styles. The file Seaside_CSS.css was copied to the customer folder when you installed and then configured SAS Web Report Studio. This CSS is based on the built-in Seaside style.

For instructions about making the CSS formats available to SAS Web Report Studio, see Specify Property Names and Values for Styles. For information about CSS files in general, see the W3C organization's Web site at http://www.w3.org/TR/CSS21/.

Supported Properties

This table lists the properties that are supported for the property types that are explained through examples later in this chapter.

Supported Properties for CSS Formats

Property Type	Supported Properties
text	font-family font-weight color background-color text-align font-size text-decoration font-style
minimal text	font-family font-weight text-color font-size font-style
border	border border-color border-top-color border-bottom-color border-right-color border-left-color border-width border-top-width border-bottom-width border-right-width border-left-width border-style border-top-style border-bottom-style border-right-style border-left-style
cell	padding padding-top padding-bottom padding-left padding-right
graph data styles	color marker-symbol* marker-size line-thickness
* Possible values are: TRIANGLEFILLED, SQUAREFILLED, STARFILLED, HEXAGONFILLED, CIRCLEFILLED, CROSSFILLED, FLAGFILLED, CYLINDERFILLED, PRISMFILLED, X, SPADEFILLED, DIAMONDFILLED, HEARTFILLED, CLUBFILLED, POINT, NONE.

Tables

The following figure shows a sample list table.

List Table

Here are the supported style formats for elements in the list table.

CSS Formats for List Tables

Numbered Item	Selector	Supported Property Types
Title	Table Caption	Text
Headings	Table Column Label	Text, cell, border
Border	Table	Border
Cells	Table Column Cell	Text*, cell, border
Totals	Table Rows Summary	Text, cell, border
* The alignment (text-align property) for cells is overridden based on data type (numeric versus text).

Note:   In the CSS file, you must define the Table format before you define any of its descendant formats, such as Table Caption or Table Column Label.  

For more information about the supported property types, see Supported Properties.

The following figure shows a sample crosstabulation table.

Crosstabulation Table

Here are the supported style formats for elements in the crosstabulation table.

CSS Formats for Crosstabulation Tables

Numbered Item	Selector	Supported Property Types
Title	Table Caption	Text
Subheads	Table Rowgroup Values Table Columngroup Values	Text Cell Border
Headings	Table Rowgroup Label Table Rowgroup Row Label Table Columngroup Label	Text Cell Border
Border	Table Columngroup Column Label	Border
Cells	Table Rowgroup Row Cell Table Columngroup Column Cell	Text* Cell Border
Subtotals	Table Rowgroup Rows Summary Table Columngroup Columns Summary	Text Cell Border
Totals	Table Rows Summary Table Columns Summary	Text Cell Border
* The alignment (text-align property) for cells is overridden based on data type (numeric versus text).

Note:   In the CSS file, you must define the Table format before you define any of its descendant formats, such as Table Caption or Table Column Label.  

For more information about the supported property types, see Supported Properties.

Graphs

Like tables, graphs support styles for different aspects of their rendering. However, when subgroups are used in a graph, you should specify a unique format for each subgroup value in order to distinguish between the values. Subgrouping is data-dependent (for example, one subgroup might have three values, whereas the same subgroup on different data might have nine values). Therefore, SAS Web Report Studio supports a flexible collection of rules called graph data styles. A report scheme can consist of up to 12 specified graph data styles. Each graph data style can in turn be used for a particular subgroup of data.

The following example shows three sample graph data styles:

Graph GraphDataStyle1
{
        color : red;
        marker-symbol : DIAMONDFILLED;
        marker-size : 10px;
        line-thickness : 2px;
}

Graph GraphDataStyle2
{
        color : green;
        marker-symbol : CIRCLEFILLED;
        marker-size : 10px;
        line-thickness : 2px;
}

Graph GraphDataStyle3
{
        color : blue;
        marker-symbol : SQUAREFILLED;
        marker-size : 10px;
        line-thickness : 2px;
}

This method enables you to define graph schemes that supply common formats across different types of graphs. Not all the graph data styles are used for each graph.

Note:   The progressive bar chart and the geographical map do not support the GraphDataStylen formats. The supported formats for these charts are described later in this section.   

The following figure shows a sample bar chart, followed by a list of the supported formats for elements in the graph.

Sample Bar Chart

The following table shows the list of supported elements for graphs.

CSS Formats for Graphs

Numbered Item	Selector	Supported Properties and Property Types
Title	Graph TitleText	Text
Horizontal and vertical axis	Graph AxisLines	Line-color property Line-thickness property
Axis and legend labels	Graph LabelText	Minimal text
Axis values	Graph ValueText	Minimal text
Legend values	Graph LegendFill	Fill-color property
Background	Graph BackFill	Fill-color property
Grid lines	Graph GridLines	Line-color property
Data	Graph GraphDataStylen	Graph data styles
Border*	Graph BorderLines	Line-color property
* Graph borders are turned off by default.

For more information about the supported property types, see Supported Properties.

The geographical (ESRI) map supports only the border style.

The progressive bar chart does not support the GraphDataStylen formats. Instead, the chart uses three different formats for its data styles. These formats are unique to the progressive bar chart.

Sample Progressive Bar Chart

CSS Formats for Progressive Bar Charts

Numbered Item	Selector	Supported Properties
Initial bar	Graph InitialDataStyle	Fill-color
Positive or negative bars	Graph ThreeColorRamp Graph ThreeColorAltRamp	Fill-gradient-start-color Fill-gradient-end-color
Final bar	Graph FinalDataStyle	Fill-color

Text

Text elements, including headers and footers, use the text property type, and support all text formats.

Display Filters

Three types of display filters are available are:

• graphs

• tables

• synchronized objects

Display filters for graphs, tables, and synchronized objects must be specified individually. The following figure shows display filters for a table.

Sample Display Filters

In this figure, the selectors are Graph DisplayFilter and Table DisplayFilter. The supported property types and properties are text, border, and margin-bottom.

Note:   For each of the formats, you must define the parent format before you define any of its descendants in the CSS file.   

Previous Page

|

Next Page

|

Top of Page

Copyright © 2010 by SAS Institute Inc., Cary, NC, USA. All rights reserved.