How to create your own SASUnit style - HMS-Analytical-Software/SASUnit GitHub Wiki

Introduction

This page guides you through the process of creating your own SASUnit style.

Since version 1.7 you can specify which style SASUnit should use. This also enables you to create your own style.

What the new SASUnit style looks like

We decide to brush up SASUnit a bit.

Since we don't need DoxyGen anymore we can freely choose what SASUnit shuld look like. We tried to give SASUnit a more modern looking style, with little color and tabs as you know them from mobile devices. Just have a look here...

How SASUnit style works

Concepts for SASUnit style

Creating your own Style

This section will guide you through the whole process of creating your own SASUnit style.

Add your style definition to %_report_createstyles

The first step is to create your style definition in PROC TEMAPLATE. These definitions are stored here: SASUnit style definitions This style definitions are copies of styles.default. You can any style as parent. Import is that you add all necessary style elements definied here: Concepts for SASUnit style

Create the <YourStyle>_PROC_TEMPLATE.css

When your creatign an new style you need to a name for it.

This name msut be used in these places

  • Style definiton in PROC TEMPLATE (styles.<YourStyle>)
  • Name of the master css file (<YourStyle>.css)
    • Inside this file referencing PROC_TEMPLATE css file
  • Name of PROC TEMPLATE css file (<YourStyle>_PROC_TEMPLATE.css

You can create a css file from a SAS style defintion with the following source code:

ods listing close;
ods html file      ="<temp path>\<temp Name>.html"
         style     =styles.<SASUnit style> 
         stylesheet="<temp path>\<SASUnit style>_PROC_TEMPLATE.css"
         (url="<SASUnit style>.css");
                
proc print data=sashelp.class (obs=3);
run;

ods _all_ close;
ods listing;

Here is an example for the two SASUnit styles:

ods listing close;
ods html(1)     file      ="C:\TEMP\SASUNIT_claasic.html" 
                style     =styles.SASUNIT_classic 
                stylesheet="...\css\SASUnit_classic_PROC_TEMPLATE.css"
                (url="SASUnit_classic_PROC_TEMPLATE.css");
ods html(2)     file      ="C:\TEMP\SASUNIT.html"         
                style     =styles.SAS_SASUNIT
                stylesheet="...\css\SAS_SASUnit_PROC_TEMPLATE.css"
                (url="SASUnit_PROC_TEMPLATE.css");
                
proc print data=sashelp.class (obs=3);
run;

ods _all_ close;
ods listing;
                

Create and update your master css file (<YourStyle>.css)

You can copy and rename one of the provided master css files to <YourStyle>.css

Afterwards you need to change the reference to your PROC TEMPLATE css file

/*
.....
*/

@IMPORT "SASUnit_PROC_TEMPLATE.css";
@IMPORT "Treeview.css";

will be replaced by

/*
.....
*/

@IMPORT "<YourStyle>_PROC_TEMPLATE.css";
@IMPORT "Treeview.css";

If you want the links be rendered differently you need to change their definiiton.

If you want the tabs look different you need to change their definiiton.

Copy your css files to SASUnit resources

The next step is to copy those two css files into your SASUnit implementation under .../resources/html/css Copy_CSS_Files

Tell SASUnit to use your style

The only thing left to do is tell SASUnit which style to use. That's pretty simple: %reportSASUnit.sas has a new parameter i_style. Just set the name of your style in run_all.sas

/* Create or recreate HTML pages for report where needed */
%reportSASUnit(
   i_language =%upcase(%sysget(SASUNIT_LANGUAGE))
  ,o_html     =1
  ,o_junit    =1
  ,i_style    =<YourStyle>
);

That's it.

Congratuation. You have successfully implemented a new SASUnit style.

⚠️ **GitHub.com Fallback** ⚠️