- 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.
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).The shoesUI.html SAS Server Page
%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="_debug" value="&_debug">
<input type="hidden" name="page" value="tagCloud">
<input type="hidden" name="data" value="sashelp.shoes">
<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.
<p>
<b>Select Class Variable</b>
<br>
<select name="word">
<option value="Product">Product</option>
<option value="Region">Region</option>
<option value="Subsidiary" selected>Subsidiary</option>
</select>
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.
<p>
<b>Select Analysis Variable</b>
<br>
<select name="weight">
<option value="Inventory">Inventory</option>
<option value="Returns">Returns</option>
<option value="Sales" selected>Sales</option>
</select>
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>
button.
<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="http://www.sascommunity.org/wiki/SAS_Server_Pages_and_More:_A_Framework_for_Generating_Dynamic_Content"
style="text-decoration:none" target="_blank">
SAS Server Pages and More: A Framework for Generating Dynamic Content
</a>
</div>
Another div tag to right justify part of the footer.
<div style="float:right;">
<a href="http://www.hcsbi.com"
style="text-decoration:none" target="_blank">
Henderson Consulting Services
</a>
</div>
And finally, close the outer div tag for the footer.
</div>
Summary
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.
