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.SeeCSS 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. 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 Managementthen selectConfiguration Managerthen selectWeb 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-symbol1
marker-size
line-thickness
1Possible 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
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
Text1, cell, border
Totals
Table Rows Summary
Text, cell, border
1The 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 for CSS Formats.
The following figure shows a sample crosstabulation table.
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
Text1
Cell
Border
Subtotals
Table Rowgroup Rows Summary
Table Columngroup Columns Summary
Text
Cell
Border
Totals
Table Rows Summary
Table Columns Summary
Text
Cell
Border
1The 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
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
Border1
Graph BorderLines
Line-color property
1Graph borders are turned off by default.
For more information about the supported property types, see Supported Properties for CSS Formats.
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
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
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.
Copyright © SAS Institute Inc. All rights reserved.