Cómo añadir JavaScript a la generación de informes de drill-down

Este tema explica el uso de JavaScript para crear un informe de drill-down. Describe cómo llamar a la función JavaScript y pasarle valores desde el componente de resumen del informe, y así determinar el contenido del componente detallado de forma dinámica.

Veamos cómo especificar un hipervínculo a una función JavaScript en una hoja de estilos del procedimiento. Una vez definido el hipervínculo, el usuario puede seleccionar el objeto asociado en el informe para ejecutar la función.

Para más detalles sobre las capacidades y la sintaxis de JavaScript, consulte su documentación de JavaScript.

Sintaxis: Cómo Especificar un hipervínculo a una función JavaScript

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

donde:

type

Es el componente de informe que hace de hipervínculo. El atributo TYPE y su valor deben estar colocados al principio de la hoja de estilos.

Por ejemplo, use TYPE=DATA para configurar un hipervínculo desde un campo de datos de un informe, o TYPE=REPORT, para configurarlo desde cualquier componente de un informe.

fieldname

Es el nombre del campo del origen de datos cuyo valor, cuando está seleccionado, ejecuta el hipervínculo.

func

Es el nombre de la función JavaScript.

La longitud máxima del código de JAVASCRIPT=func es de 800 caracteres, incluidos los valores pasados. El código puede ocupar más de una línea. Si lo divide en una línea, use el carácter de barra diagonal inversa como continuación del carácter, al final de la primera línea. Si divide una línea en un punto que requiere un espacio, éste debe estar situado antes de la barra diagonal inversa o ser el primero de la próxima línea.

En este ejemplo,

JAVASCRIPT=myfunc(COUNTRY
\CAR MODEL),$

el código está ocupando dos líneas de forma correcta.

value

Es un valor (o valores) pasado a la función JavaScript. Especifique un valor siguiendo uno de estos métodos:

Como nombre de una columna de informe.
Como constante. Debe encerrar el valor entre comillas simples.
Como variable de ampersand de Dialogue Manager. Sólo se puede especificar una variable de ampersand en una hoja de estilos que forme parte del procedimiento (en línea).

Las variables ampersand se suelen utilizar para pasar un valor constante, en cuyo caso tendría que estar entre comillas simples; por ejemplo, '&ABC'.

Principio de página

Ejemplo: Cómo crear un informe de drill-down con JavaScript

En este ejemplo, el componente de resumen de un informe de drill-down muestra los pedidos mensuales por cada código de establecimiento. Cuando el usuario selecciona un código de establecimiento determinado, un hipervínculo llama a la función JavaScript que realiza los cálculos de los datos y muestra información detallada sobre dicho establecimiento.

Cree un procedimiento llamado JDRILL. Las letras de la izquierda se corresponden con las notas que explican el código.

   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

Este comando guarda la salida del informe con 1997 datos en un archivo temporal llamado HOLD, en el formato nativo de equipo. Puesto que éstos son los únicos datos necesarios para el informe, se crea este archivo de extracción de servidor para acelerar el procesamiento posterior.
Este código aplica un formato al informe e incluye títulos de columnas descriptivos. La primera columna está dedicada a los códigos de establecimiento. Las columnas siguientes contienen la cantidad total, mensual de cada establecimiento.
Este comando guarda la salida del informe en un archivo temporal, en formato HTML. El archivo se llama JAVATEMP. Más adelante, quedará fusionado con la página HTML que vamos a crear (consultar elemento e).
La hoja de estilos especifica un hipervínculo a una función JavaScript llamada conprint. Este código pasa el código de establecimiento y los valores mensuales a la función.
El comando -HTMLFORM BEGIN de Dialogue Manager señala el comienzo de una página HTML, desde la que se define la función JavaScript. La salida del informe quedará insertada en esta página.
El código HTML declara la función JavaScript y le pasa valores.
JavaScript asigna nombres de variables a los valores que aparecen en la página HTML.
WebFOCUS lee el comentario HTML y lo remplaza con la salida del informe situada en JAVATEMP.
Nota: La línea de comentarios HTML debe cerrarse con una etiqueta de cierre de comentario (-->) o un corchete angular de cierre (>), sin ninguna otra etiqueta HTML.
El comando -HTMLFORM END de Dialogue Manager señala el final de la página HTML.

Cree una página de inicio en que el usuario pueda ejecutar el informe.
Ejecute la página de inicio y pulse el vínculo. Aparece el componente de resumen.
Pulse el código de establecimiento R1019 para ver el componente de detalle.