This sample SAS Stored Process creates a Treeview report that enables rows in the report to be expanded or collapsed. The sample produces output that is similar to the following:

The following steps enable you to create a Treeview report when you are executing a SAS Stored Process.

1. Create a SAS Stored Process that executes the Treeview_Example.sas code that is provided on the Full Code tab at the top of this page.

   You should be able to run the code without any modifications. However, please check the URL paths to the Expand.gif, Collapse.gif, and Smiley.gif image files to ensure that they are correct on your Web server.

2. Test the Treeview_Example.sas SAS Stored Process to confirm that it runs correctly.
3. Copy the Treeview_Example.sas file to create another file called My_Treeview.sas. My_Treeview.sas contains the code for your new custom SAS Stored Process.
4. Create a SAS Stored Process that executes the My_Treeview.sas code.
5. Edit the My_Treeview.sas code. Modify the section of the code that begins with Create the HTML Report to create the HTML tags for your custom SAS Stored process.

   You should not need to modify the section of the code that creates the style sheet and the Javascript code.

6. In the Create the HTML Report section of your code, create an Unordered List using <UL>, <LI>, and </UL> tags.

   If you want to enable a row to be expanded or collapsed, then specify:

        <LI class=closedrow> ... item name here ...
   

   If you want to create a row that cannot be expanded and collapsed, then specify:

        <LI> ... item name here ...
   

7. As an example, the SAS Stored Process creates HTML output that is similar to the following:

      <UL>
   
      <LI class=closedrow>Student Information - Expandable Row
   
      <UL>
      <LI class=closedrow>Alice - Expandable Row
      <UL>
      <LI>AGE: 13 Height: 56
      <LI>Weight: 84
      </UL>
      <LI class=closedrow>James - Expandable Row
      <UL>
      <LI>AGE: 12 Height: 57
      <LI>Weight: 83
      </UL>
   
      </UL>
      </UL>
   

8. You can modify the code to use other images if you like. Modify the lines that begin with "list-style-image: url".

   You can also add other images to your report. For example, see the ".smiley" style and associated "Smiley.gif" image file. Also, see the "<LI class=smiley>" line that references the ".smiley" style.

---

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.

You should not need to modify the section of the code that creates the Style sheet and the Javascript code.

In the "Create the HTML Report" section of your code, you will create an Unordered List using <UL>, <LI> and </UL> tags.

If you want to permit a row to be expanded and collapsed, then specify:

     <LI class=closedrow> ... item name here ...

  /**************************************************************/
  /*                                                            */
  /* Name:    TreeView_Example.sas                              */
  /*                                                            */
  /* PURPOSE: Create an HTML report with rows that can be       */
  /*          expanded or collapsed.                            */
  /*                                                            */
  /* NOTE:  You should not need to modify the code that         */
  /*        creates the style sheet or Javascript code.         */
  /*                                                            */
  /*        You will need to modify the "Create HTML Report"    */
  /*        section of the code to create your customized       */
  /*        application.                                        */
  /*                                                            */
  /**************************************************************/

   /* Output the style sheet and Javascript that are used to    */
   /* expand and collapse the rows in the report.               */
 
   /* You should not need to modify the code that creates the   */
   /* style sheet and the Javascript code.                      */
   /*                                                           */
   /* However, check the paths to Expand.gif, Collapse.gif, and */
   /* Smiley.gif to make sure they are correct at your site.    */

data _null_;

   /* Create the style sheet and Javascript.                    */
   /* You should not need to modify the code in this DATA step. */

file _webout;

put '<HTML>';
put '<!--';
put 'This example permits you to expand or collapse rows in a report by clicking';
put 'on the row.';
put '-->';
put '<STYLE TYPE="text/css">';
 
put 'UL {color: navy;';
put 'list-style-type: none;';
put 'list-style-image: none;';
put 'margin-left:20px;';
put '}';
put 'UL UL UL { color: black; }';
put 'UL UL UL UL { color: green; }';
put 'LI {';
put 'cursor: text;';
put 'list-style-image: none;';
put '}';
put '.closedrow {';
put 'cursor:hand;';

   /* Check to make sure this path is correct at your site.              */
   /* You can specify another GIF file if you like for: list-style-image */
 
put 'list-style-image: url("/SASTheme_default/themes/default/images/Expand.gif");';
put '}';
put '.closedrow UL {';
put 'display:none;';
put '}';
put '.openedrow { cursor:hand;';

   /* Check to make sure this path is correct at your site.               */
   /* You can specify another GIF file if you like for: list-style-image  */

put 'list-style-image: url("/SASTheme_default/themes/default/images/Collapse.gif");';

put '}';

   /* Check to make sure this path is correct at your site.              */
   /* You can specify another GIF file if you like for: list-style-image */

put '.smiley { list-style-image: url("/SASTheme_default/themes/default/images/Smiley.gif");';

put '</STYLE>';
put '<SCRIPT LANGUAGE="JavaScript" ID="code">';
put '// Source Code for Outlining';
 
put 'function checkParent(src, dest) {';
put '// Search for a specific parent of the current element';
put 'while (src!=null) {';
put 'if (src.tagName == dest) return src;';
put 'src = src.parentElement;';
put '}';
put 'return null;';
put '}';
 
put 'function outline() {';
put '// Expand or collapse if a list item is clicked.';
put 'var open = event.srcElement;';
put '// Make sure clicked inside an LI. This test allows rich HTML inside lists.';
put 'var el = checkParent(open, "LI");';
put 'if (null!=el) {';
put 'var pos = el.sourceIndex+1';
put '// Search for a nested list';
put 'while (el.contains(document.all[pos])) {';
put 'if ("UL"==document.all[pos].tagName) break;';
put 'pos++';
put '}';
put '} else return;';
put 'el = document.all[pos];';
put 'if ("UL"==el.tagName) {';
put '// Expand or Collapse nested list';
put 'var parent = el.parentElement;';
put 'if ("closedrow"==parent.className) {';
put 'parent.className = "openedrow";';
put 'parent.style.display = "block";';
put '}';
put 'else if ("openedrow"==parent.className)';
put '{';
put 'parent.className = "closedrow";';
put 'parent.style.display = "";';
put '}';
put '}';
put 'event.cancelBubble = true;';
put '}';
put 'document.onclick = outline;';
put '</SCRIPT>';
put '<STYLE TYPE="text/javascript">';
put 'contextual(tags.UL, tags.UL).display = "block";';
put '</STYLE>';
put '<BODY BGCOLOR="#ffffe7" onLoad="window.focus();">';
run;

   /***********************************************************/
   /*                                                         */
   /* NOTE: You should not need to modify the above code.     */
   /*                                                         */
   /***********************************************************/


   /***********************************************************/
   /*                                                         */
   /* The following code creates the output HTML.             */
   /* You will need to modify this code for your application. */
   /*                                                         */
   /* If you want a row in a report to be expandable,         */
   /* then specify:                                           */
   /*                                                         */                             
   /*       <LI class=closedrow> ... item name here ... */
   /*                                                         */
   /***********************************************************/

   /****************************/
   /*                          */
   /*  Create the HTML report. */
   /*                          */
   /****************************/

data _null_;

 file _webout;

 put '<H2>Treeview Example</H2>';
 put 'You can expand or collapse the rows in this report.';
 put '<UL>';

   /* NOTE: <LI class=closedrow> makes this row expandable. */

 put '<LI class=closedrow>Student Information';
 put '<UL>';

run;

data _null_;
  set sashelp.class;

  file _webout;
  put '<LI class=closedrow>' name;
  put '<UL>';
  put "<li>Age:" age " Height: " height ;
  put "<li>Weight: " weight ; 

   /* NOTE: <LI class=closedrow> makes this row expandable. */

  put '<LI class=closedrow>More Information';
  put '<UL>';

   /* NOTE: <LI class=smiley> causes the Smiley.gif image to */
   /*       be inserted at the beginning of the row.         */

  put "<LI class=smiley> Excellent Student";
  put '<LI class=smiley> Good Attendance';
  put "</UL>";
  put "</UL>";
run;

data _null_;
  file _webout;
  put '</UL>';
  put '</UL>';
  put '</BODY></HTML>';
run;

---

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.

Operating System and Release Information