A More Meaningful Accordian Report

A More Meaningful Accordian Report

By Alan Bell

Problem:

When viewing accordion reports, the initial results look quite bland to the users, omitting the ‘wow’ factor that should accompany the efforts of the developer.

(image#1)

It would be more informative for the user if the initial view gave a better introduction to the data:

(image#2)

However, there is no functionality within WebFOCUS to achieve this.  This is where the integration of WebFOCUS and the other web languages can help.

Solution:

A simple addition to the report code. Change the value in ‘columnsToOpen’ to any value required:

-* File accordianReport.fex
SET STYLEMODE=PAGED
SET JSURL=../../baseapp/expandAccordian.js
DEFINE FILE CAR
varToJS/A40 = 
   '<script>var columnsToOpen=1;</script>';
END
TABLE FILE CAR
ON TABLE SUBFOOT
"<varToJS"
SUM SALES BY COUNTRY
SUM SALES BY COUNTRY BY CAR
PRINT
     SALES RCOST DCOST
BY COUNTRY
BY CAR
BY MODEL
BY BODYTYPE
ON TABLE SET PAGE-NUM OFF
ON TABLE SET EXPANDABLE ON
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     UNITS=IN,
     LEFTMARGIN=0.250000,
     RIGHTMARGIN=0.250000,
     TOPMARGIN=0.250000,
     BOTTOMMARGIN=0.250000,
     SQUEEZE=ON,
     ORIENTATION=PORTRAIT,
$
TYPE=REPORT,
     FONT='ARIAL',
     SIZE=10,
     COLOR='BLACK',
     BACKCOLOR='NONE',
     STYLE=NORMAL,
     RIGHTGAP=0.125000,
$
TYPE=DATA,
     SIZE=8,
     BACKCOLOR=( RGB(234 234 255) 'WHITE' ),
$
TYPE=TITLE,
     BORDER=LIGHT,
     BORDER-STYLE=RIDGE,
     BORDER-COLOR=RGB(51 51 153),
     SIZE=9,
     COLOR='WHITE',
     BACKCOLOR=RGB(147 172 219),
     STYLE=BOLD,
$
TYPE=TABHEADING,
     SIZE=9,
     STYLE=BOLD,
$
TYPE=TABFOOTING,
     SIZE=9,
     STYLE=BOLD,
$
TYPE=HEADING,
     BORDER=LIGHT,
     BORDER-STYLE=RIDGE,
     BORDER-COLOR=RGB(51 51 153),
     SIZE=12,
     COLOR='WHITE',
     BACKCOLOR=RGB(147 172 219),
     STYLE=BOLD,
     JUSTIFY=CENTER,
$
TYPE=HEADING,
     LINE=1,
     SIZE=14,
$
TYPE=FOOTING,
     BORDER=LIGHT,
     BORDER-STYLE=RIDGE,
     BORDER-COLOR=RGB(51 51 153),
     COLOR='WHITE',
     BACKCOLOR=RGB(147 172 219),
     STYLE=BOLD,
$
TYPE=SUBHEAD,
     SIZE=9,
     STYLE=BOLD,
$
TYPE=SUBFOOT,
     BORDER=LIGHT,
     BORDER-STYLE=RIDGE,
     BORDER-COLOR=RGB(51 51 153),
     SIZE=9,
     COLOR='WHITE',
     BACKCOLOR=RGB(147 172 219),
     STYLE=BOLD,
$
TYPE=SUBTOTAL,
     SIZE=8,
     STYLE=BOLD,
$
TYPE=ACROSSVALUE,
     SIZE=8,
     STYLE=BOLD,
$
TYPE=ACROSSTITLE,
     SIZE=8,
     STYLE=BOLD,
$
TYPE=GRANDTOTAL,
     SIZE=9,
     STYLE=BOLD,
$
ENDSTYLE
END

And a small JaveScript file, about 30 lines without the comments, which will work for any report:

// expandAccordian.js

function expandAccordian(){
	var i=0, s, t, u;
		// Get an array of all the td tags in the document.
	var allTD = document.getElementsByTagName("td");
		// How many td tags are there
	var numTD = allTD.length;
		// Loop through all the td tags
	for (i=0; i < numTD-1; ++i) 
	{
	   // First of 3 checks - if the td tag doesn't have an image,
       // go to next iteration
	  if (allTD[i].getElementsByTagName("img").length == 0) continue;
	   // Second of 3 checks - if
       // there is no attributeibiattr in the td, go to next iteration
	  if (allTD[i].getAttribute("ibiattr") == 0) continue;
	   // Third of 3 checks - if
       // the attribute ibiattrc in the td has a value greater than the
	   // column to expand, go to next iteration
	  if (allTD[i].getAttribute("ibiattrc") > columnsToOpen) continue;
	  // get the a (anchor) tag within the td
	  s=allTD[i].getElementsByTagName("a");
	  // get the href within the a tag
	  t=s[0].getAttribute("href");
	  // substring the href to get the call to the
      // WebFOCUS expand function
	  u=t.substring(11,t.length);
	  // use eval to call the function
	  eval(u)
	  // remove the link to stop user contracting the report - optional
	  allTD[i].removeChild(s[0]);
	  }
	 // border.collapse causes issues on Firefox
	if(navigator.userAgent.indexOf("Firefox")!=-1)
 document.getElementsByTagName("table")[0].style.borderCollapse="separate";
	}
	
// Standard x-browser event loader
function addEvent(obj, evType, fn){
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, true);
    return true;
 } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
 } else {
    return false;
 }
}

// Add event to run the expand function after the page loads.
addEvent(window, 'load', expandAccordian);

This code will work for any accordion report, in any WebFOCUS environment.

If any questions, please contact Alan at alan.bell@mac.com or AlanInPortugal@btinternet.com.