Focal Point
[CLOSED] DrillMenuItem Not Working

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/187103952

October 06, 2009, 09:57 AM
Tewy
[CLOSED] DrillMenuItem Not Working
I'm building a webpage with mulitple lines of data on it, some of which need to be hidden when the page loads. I've copied some code I've found on the forum and created a page that looks and works as required. I now want to add a multiple drill down. However I keep getting the Javascript error message object expected when I save the output as HTMTABLE if I use HTML I lose my styling but the multiple drill down works.

I've created some code using the CAR file which demonstrates what I'm doing.

Can anyone point out what I'm doing wrong?

Thanks,

  
DEFINE FILE CAR
CONTINENT/A15=IF COUNTRY EQ 'JAPAN' THEN 'ASIA' ELSE 'EUROPE';
NOTE/A250 ='Country: '|COUNTRY;
END
-RUN
TABLE FILE CAR
PRINT
RCOST
DCOST
NOTE
COMPUTE COUNTER/I4 = COUNTER + 1;
COMPUTE ID1/I4=IF COUNTRY NE LAST COUNTRY THEN LAST ID1+1 ELSE ID1;
COMPUTE ID/A4=EDIT(ID1);
BY CONTINENT
BY COUNTRY
BY MODEL
BY BODYTYPE
ON TABLE HOLD FORMAT ALPHA
END
-RUN
DEFINE FILE HOLD
LINK_OPEN/A200 = IF NOTE EQ '' THEN '' ELSE
  '<img id="idI' || EDIT(COUNTER) ||
  '" src="/approot/cldrphold/images/plus.gif" width="9" height="9"' ||
  ' alt="Click here for Details"'||
  ' onClick="fnToggle(''' || EDIT(COUNTER) || ''')">';
NOTE_EXTRA/A999 = IF NOTE EQ '' THEN '' ELSE
  '</TD>' ||
  '<tr><td></td><td></td><td colspan=3 class="cssDetail">' ||
  '<div id="idC' || EDIT(COUNTER) || '" style="display: ''none'';">' ||
  NOTE ||
  '</div>' ||
  '</td></tr>';
 Key/A4         = ID;
 Id/A4          = CTRAN(4,Key,32,95,Id) ;
ShowDetail/A100 = '<input type=checkbox onclick="funShowHide(this.checked,''' | Id | ''')">' ;
Control/A60    = '<input type=hidden name="' | Id | '">' ;
IMGNM/A20='grecircsame.png';
IMG/A100='<IMG BORDER="0" SRC="/approot/cldrphold/images/'||IMGNM||'">';
KPI/A10='KPI';
MOUSEOVER/A1000 =
'<span style="cursor: hand;" onMouseover="CrMsgDiv(''' ||
COUNTRY || ''',450,75);" onMouseout="document.body.removeChild(MsgDiv);">' ||
CONTINENT ||'</span>';
END
-RUN
TABLE FILE HOLD
PRINT
LINK_OPEN                AS ''
KPI                      AS ''
MODEL                    AS ''
BODYTYPE                 AS ''
Control                  AS ''
NOTE_EXTRA               AS ''
BY CONTINENT NOPRINT
BY MOUSEOVER NOPRINT
BY ID NOPRINT
BY COUNTRY NOPRINT
BY MODEL NOPRINT
BY BODYTYPE NOPRINT
BY COUNTER NOPRINT
ON CONTINENT  SUBHEAD
"<CONTINENT"
ON MOUSEOVER  SUBHEAD
"<ShowDetail <IMG> <MOUSEOVER> "
ON TABLE HOLD AS HOLD01 FORMAT HTMTABLE
ON TABLE SET HTMLCSS ON
ON TABLE SET PAGE NOLEAD
ON TABLE SET STYLE *
TYPE=REPORT,  GRID=OFF, SQUEEZE=ON,$
TYPE=HEADING, CLASS=cssHeading, $
TYPE=TITLE,   CLASS=cssTitle, $
TYPE=DATA, CLASS=cssHide, COLOR=BLACK, BACKCOLOR=SILVER, $
TYPE=SUBHEAD, BY=CONTINENT, CLASS=xa title,$
TYPE=SUBHEAD, BY=MOUSEOVER, CLASS=xb title, 
DRILLMENUITEM='Drill Down',FOCEXEC=TEST(LEVEL=N7 GRP=COUNTRY), 
DRILLMENUITEM='Drill Up',FOCEXEC=TEST(LEVEL=N7 GRP=COUNTRY),$
ENDSTYLE
END
-HTMLFORM BEGIN
<html>
<head>
<title>Design 2</title>

<script language="JavaScript">
  function CrMsgDiv(text,width,height) 
    {
      var RemDiv = document.getElementById('MsgDiv');
      if (RemDiv) {
        document.body.removeChild(RemDiv);
                  }
      var MsgDiv = document.createElement('div');
      MsgDiv.setAttribute('id', 'MsgDiv');
      var MsgHTML = "<html><head></head><body>";
      MsgHTML+= "<table width=100% height=100% bgcolor=#ffffff style='BORDER-TOP:2px groove; ";
      MsgHTML+= "BORDER-LEFT:2px groove; BORDER-RIGHT:2px groove; BORDER-BOTTOM:2px groove; ";
      MsgHTML+= "FONT-WEIGHT:400; FONT-SIZE:10pt; FONT-STYLE:normal; FONT-FAMILY:MS Sans Serif; ";
      MsgHTML+= "TEXT-DECORATION:none;'><tr><td align=left>";
      MsgHTML+= text;
      MsgHTML+= "</td></tr></table></body></html>";
      MsgDiv.innerHTML = MsgHTML;
      document.body.appendChild(MsgDiv);
      MsgDiv.style.position='absolute';
      MsgDiv.style.top=event.clientY + 10 + document.body.scrollTop;
      MsgDiv.style.left=event.clientX + 15 + document.body.scrollLeft;
      MsgDiv.style.width=width;
      MsgDiv.style.height=height;
    }
function fnToggle(vCounter)
{
vDIV = eval("idC" + vCounter);
vIMG = eval("idI" + vCounter);
if (vDIV.style.display == 'none')
  {
  vDIV.style.display = '';
  vIMG.src = "/approot/cldrphold/images/minus.gif";
  }
else
  {
  vDIV.style.display = 'none';
  vIMG.src = "/approot/cldrphold/images/plus.gif";
  }
}
 function funShowHide(_State,_Key) {
  var _Lines = document.getElementsByName(_Key) ;
  for (_c1=0;_c1<_Lines.length;_c1++) {
    var _TD = _Lines[_c1].parentElement ;
    var _TR = _TD.parentElement ;
    for (_c2=0;_c2<_TR.childNodes.length - 1 ; _c2++) {
      _TR.childNodes[_c2].className=_State?'cssShow':'cssHide';
    }
  }
 }
</script>
<style>
TABLE
{
cellpadding:0px;
cellspacing:0px;
border-collapse: collapse;
font-size:12px;
width:100%;
}

.cssHeading
  { font-size: 12pt; font-weight: bold; color:black; background-color: white;}
.cssTitle
  { font-weight: bold;
    text-decoration:none;  }
.cssDetail
  { font-size: 10pt;}
body {
 margin: 0;
 padding: 0;
 }
.cssHide 
  { display: none ; }
.cssShow 
  {  display: inline ;
   	background-color:#d3d3d3;
 	font-size: 11pt; }
a.title:link {
text-decoration: none;
color:white;
cursor:help;
}
a.title:visited{
text-decoration: none;
color:white;
cursor:help;
}
a:link{
color:white;
}
a:visited{
color:white;
}
.xb {
background-color:#828282 ;
color:white;
font-weight:bold;
font-size:14px;
vertical-align:middle;
}
.xa {
background-color:black;
color:white;
font-weight:bold;
font-size:14px;
}
</style>
</head>
<body>
<div style="position: absolute; z-index:-1000; left: 5; top: 70;">
!IBI.FIL.HOLD01;
</div>
</html>
-HTMLFORM END

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


WF 7.6.11
Output: HTML, PDF, Excel
October 06, 2009, 10:25 AM
Tewy
I've found the issue is because the following javascript is not in the html when using htmtable


<script language='javascript'>
var ibiOptions = new Array("multidrill");
var focexurl = "/ibi_apps/WFServlet?IBIF_webapp=/ibi_apps&IBIC_server=EDASERVE&IBIWF_msgviewer=OFF&IBIAPP_app=kpi&";
var fochtmlurl = "/ibi_html";
var serverLanguage='en';
</script>
<script language='javascript' src='/ibi_html/javaassist/nls.js'></script>
<script language='javascript' src='/ibi_html/javaassist/ibi/html/js/ibigbl.js'></script>


and the

  <BODY ONLOAD='ibigblOnLoad();'>



I've now manually copied these into my -HTMLFORM and its working. Is there something I'm supposed to be doing to include these functions with HTMTABLE?


WF 7.6.11
Output: HTML, PDF, Excel
October 06, 2009, 10:36 AM
Francis Mariani
My (educated?) guess is that you have to manually add the JavaScript when using HTMTABLE. I'm not sure if this is documented anywhere.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
October 06, 2009, 10:43 AM
GamP
Yes, HTMTABLE is exactly what it promises - it is only the table that holds the result, not the surrounding matter, like the html, body, head, title, and script tags.
This is because by using HTMTABLE you actually tell focus that you will be doing all the other stuff in the result page yourself.


GamP

- Using AS 8.2.01 on Windows 10 - IE11.
in Focus since 1988