[CLOSED] Accordian - Is it possible set default to expand all?

September 30, 2009, 10:13 AM

Cyril Joy

Hi,

I have an accordian report. I need the report to be expanded fully by default to the lowest level, but should have the option to go back to the highest level.

I have seen the following option using javascript to expand to a required level, but i cannot use that if i need to go back to the highest level. Please let me know.

SET STYLEMODE=PAGED

TABLE FILE 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 HOLD AS TEST 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

-HTMLFORM BEGIN

<script>
var columnsToOpen=3;

<script LANGUAGE='JAVASCRIPT'>
function clickItemsOpen()
{
var i=0;
var s='';
var t='';
var u='';

var allTD = document.getElementsByTagName('td');
var numTD = allTD.length;
for (i=0;i{
if (allTD[i].getElementsByTagName('img').length == 0)
continue;
if (allTD[i].getAttribute('ibiattr') == 0)
continue;
if (allTD[i].getAttribute('ibiattrc') > columnsToOpen)
continue;
s=allTD[i].getElementsByTagName('a');
t=s[0].getAttribute('href');
u=t.substring(11,t.length);
eval(u);
allTD[i].removeChild(s[0]);
}
if(navigator.userAgent.indexOf('Firefox')!=-1)
document.getElementsByTagName('table')[0].style.borderCollapse='separate';
}

!IBI.FIL.TEST;

-HTMLFORM END

This message has been edited. Last edited by: Kerry,

September 30, 2009, 12:44 PM

Francis Mariani

Cyril,

Because you're HOLDing the report as HTML, the result is a complete web page. When the HTML file is dropped in to the HTMLFORM, it's not going to trigger anything else going on within the HTMLFORM. Do a View Source to see what the complete page looks like.

A quick solution is below. Move the !IBI.FIL to before your JavaScript and also add a window.onload event handler to trigger execution of your function. (There was a small error in the for statement):

SET STYLEMODE=PAGED

TABLE FILE 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 HOLD AS TEST 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
-RUN

-HTMLFORM BEGIN

!IBI.FIL.TEST;

<script type="text/javascript">
var columnsToOpen=3;

window.onload = clickItemsOpen;

function clickItemsOpen()
{
var i=0;
var s='';
var t='';
var u='';

var allTD = document.getElementsByTagName('td');

for (i=0; i<allTD.length; i++)
  {
  if (allTD[i].getElementsByTagName('img').length == 0)
  continue;
  if (allTD[i].getAttribute('ibiattr') == 0)
  continue;
  if (allTD[i].getAttribute('ibiattrc') > columnsToOpen)
  continue;
  s=allTD[i].getElementsByTagName('a');
  t=s[0].getAttribute('href');
  u=t.substring(11,t.length);
  eval(u);
  allTD[i].removeChild(s[0]);
  }

if(navigator.userAgent.indexOf('Firefox') != -1)
  document.getElementsByTagName('table')[0].style.borderCollapse='separate';
}
</script>

-HTMLFORM END

With this solution, the accordion report opens as you wanted, but the HTML page is not properly formed. For example, this is not proper:

...
</BODY>
</HTML>
 
<script type="text/javascript">
var columnsToOpen=3;
...

because < /HTML > indicates the end of the html, but there's more code...

To create a properly formed HTML file, I would use FORMAT HTMTABLE. This does not create the HTML and BODY tags, so you can plonk the HOLD file anywhere within an HTML page. Unfortunately, a little more code needs to be added to the page (this code is automatically generated when using FORMAT HTML);

SET STYLEMODE=PAGED

TABLE FILE 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 HOLD AS TEST FORMAT HTMTABLE
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
-RUN

-HTMLFORM BEGIN
<html>
<head>
<META name="HandheldFriendly" content="True">
<META name="PalmComputingPlatform" content="True">
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<TITLE>WebFOCUS Report</TITLE>
<BASE HREF="http://localhost:8080/approot/App/">
<script type="text/javascript">
var ibiOptions = new Array("expandable");
var focexurl = "/ibi_apps/WFServlet?";
var fochtmlurl = "/ibi_html";
var serverLanguage='en';
</script>
<script type="text/javascript" src='/ibi_html/javaassist/nls.js'></script>
<script type="text/javascript" src='/ibi_html/javaassist/ibi/html/js/ibigbl.js'></script>

<script type="text/javascript">
var columnsToOpen=3;

function clickItemsOpen()
{
var i=0;
var s='';
var t='';
var u='';

var allTD = document.getElementsByTagName('td');

for (i=0; i<allTD.length; i++)
  {
  if (allTD[i].getElementsByTagName('img').length == 0)
  continue;
  if (allTD[i].getAttribute('ibiattr') == 0)
  continue;
  if (allTD[i].getAttribute('ibiattrc') > columnsToOpen)
  continue;
  s=allTD[i].getElementsByTagName('a');
  t=s[0].getAttribute('href');
  u=t.substring(11,t.length);
  eval(u);
  allTD[i].removeChild(s[0]);
  }

if(navigator.userAgent.indexOf('Firefox') != -1)
  document.getElementsByTagName('table')[0].style.borderCollapse='separate';
}
</script>
</head>

<body onLoad="clickItemsOpen();">
!IBI.FIL.TEST;
</body>
</html>
-HTMLFORM END

September 30, 2009, 01:22 PM

Cyril Joy

I think I did not mention the issue clearly:
If you run the following code, you can see that the report can be expanded to multiple levels. I need the initial report to be generated as expanded to the lowest level(BODYTYPE). Here you can see that I can colapse and expand to any level.

TABLE FILE CAR
SUM RETAIL_COST
BY COUNTRY
SUM RETAIL_COST
BY COUNTRY
BY CAR
SUM RETAIL_COST
BY COUNTRY
BY CAR
BY MODEL
SUM RETAIL_COST
BY COUNTRY
BY CAR
BY MODEL
BY BODYTYPE
ON TABLE SET EXPANDABLE ON
ON TABLE SET PAGE-NUM OFF
ON TABLE NOTOTAL
END
-EXIT

September 30, 2009, 02:42 PM

Francis Mariani

TABLE FILE CAR
SUM RETAIL_COST
BY COUNTRY
SUM RETAIL_COST
BY COUNTRY
BY CAR
SUM RETAIL_COST
BY COUNTRY
BY CAR
BY MODEL
SUM RETAIL_COST
BY COUNTRY
BY CAR
BY MODEL
BY BODYTYPE
ON TABLE SET EXPANDABLE ON
ON TABLE SET PAGE-NUM OFF
ON TABLE NOTOTAL
ON TABLE HOLD AS H001 FORMAT HTML
END
-RUN

-HTMLFORM BEGIN
!IBI.FIL.H001;

<script type="text/javascript">

window.onload = openAll;

function openAll()
{
a = (document.getElementsByTagName("A"));

for (i=0; i<a.length; i++)
  {
  x = a[i].href;
  var f = x.split(':');
  eval(f[1]);
  }
}
</script>

-HTMLFORM END

September 30, 2009, 03:49 PM

Cyril Joy

Wow.. Thanks!

September 30, 2009, 04:04 PM

Francis Mariani

The function runs the JavaScript contained within the HREF of each ANCHOR (the toggle image). Because the HREF contains "javascript" (e.g.: javascript:toggle("table1","by_1_1_1");), I use the split function to split the href at the ":" and then execute the second part (e.g.: toggle("table1","by_1_1_1");).