ODS report Design

[CameronLawson]

Hi all,
Apart from Robert Allison's page does anyone have any links to innovative use of design in ODS output reporting? (specifically html/xhtml) I ask this as while many of the sas samples are clever and very useful from a technical standpoint, the design aspects are clearly geared towards usenet circa 1991 and early geocities sites....

As many of you may realise, an unfortunate reality of the report creation process is that the message is lost unless it is conveyed in a way that audience identifies with. Unfortunately brilliant graphs with complex anno datasets do not always cut it....Sometimes some pap, photoshop and a flashy graphic makes the day....

I am in that situation where I must display complex reports to a bunch of vapid marketing execs in a way that they understand and appreciate (flashy colors, web 2.0 style interfaces etc)

any information is appreciated.

[Kevin_SAS]

I'm not aware of any specific links that discuss this topic, but it is something that has been bugging me for a while as well. While there are over 50 style templates that come delivered with SAS, they are getting a bit dated. The good news is that in SAS 9.2, ODS can read CSS files directly so that no Proc Template knowledge is needed to write your own styles. You can even use the Enterprise Guide Style Editor to create your styles graphically. We are going to be working on some new updated styles in the next year or so to deliver with the next version of SAS, but I'm hoping that we can make them as downloads as well.

Until the above mentioned things happen, there are some things you can do now. Since you say that you are really only interested in HTML, you can use the stylesheet= option with the (url="...") subption (e.g,., ods html file="..." stylesheet='filename.css'(url='mystyle.css');). This will put a link to your own style sheet (i.e. mystyle.css) that you can customize as much as you want. Since you are doing everything directly in CSS, you can use the full power of CSS context selectors to do some fancy things. This does, of course, require knowledge of CSS and some design sense.

The next thing to do would be to use a Javascript toolkit such as, my favorite, MooTools http://mootools.net/ to create some nice effects. These effects are really specific to what you want to portray in your report so you'll have to play around with them a bit.

While it is really difficult to come up with something that ships with SAS that would be general enough for anyone to use, I think that you make a good point in that it would be nice to see some state-of-the-art examples on just what is possible.

[Cynthia_sas]

Hi:
You said:

Sometimes some pap, photoshop and a flashy graphic makes the day....


My Oxford American dictionary defines "pap" to be:
1. soft or semiliquid food suitable for infants or invalids.
2. mash, pulp.
3. undemanding reading matter.

So I guess my question is, why bother to use SAS at all? You could make up some numbers, throw them into a JavaScript with some dancing emoticons and be done with it. It seems to me that "complex reports" and "vapid marketing execs" and "pap" mean that you need some ways to make the complex reports seem less complex (or more easily graspable) by using colors and highlighting to make it easy for them to understand your point.

While I believe that a picture is indeed worth a thousand words, I don't believe that a picture of roses (or dancing roses) really says anything about marketing doodads to college students.

For example...if you need a list of products and just want to highlight with an up arrow or a down arrow or a check mark (above target, below target, at target) -- you can do that kind of highlighting with PROC REPORT through the use of ODS and the preimage or postimage attribute. If you want to show a table of numbers and highlight the "not good" numbers in red or the "good" numbers in green, then you can do that in PROC REPORT, PROC TABULATE or PROC PRINT or DATA _NULL_.

Do you have an idea of the type of report you want to create?

cynthia

[Kevin_SAS]

Here is a pretty basic idea of what I mentioned earlier. I used the MooTools library to make some interesting table of contents effects and updated the look of the output by bypassing the SAS styles completely and using plain old CSS instead. Just save the three sections of code below in the specified files and run the test.sas file. You'll also need to download the MooTools toolkit and save it as mootools-1.11.js.

[pre]
/* ---- test.sas ---- */
proc template;
define style styles.empty;
style ContentItem, PagesItem /
listentryanchor = yes
;
end;
run;

ods html file="foob.html" contents="fooc.html" frame="foo.html"
stylesheet="foo.css"(url="styles.css")
code="foo.js"(url="code.js") style=styles.empty
headtext='
';

proc contents data=sashelp.class;
run;

proc means data=sashelp.class;
run;

ods html close;
/* ---- end test.sas ---- */
[/pre]

[pre]
/* ---- code.js ---- */
window.addEvent('domready', function() {

// Add mouseover effects for table of contents
$$('li a').each(function(element, index) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
'color': '#ff8'
});
});

element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});
});

// Make tables striped
$$('table.Table tbody tr').each(function(row, index) {
row.getElementsBySelector('td.Data').each(function(cell) {
cell.addClass(['even','odd'][index%2]);
});
});

});
/* ---- end code.js ---- */
[/pre]

[pre]
/* ---- styles.css ---- */
.contents {
font: 13px "Lucida Grande", Arial, Helvetica, sans-serif;
background-color: #333;
color: #888;
}

.contents ol {
padding: 1em;
list-style-type: none;
margin-left: 0;
}

.contents ul {
padding: 1em;
list-style-type: none;
margin-left: 0;
}

.contents li a {
display: block;
padding: 4px;
width: 150px;
background: #333;
color: #888;
text-decoration: none;
}

.contents br {
display: none;
}

.body {
font: 13px "Lucida Grande", Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000;
}

.body table.table {
margin-bottom: 1.5em;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #7389ae;
}

.body table td, body table th {
padding: 5px 9px 5px 9px;
}

.body table td {
font-size: 11px;
background-color: #f5f5f5;
}

.body table td.even {
background-color: #ececec;
}

.body table th {
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: #7389AE;
}

.body table th.top_stacked_value, .body table th.middle_stacked_value,
.body table th.bottom_stacked_value {
background-color: transparent;
color: #000;
}

.body .proctitle {
background-color: #78BA91;
color: #fff;
padding: 5px;
font-size: 13px;
font-weight: bold;
}

.body .systemtitle {
letter-spacing: 2.5em;
font-size: 9px;
font-weight: bold;
padding: 2em 0 0 0;
margin: 0;
color: #78BA91;
text-transform: uppercase;
}

.body br {
display: none;
}
/* ---- end styles.css ---- */
[/pre]

[Peter_C]

Kevin

this is looking interesting, but the proc template doesn't compile correctly.
(winXP SAS9.1.3 sp4)

Are there special symbols not appearing correctly ?


PeterC

[Kevin_SAS]

Sorry, some SAS 9.2 syntax snuck in there. The Proc Template code should look like:

[pre]
proc template;
define style styles.empty;
style ContentItem /
listentryanchor = yes
;
style PagesItem /
listentryanchor = yes
;
end;
run;
[/pre]

[CameronLawson]

Thanks for the replies everyone. I agree with the points raised. This was posted during one of moments when work makes you want to scream....

[Bill]

Questions like this one scare me.

Complex reports must be made simple, but it isn't often effective to use flashy displays. Take yourself to www.perceptualedge.com, buy and read Show Me The Numbers and then worry about tool choice and methodology.