26087 - Data Set Formatter: Usage Example 2

Sample 26087: Data Set Formatter: Usage Example 2

Overview

This example is provided for users who are familiar with the Data Set Formatter and with using cascading style sheets. This example shows you how to use style sheets to further customize the output generated by the Data Set Formatter. Remember that one advantage of using style sheets is that you can change the way your HTML page is formatted without rerunning your SAS program.

If you are unfamiliar with how to use the Data Set Formatter, refer to Data Set Formatter: Usage Example 1 before continuing with this example.

This example shows you how to use the Data Set Formatter syntax to incorporate the use of style sheets into your resulting HTML files. The descriptions of the tasks performed in this example assume that you are familiar with cascading style sheets and that you have read the supporting formatter documentation. For this example, the basic SAS code is enhanced in two ways, as follows:

Enhancement 1: Incorporating a style sheet
Enhancement 2: Applying styles based on a SAS format.

Note: If you view the resulting HTML file and do not see the formatting changes described in this example, your Web browser might not support the style sheet feature being shown.

Setting Up the Example

This example uses the revhub data set. This data set is provided in SAS Help, so you can run this example at your site. After you download and install the HTML Formatting Tools, submit the following code and view the results:

   options ls=195 ps=66 nocenter nodate nonumber; 

   title 'Basic Data Set Formatter Example';
   footnote 'The end of the basic example';
  
   %ds2htm (runmode=b,
            htmlfile=base.html,
            openmode=replace,
            doctype=3.2,
            pagepart=all,
            brtitle=SASHELP.REVHUB,
            data=sashelp.revhub,
            twidth=75, twunits=percent)

The output for this example does not highlight any feature of the data. The remainder of this example shows you how to use style sheet support with the Data Set Formatter to improve the appearance of your HTML output. (If you are not familiar with how style sheets are supported in HTML formatters, read Using Style Sheets before continuing with this example.)

Enhancement 1: Incorporating a Style Sheet

To incorporate style sheets into your output, first identify or create the style sheets you will be using. After you have a style sheet, you can quickly add color, text enhancements, and page attributes to your HTML-formatted data sets. You can add many of these enhancements to your output without using style sheets. However, using style sheets enables you to change the formatting enhancements without reprocessing your reports.

Making the changes necessary to use a style sheet

Create a style sheet and put it in a directory accessible by the Web server. For this example, name your style sheet examp2.css and store it in the directory with your resulting HTML file. Your style sheet should contain the following:

   .blue {background: blue}
   .teal {background: #008F93} 
   .green {background: #008740}
   .yellow {background: #FFFF00}
   .beige {background: #FFFFE2}
   .gray {background: #c0c0c0}
   .white {background: white, font-weight: bold}

Modify the formatter invocation (from the previous basic SAS code example) to include the following arguments that appear in bold:
```
   options ls=195 ps=66 nocenter nodate nonumber; 

   title 'Data Set Formatted using Style Sheets';
   footnote;
  
   %ds2htm (runmode=b,
            htmlfile=base2.html,
            openmode=replace,
            doctype=3.2,
            pagepart=all,
            brtitle=SASHELP.REVHUB,
            data=sashelp.revhub,
            var=hub(class=gray) source revenue,
            clclass=gray,
            sshref1=examp2.css,
            sstype1=text/css,
            ssrel1=stylesheet,
            ssmedia1=screen,
            twidth=75, twunits=percent)
```
The following arguments appeared in bold in this code:
- VAR=HUB(CLASS=GRAY) SOURCE REVENUE, which applies the value of the style sheet class named gray to each table cell that contains data from the HUB variable. This argument also specifies which variables to include in the output and the order in which they should appear. You can apply style sheet classes to any or all variables included in this argument.
- CLCLASS=GRAY, which applies the value of the style sheet class named gray to each column label cell.
- SSHREF1=EXAMP2.CSS, which indicates that you want to link the style sheet named examp2.css into this document. The fact that no path is provided with the style sheet filename implies that the style sheet and the resulting HTML file reside in the same directory.
- SSTYPE1=TEXT/CSS, SSREL1=STYLESHEET, and SSMEDIA1=SCREEN, each of which supplies specific information about the style sheet. For more information, see Syntax for Including Style Sheets.

Take a look at the resulting HTML file. You can see that the HUB column and each of the column labels have gray backgrounds. Be sure to view the page source to see how the style sheet information was included in the resulting HTML.

If you try this example for yourself, change the value associated with the gray class in your style sheet. Then reload the page, and notice that the page changes to match your new style sheet definition.

Enhancement 2: Applying Styles Based on a SAS Format

As you saw in the previous example, you can apply style sheet class names to elements in your output. By using style sheets, you can enhance information in your output by adding color, images, and text changes. These enhancements improve the look and usability of your data. In addition to formatting that simply improves the look of your page, you might want to use it to highlight your data.

Enhancement 2 uses a SAS format to apply style sheet class information to values in your data. You can add information to your style sheet and define your format to utilize the new style sheet classes.

Making the changes necessary to use a format

Add the following information to the style sheet you created in Step 1. (See the code in Step 1 of Enhancement 1 for the original style sheet contents.)
```
   .low {color: red}
   .medium {color: #00A0DD}
   .high {color: #003D84} 
   .plus {font-weight: bold}
```
Decide how you want to highlight your data and create a SAS format that uses the class names you just added to your style sheet. For this example, show the revenue sources that are under-performing (low) and those that are exceeding expectations (plus). Add the following FORMAT procedure to your SAS program:
```
   proc format;
      value range
         low-100000="low"
         100000-500000="medium"
         500000-1000000="high"
         1000000-high="plus";
```
Modify the VAR= argument on the Data Set Formatter invocation so that it appears as follows:
```
   var=hub(class=beige) source revenue(classfmt=range.), 
```
Change the class associated with HUB to make the table more appealing and use CLASSFMT= to associate your newly defined format with the values of REVENUE.

See the complete SAS program and the resulting HTML file.

Because you highlighted the data using style sheet elements, you can redefine the emphasis on the data values. For example, if you want to emphasize revenue sources that are performing as expected (medium), you might change your style sheet class definitions for low and medium as shown in the following example:

   .low {color: #00A0DD}
   .medium {color: red}
   .high {color: #003D84} 
   .plus {font-weight: bold}

Now, reload your page and notice that the values in the medium range are now red.

For more information, see the following topics:

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

This code contains Enhancements 1 and 2.

options ls=195 ps=66 nocenter nodate nonumber;

title 'Second enhancement to add color using style sheets and formats';
footnote '';


proc format;
   value range
      low-100000="low"
      100000-500000="medium"
      500000-1000000="high"
      1000000-high="plus";
run;

%ds2htm (runmode=b,
         htmlfile=base3.html,
         openmode=replace,
         doctype=3.2,
         pagepart=all,
         brtitle=SASHELP.REVHUB,
         data=sashelp.revhub,
         var=hub(class=beige) source revenue(classfmt=range.),
         clclass=beige,
         sshref1=examp2.css,
         sstype1=text/css,
         ssrel1=stylesheet,
         ssmedia1=screen,
         twidth=75, twunits=percent);