Wednesday, July 31, 2013

Tag Cloud SAS Server Page Components - Part 1

I recently posted about an AJAX and JQuery based Tag Cloud demo. And in my last post I described the re-usable AJAX template that is the foundation for the demo. In this post I am I'll describe two of the component SAS Server Pages:
  • shoesUI.html: the form that is used to capture the users choices. The form to use is passed as a parameter to the AJAX template.
  • hcsFooter.html: the text to include at the bottom of the page.
These two SAS Server Pages generate the parts of the display seen in regions 3, 4 and 5 of Figure 1.

Figure 1
The other components for this demo:
  • the Tag Cloud SAS Server Page that leverages the JQuery Tag Cloud plugin.
  • the macro that creates the JSON used by the JQuery Tag Cloud plugin.
  • the macro that produces the drill down report
will be discussed in my next post.

So lets get started with the details for these two (simple) components.

The shoesUI.html SAS Server Page

It is a best practice to always propagate the value of _debug. The following two lines make sure the macro variable always exists and assigns a default value of no debugging (0).

%global _debug;
%let _debug = %sysfunc(coalesceC(&_debug,0));

This JavaScript statement customizes the title seen in the browser for the page so it is specific to this demo. Note that a macro variable can't be used here (see the discussion of messageText below) since the document title is defined in the head section of the page.

<script>document.title="Tag Clouds as a Graphical Display";</script>

Define the hidden name/value pairs used by the demo. Note that we can propagate the value of _program since we are using the same stored process.
  • As mentioned above, the tagCloud SAS Server Page will be discussed in my next blog post.
  • For purposes of this demo, the data set to use and the statistic to calculate are not parameters. But they could easily be made into parameters that the user can specify.
<input type="hidden" name="_program" value="&_program">
<input type="hidden" name="_debug" value="&_debug">
<input type="hidden" name="page" value="tagCloud">
<input type="hidden" name="data" value="">
<input type="hidden" name="statistic" value="sum">

Next is the select tag that allows the user to select which class variable is used by the Tag Cloud to define the tags/words that are displayed. See region 3 above.

NOTE: if the data set were passed in as a parameter, we could make this list dynamic using dictionary.columns (or sashelp.vcolumn), restricted to character columns. Or perhaps a custom parameter file. The key is that this could be easily customized and made data-driven.  Also seen in region 3 above.

<select name="word">
<option value="Product">Product</option>
<option value="Region">Region</option>
<option value="Subsidiary" selected>Subsidiary</option>

Just as for the name of the class variable, we include a select tag to allow the user to select the analysis variable used to specify the weight to assign to each tag/word. This could also be easily customized and made data-driven.

<select name="weight">
<option value="Inventory">Inventory</option>
<option value="Returns">Returns</option>
<option value="Sales" selected>Sales</option>

And now the submit button. The AJAX template includes the form and /form tags and also includes the JQuery AJAX code that handles turning this simple form into an AJAX call. Again, the button can be seen in region 3 above.

<input type="submit" value="Generate Cloud">

And the final piece is this %let statement that defines the text to be displayed in the region of the page where the output will be displayed (see region 4 above). This allows for the custom instructions for any given demo - all defined using the SAS Server Page that contains the form elements.

%let messageText=
    <b>The tag cloud will be displayed once the <i>Generate Cloud</i>

       button is clicked.</b>
    <p>The form is also hidden when you click the <i>Generate Cloud</i>

    <p>To re-display the form in order to make another selection, just

       click the arrow in the upper left corner.

The hcsFooter SAS Server Page

The footer is pretty simple HTML. The most complicated part is the use of div tags to line up and format the text.

First an outer div tag to contain the footer.

 <div style="clear:both; height:15;
             background-color:#E4E4E4; color:#999999;
             font-family:Geneva, Arial, Helvetica, sans-serif;
             font-size:10px; font-style:italic;">

An inner div tag to that left justifies part of the footer.

 <div style="float:left;">
   <a href=""
      style="text-decoration:none" target="_blank">
   SAS Server Pages and More: A Framework for Generating Dynamic Content

Another div tag to right justify part of the footer.

 <div style="float:right;">
   <a href=""
      style="text-decoration:none" target="_blank">
   Henderson Consulting Services

And finally, close the outer div tag for the footer.



As I hope this post makes clear, parameterizing the AJAX template so it can be used for any number of custom Stored Process (or SAS/IntrNet Application Dispatcher) reports, is reasonably straightforward. And, yes, there will be more examples of using this AJAX template for different reports in future blog posts.

Monday, July 29, 2013

A SAS Server Page AJAX Template

In my last post I described a a SAS Server Page demo that used JQuery to provide both AJAX tools and a widget to produce tag clouds.

This is the first of several posts that will drill into the details of how it works. The topic for this post is a re-usable template that can be used for any number of reports: the ajaxContainer SAS Server Page (see figure 1).

Annotated ajaxContainer SAS Server Page
The contents of the SAS Server Page are described below with references to the numbers for each part of the output.

The first thing we do is ensure that the macro variables referenced/used in the template exist:
  • the formUI macro variable will resolve to the name of the SAS Server Page that contains the form fields so the user can make some selections (see 3 in figure 1). Note the use of %sysfunc with the coalesceC function to assign a default.
  • the footer macro variable will resolve to the name of the SAS Server Page that contains the HMTL to display at the bottom of the page (see 5 in figure 1). 
  • the messageText macro variable is assigned a value in the SAS Server Page referenced by formUI. This allows the text to be easily customized.
%global formUI footer messageText;
%let formUI = %sysfunc(coalesceC(&formUI,shoesForm.html));
%let footer = %sysfunc(coalesceC(&footer,hcsFooter.html));

Generate the HTML and in the head section, provide links to the hosted (by Google) JQuery tools. Using such links means that you need not download/install the basic JQuery environment script files to your server. But you do need to check for updates (e.g., the 1.10.1 and 1.10.3 in the URLs). Also note that by starting the URL with // instead of http or https allows will allow http vs. https to be used based on the base url.

<title>Sample AJAX Container</title>



Next is the JavaScript that controls the toggling of the UI/form. The ids showUI and hideUI reference a right arrow (show) and the left arrow (hide), discussed below that toggle the display of the form on/off. This technique allows the output to be seen on the same page as the form, while allowing to form to be hidden so as to maximize the screen real estate available to the output. 

Note that JavaScript could be included from another SAS Server Page using a macro variable similar to formUI and footer.

function toggleUI() {
 if (document.getElementById('showUI').style.display == 'none')
 { document.getElementById('showUI').style.display = 'block';
   document.getElementById('hideUI').style.display = 'none';
   document.getElementById('UI').style.display = 'none';
 { document.getElementById('UI').style.display = 'block';
   document.getElementById('hideUI').style.display = 'block';
   document.getElementById('showUI').style.display = 'none';


Just some HTML to define the text that appears at the top of the page. See 1 in figure 1. This could also have been parameterized like the footer, but I choose to show both techniques in this sample.

<div style="margin-bottom:5px; clear:both; height:15;

            background-color:#E4E4E4; color:#999999;
            font-family:Geneva, Arial, Helvetica, sans-serif;
            font-size:10px; font-style:italic;">
 <div style="float:left;">

  Learn more about these techniques in the SAS Press Book
   <a href=""
      style="text-decoration:none" target="_blank">
    SAS Server Pages and More: A Framework for Generating Dynamic Content
 <div style="float:right;">

   <a href=""
      style="text-decoration:none" target="_blank">
    SAS Server Page
    examples can be found on my
    <a href=""
       style="text-decoration:none" target="_blank">

The arrows that can be used to toggle the display of the form are defined next. See 2 in figure 1. The images are encoded as mentioned in my blog posting on base 64 encoded images.  This allows for the page to not have to worry about a path to the images directory and makes it more easily re-used and moved.

Note also the use of &streamDelim newline; to force PROC STREAM to issue a line feed. This helps ensure that linefeeds are not issued in the middle of some HTML text that perhaps should not be broken across lines.

&streamDelim newline;
<a id="showUI" href="JavaScript:toggleUI();"
   title="Show Selections"
   style="text-decoration:none; display:none;">
&streamDelim newline;

<img src="data:image/png;base64,R0lGODlhDAALAJEAACpVgbHB0Iuz2v///yH5BAEAAAMALAAAAAAMAAsAAAIhnB+nGrks3Gg0iOvs3TtpzjUgB0zAiV7lMwDCyp7sARsFADs="
&streamDelim newline;

<a id="hideUI" href="JavaScript:toggleUI();"
   title="Hide Selections"
   style="text-decoration:none; display:block;">
&streamDelim newline;

<img src="data:image/png;base64,R0lGODlhDAALAJEAALHB0CpVgYuz2v///yH5BAEAAAMALAAAAAAMAAsAAAIgnA2nB7ks3AOitpto3TtozgVDAIYGKQTqKp7po6hw/BQAOw=="

We next begin the div tag for the form/UI (note the id value is referenced above in the JavaScript that toggles the display on/off).

And we use the %include statement which causes PROC STREAM to do a server-side include of the form tag. By making the form a parameter to this template, we can use it to produce any number of reports. The included form generates the output seen in region 3 of figure 1.

<div id="UI" style="float:left;">
<form url="&_url" id="myForm">
&streamDelim;%include srvrpgs(&formUI);

Next is the JavaScript that leverages the JQuery AJAX framework to serialize and submit the form so the output can be displayed in the same page without having to refresh the entire page.

This only uses a few of the options available to the ajax function:
  • url: the url to display
  • success: the code to run if the URL is successfully run
  • note that there is an error/failure option as well. But being an optimist, and since this is a demo, I decided to not worry about that :-).
Note also that:
  • a please wait message is generated along with an image. I decided to not base 64 encode this as the encoded version is pretty long.
  • upon updating the output, the toggleUI JavaScript function is called to hide the form.
For the truly geeky and curious, there are lots of resources that you can find via a simple search that will how/why this works. For the rest of you, all I can say is trust me, it will work for you.

<script type="text/javascript">
    var frm = $('#myForm');
    frm.submit(function () {
    $("#region1").html('<div style="margin-left:50px">'

                     + '<h1>Processing . . . Please Wait . . . </h1>'
                     + '<img src="images/progress.gif""></div>');
    var theURL = "&_url?"+frm.serialize()+'&nocache='+Math.random();
            url: theURL,
            success: function (data) {
        return false;

Finally we define the region to contain the output. Note the id of region1 which is used in the AJAX code above. Note also that upon load the initial contents will be the text resulting from resolving the messageText macro variable (see 4 in figure 1). This variable is set in the code that is included when the formUI macro variable is resolved. As mentioned above, this allows for custom text for any given form.

<div id="region1" style="float:left; margin-left:10px;">

And last, a %include is used to include the footer text (see 5 in figure 1), followed by the /body and /html tags.
&streamDelim;%include srvrpgs(&footer);

I hope this all makes sense to you. If not, feel free to post questions about it.

In my next post I will discuss the two included files: shoesUI.HTML and hcsFooter.html.

Wednesday, July 17, 2013

Win a Free Copy of SAS Server Pages: A Framework for Generating Dynamic Content

Lots going on right now surrounding my eBook, SAS Server Pages:  A Framework for Generating Dynamic Content.
  1. Created a great cool demo using tag clouds that I plan to discuss in several follow-on blog entries.
  2. PROC STREAM, a key part of server pages, is now in production with SAS 9.4.
  3. Check the Apple iBookstore soon for an updated version of my eBook. 

The Demo – Tag Clouds as a Graphical Display of Data

You’ve all probably seen Tag Clouds. In fact, my blog uses tag clouds to display the labels (or keywords) that I have tagged individual blog entries with. The more blog entries a label is used in, the bigger it is. The tag cloud for this blog clearly has SAS Server Pages as the most frequent and thus is larger than the other tags. So that got me thinking that maybe Tag Clouds could be used for BI data – they are much more interesting (at least IMO) than bar charts or pie charts. So here is a link to a SAS Server Page that generates Tag Clouds using the SASHELP.SHOES data set that you can explore:

Here is a screenshot of a sample:

The demo integrates a few different technologies to produce this output:
  1. SAS Server Pages and PROC STREAM are used to generate the web/html output as well as to provide the User Interface where the user can specify what variables in the SAS data set are used to generate the Tag Cloud.
  2. The SAS BI/EBI Stored Process Server is used to deliver the results, including the drill-down functionality (e.g., clicking on the word Vancouver generated the tabular results).
  3. The JQuery framework provides several key technology pieces that both simplified the development of the demo as well as to deliver the content.
    1. The JQCloud JQuery widget produces the Tag Cloud based on data passed to it from the SAS Server Page.
    2. The JQuery AJAX tools are used to manage the layout of the display, including displaying the results in a single integrated page.
The use of the JQuery framework is particularly important as that allows any SAS developer, via SAS Server Pages, to leverage all of the user-interface, reporting, and graphical tools that developers all around the world have contributed to JQuery.

Over the next several weeks I will be describing and documenting all the pieces and parts of this demo; a demo that is built on top of a re-usable framework that uses the technology described in my eBook SAS Server Pages:  A Framework for Generating Dynamic Content.

Winning a Copy of the Book

Winning a copy of this eBook, specifically an Apple iBookstore copy, is simple. The first two readers who make a blog comment that is either:

  • An interesting set of publically available data that lends itself to a display like that shown in the demo.  And yes, this could result in my creating a demo using that data.
  • How you might use tag clouds for BI data.
  • A suggested enhancement for the demo.
For a chance to win, you must be a US resident and you must be a follower of this blog. This way, if you are a winner, the SAS Press folks (who are providing the free copies) and I can easily contact you and send you a code to download your free copy. To become a follower, just click on the Join this site button under the Followers widget.  See the Help Info on this for more information.

And, of course, if you don’t win a copy, you can always buy one!

Monday, July 15, 2013

Watch this Space to Win a Free Copy of my New eBook

Watch this space for details about a JQuery AJAX based demo and how you (sorry, US residents only) can win a free copy (an Apple iBook store copy) of my eBook SAS Server Pages: A Framework for Generating Dynamic Content.

To wet your appetite, here is a screen shot of the demo:

For a chance to win, you must be a US resident and you must be a follower of this blog. This way, if you are a winner, the SAS Press folks (who are providing the free copies) and I can easily contact you and send you a code to download your free copy. To become a follower, just click on the Join this site button under the Followers widget.  See the Help Info on this for more information.