Adding JavaScript for Drill-Down Reporting

Syntax: How to Specify a Hyperlink to a JavaScript Function

TYPE=type, {COLUMN|ACROSSCOLUMN}=fieldname, JAVASCRIPT=func[(value)],$

where:

type

Is the report component that serves as the hyperlink. The TYPE attribute and its value must be first in the StyleSheet.

For example, use TYPE=DATA to set up a hyperlink from a data field in a report, or use TYPE=REPORT to set up a hyperlink from any component in a report.

fieldname

Is the name of the field in the data source whose value, when selected, executes the hyperlink.

func

Is the name of the JavaScript function.

The maximum length of the code for JAVASCRIPT=func, including any passed values, is 800 characters. The code can span more than one line. If you split it across a line, use a backslash at the end of the first line as the continuation character. If you split a line at a point at which a space is required, the space must be before the backslash, or must be the first character on the next line.

In this example,

JAVASCRIPT=myfunc(COUNTRY\CAR MODEL),$

the code correctly spans two lines.

value

Is a value or values passed to the JavaScript function. Specify a value in one of the following ways:

As the name of a report column.
As a constant. You must enclose the value in single quotation marks.
As a Dialogue Manager amper variable. You can only specify an amper variable in a StyleSheet that is part of the procedure (inline).

An amper variable is typically used to pass a constant value, in which case it must be enclosed in single quotation marks, for example, '&ABC'.

Example: Creating a Drill-Down Report With JavaScript

In this example, the summary component of a drill-down report displays orders per month for each store code. When the user selects a particular store code, a hyperlink calls a JavaScript function that performs calculations on the data and displays detailed information for the selected store.

Create a procedure named JDRILL. The letters on the left correspond to the notes explaining the code.

   SET MESSAGE = OFF
   TABLE FILE GGORDER
   SUM QUANTITY BY STORE_CODE ACROSS ORDER_DATE 
   IF ORDER_DATE GT 12/31/96 
a. ON TABLE HOLD
   END
   -RUN
   TABLE FILE HOLD
   HEADING CENTER
   "Store Sales Analysis Using JavaScript" 
b. PRINT E01 AS 'Store,Code' E02 AS 'Jan' E03 AS 'Feb' E04 AS 'Mar'
                             E05 AS 'Apr' E06 AS 'May' E07 AS 'Jun'
                             E08 AS 'Jul' E09 AS 'Aug' E10 AS 'Sep'
                             E11 AS 'Oct' E12 AS 'Nov' E13 AS 'Dec'
   FOOTING CENTER
   "Please click on the store code to summarize the store's data." 
c. ON TABLE HOLD AS JAVATEMP FORMAT HTMTABLE 
d. ON TABLE SET STYLE *
   TYPE=DATA,COLUMN=STORE_CODE,$
   JAVASCRIPT=conprint(E01 E02 E03 E04 E05 E06 E07 E08 E09 E10 E11 \
                       E12 E13),$
   COLOR=GREEN,STYLE=ITALIC,$
 
   TYPE=TITLE,COLOR=RED,STYLE=BOLD,$
   TYPE=HEADING,COLOR=BLUE,STYLE=ITALIC,SIZE=11,$
   TYPE=FOOTING,COLOR=BLUE,STYLE=ITALIC,$
   END STYLE
   END  
e. -HTMLFORM BEGIN
   <HTML>

f. <SCRIPT LANGUAGE="JavaScript">
    var spacer = "................................."; var pos=0;
    var aaaa;
    function conprint(aaax,lsyr,aa1,aa2,aa3,aa4,aa5,aa6,aa7,
                      aa8,aa9,aa10,aa11,aa12)
    {
    var spacer="     ";
 
    lsyrave=parseFloat(lsyr);
    a1=parseFloat(aa1);
    a2=parseFloat(aa2);
    a3=parseFloat(aa3);
    a4=parseFloat(aa4);
    a5=parseFloat(aa5);
    a6=parseFloat(aa6);
    a7=parseFloat(aa7);
    a8=parseFloat(aa8);
    a9=parseFloat(aa9);
    a10=parseFloat(aa10);
    a11=parseFloat(aa11);
    a12=parseFloat(aa12);
    gotota=eval(a1 + a2 + a3 + a4 + a5 + a6 + a7 + a8 + a9 + a10 +
                a11 + a12);
    goavea=gotota/12;
    gotot=Math.round(gotota);
    goave=Math.round(goavea);
    diffavea=goavea-lsyrave;
    diffave=Math.round(diffavea);
g.  document.form1.text1.value=gotot;
    document.form1.text2.value=goave;
    document.form1.store.value=aaax;
    arraygo = new Array(13);
    arraygo[1]=a1;
    arraygo[2]=a2;
    arraygo[3]=a3;
    arraygo[4]=a4;
    arraygo[5]=a5;
    arraygo[6]=a6;
    arraygo[7]=a7;
    arraygo[8]=a8;
    arraygo[9]=a9;
    arraygo[10]=a10;
    arraygo[11]=a11;
    arraygo[12]=a12;
    minval=100000;
    maxval=0;
    mnmmax=0;
    mnmmin=0;

    for(i = 1; i <= 12; i++)
    {
    if(arraygo[i] > maxval)
    {
    mnmmax=I;
    maxval = arraygo[i];
    }
    if(arraygo[i] < minval)
    {
    mnmmin=i;
    minval = arraygo[i];
    }
    }
    rng1=maxval - minval;
    rng=Math.round(rng1);
    mnms=new Array(13);
    mnms[1]="January";
    mnms[2]="February";
    mnms[3]="March";
    mnms[4]="April";
    mnms[5]="May";
    mnms[6]="June";
    mnms[7]="July";
    mnms[8]="August";
    mnms[9]="September";
    mnms[10]="October";
    mnms[11]="November";
    mnms[12]="December";
    document.form1.themax.value=maxval;
    document.form1.themin.value=minval;
    document.form1.range.value=rng;
    document.form1.mnmmax.value=mnms[mnmmax];
    document.form1.mnmmin.value=mnms[mnmmin]; }
    </SCRIPT>
    <BODY>
    <FORM name="form1">
 h.  <!--WEBFOCUS TABLE JAVATEMP>
    <INPUT TYPE=text NAME="text1" SIZE="10"> Units sold for store
    <INPUT TYPE=text NAME="store" SIZE="10"> Monthly average of
    <INPUT TYPE=text NAME="text2" SIZE="10"><BR><BR> Top selling
          month is
    <INPUT TYPE=text NAME="mnmmax" SIZE="10"> with
    <INPUT TYPE=text NAME="themax" SIZE="10">units<BR> Slowest
          month was
    <INPUT TYPE=text NAME="mnmmin" SIZE="10"> with
    <INPUT TYPE=text NAME="themin" SIZE="10">units<BR> Range
          between best and slowest months
    <INPUT TYPE=text NAME="range" SIZE="10">units </FORM>
    </BODY>
    </HTML> 
I. -HTMLFORM END
   -EXIT

This command saves the report output with 1997 data to a temporary file named HOLD in native machine format. Since this is the only data necessary for the report, this server extract file is created to speed subsequent processing.
This code formats the report, providing descriptive column titles. The store code is the first column. The following columns contain total monthly quantity for each store.
This command saves the report output to a temporary file in HTML format. The file is named JAVATEMP. It will be merged with the HTML page created later (see item e).
The StyleSheet specifies a hyperlink to a JavaScript function named conprint. The code passes the store code and monthly values to the function.
The Dialogue Manager command -HTMLFORM BEGIN indicates the start of an HTML page in which the JavaScript function is defined. The report output will be embedded on this page.
The HTML code declares the JavaScript function and passes values to it.
JavaScript assigns variable names to values displayed on the HTML page.
WebFOCUS reads the HTML comment and replaces it with the report output held in JAVATEMP.
Note: The HTML comment line must be closed with the ---> characters or a single > character and should not have any other HTML tags within it.
The Dialogue Manager command -HTMLFORM END indicates the end of the HTML page.

Create a launch page from which a user can run the report.
Run the launch page, and click the link. The summary component displays.
Click store code R1019 for the detail component.