mouseover display

June 03, 2007, 11:42 AM

FrankDutch

mouseover display

I have a report like this

TABLE FILE WHATEVER
SUM SALES NOPRINT
NUMBER NOPRINT
COMPUTE AVSAL=SALES/NUMBER; NOPRINT
CNT.CLIENTS
BY COUNTRY
ACROSS DEPARTMENT
END

I can show all the fields, but that will be to much.
What I would like to see is something like

"Sales: xxx"
"number: yyy"
"average: bbb"
"perc total: x%"

In a little box when I click on the number in the report or even better when I do a mouse-over.
The box might have different colors depending on certain figures (above 10% is green, below 5% is red...)

Any idea how to do this?

After a click you can also drill down to an other report.

June 04, 2007, 08:03 AM

hammo1j

The technique seems to be - code it first as an HTML table and get that to work. Then code in wf with DEFINE file being used to build up the HTML string.

Unfortunately my HTML not good enough to give you the HTML code!

June 04, 2007, 08:30 AM

Tony A

Hi Frank,

A quick bit of code for you to play with. It has an advantage in that it builds a dynamic DIV for the message so the first thing it does is to destroy any existing one, so you do not have to "create" one in WF first.
The two commented lines in the script should work but the version of IE I have here doesn't like it so have a play.

DEFINE FILE CAR
  MODEL_OVER/A250 = '<a href='||''''||'javascript:CrMsgDiv("Country='
        ||COUNTRY||'<br>Model='||MODEL||'",200,50)'||''';>'||MODEL||'</a>';
END

TABLE FILE CAR
SUM RCOST
    DCOST
 BY COUNTRY
 BY CAR
 BY MODEL_OVER AS MODEL
ON TABLE SET HTMLCSS ON
ON TABLE HOLD AS MYHTML FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title>Mouseover for Frank</title>
<script>
    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=#f0f5ff 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=center>";
      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 + 10 + document.body.scrollLeft;
      MsgDiv.style.width=width;
      MsgDiv.style.height=height;
    }
</script>
</head>
<body>
!IBI.FIL.MYHTML;
</body>
</html>
-HTMLFORM END

June 04, 2007, 08:34 AM

Alan B

Frank

Here is a simple basis of something I ahve used in the past. I prefer the onclick event to the onmouseover.

TABLE FILE CAR
SUM     SALES
    CNT.SALES
COMPUTE
AVSAL/F8.2 = C1/C2;
COMPUTE
SPANBOX/A1000 = '<span> COUNTRY:'|COUNTRY|'<BR>SALES:'|EDIT(C1)|'<BR>COUNT:'|EDIT(C2)|'</span>';
BY COUNTRY
BY CAR
ON TABLE SAVE
END
-RUN
-SET &LOOP=&LINES;
-HTMLFORM BEGIN
<html>
<head>
<script language=javascript>
window.onload = init;
function init() {
  if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onmousemove = getXY;
}

function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
}
function textOver(msg){
textBox=document.getElementById("textbox");
textBox=document.getElementById("textbox");
textBox.style.top=y-10;
textBox.style.left=10;
textBox.innerHTML=document.getElementById(msg).innerHTML;
textBox.style.visibility='visible';
}

function textOut() {
textBox=document.getElementById("textbox");
textBox.innerHTML='<br>';
textBox.style.visibility='hidden';
}
</script>
</head>
<body>
<span id="textbox" onclick="javascript:textOut();" style="position:absolute;visibility:hidden;width:120px;height:200px;background-color:black;color:white;" ><br></span>
<div style="width:100%">
<table><tr>
<td style="width:200px">country</td>
<td style="width:150px">car</td>
</tr>
-SET &CNTR=0;
-REPEAT :LOOP &LOOP TIMES
-SET &CNTR=&CNTR+1;
-READ SAVE &CTRY.10 &CAR.16 &dum.19 &BOX.1000
<tr>
<td style=" " onclick="javascript:textOver('box_!IBI.AMP.CNTR;');">!IBI.AMP.CTRY;</td>
<td style=" ">!IBI.AMP.CAR;</td>
<td id="box_!IBI.AMP.CNTR;" style="display:none">!IBI.AMP.BOX;</td>
</tr>
-:LOOP
</table>
</div>
</body>
</html>
-HTMLFORM END

June 04, 2007, 09:10 AM

<Marcel Naumann>

Frank,
a way is to create a new field and visualize it (.gif, .jpg) with an alternate attribute on it. This only works if your report is in HTML!

This is a classic one, have a good look at the concatenation here:

DEFINE FILE CAR
IMAGE/A150=IF SALES GT 10000 THEN ' '<BR>|CAR<BR>|'

'
ELSE '

';
END

TABLE FILE CAR
PRINT IMAGE
BY COUNTRY
END

Since you edit a new field, you can do whatever with it, drilldowns etc.

You can also do this with JavaScript, not sure if you want to do this.

Nice pics of Summit on your site, by the way.

Best regards,
Marcel

June 04, 2007, 10:03 AM

Tony A

Thanks Alan,

Your post reminded me why the div positioning didn't work

Frank,

The equivalent sample using mouseover events -

TABLE FILE CAR
PRINT
    COMPUTE RCOSTA/A17 =FTOA(RCOST, '(D12)', 'A17'); NOPRINT
    COMPUTE DCOSTA/A17 =FTOA(DCOST, '(D12)', 'A17'); NOPRINT
    COMPUTE MOUSE_OVER/A250 = '<img border=0 src=/ibi_html/point.gif width=10 height=18 onmouseover='
            ||''''||'javascript:CrMsgDiv("Model='||MODEL||'<br>Retail Cost='||RCOSTA
            ||'<br>Dealer Cost='||DCOSTA||'",200,50)'||'''; />';
    AS ''
 BY COUNTRY
 BY CAR
 BY MODEL NOPRINT
ON TABLE SET HTMLCSS ON
ON TABLE HOLD AS MYHTML FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title>Mouseover for Frank</title>
<script>
window.onload = init;
    function init() {
      if (window.Event) {
        document.captureEvents(Event.MOUSEMOVE);
      }
      document.onmousemove = getXY;
    }

    function getXY(e) {
      x = (window.Event) ? e.pageX : event.clientX;
      y = (window.Event) ? e.pageY : event.clientY;
    }

    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=#f0f5ff 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=center>";
      MsgHTML+= text;
      MsgHTML+= "</td></tr></table></body></html>";
      MsgDiv.innerHTML = MsgHTML;
      document.body.appendChild(MsgDiv);
      MsgDiv.style.position='absolute';
      MsgDiv.style.top=y + 10 + document.body.scrollTop;
      MsgDiv.style.left=x + 10 + document.body.scrollLeft;
      MsgDiv.style.width=width;
      MsgDiv.style.height=height;
    }
</script>
</head>
<body>
!IBI.FIL.MYHTML;
</body>
</html>
-HTMLFORM END

June 04, 2007, 01:38 PM

Alan B

This is very nice Tony,

May I make a couple of additions/changes.

TABLE FILE CAR
PRINT
    COMPUTE RCOSTA/A17 =FTOA(RCOST, '(D12)', 'A17'); NOPRINT
    COMPUTE DCOSTA/A17 =FTOA(DCOST, '(D12)', 'A17'); NOPRINT
    COMPUTE MOUSE_OVER/A250 = '<img border=0 src=/ibi_html/point.gif width=10 height=18 onmouseover='
            ||''''||'javascript:CrMsgDiv("Model='||MODEL||'<br>Retail Cost='||RCOSTA
            ||'<br>Dealer Cost='||DCOSTA||'",200,50)'||'''; />';
    AS ''
 BY COUNTRY
 BY CAR
 BY MODEL NOPRINT
ON TABLE SET HTMLCSS ON
ON TABLE HOLD AS MYHTML FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title>Mouseover for Frank</title>
<script>
window.onload = init;
    function init() {
      if (window.Event) {
        document.captureEvents(Event.MOUSEMOVE);
      }
      document.onmousemove = getXY;
    }

    function getXY(e) {
      x = (window.Event) ? e.pageX : event.clientX;
      y = (window.Event) ? e.pageY : event.clientY;
    }

    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');
// remove the html and body tags, not required.
      var MsgHTML = "<table width=100% height=100% bgcolor=#f0f5ff 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; ";
// add code to call hide function
      MsgHTML+= "TEXT-DECORATION:none;'><tr><td align=center onmouseout='javascript:hideMsgDiv()'>";
      MsgHTML+= text;
      MsgHTML+= "</td></tr></table>";
      MsgDiv.innerHTML = MsgHTML;
      document.body.appendChild(MsgDiv);
      MsgDiv.style.position='absolute';
      MsgDiv.style.top=y + 10 + document.body.scrollTop;
      MsgDiv.style.left=x + 10 + document.body.scrollLeft;
      MsgDiv.style.width=width;
      MsgDiv.style.height=height;
    }
// hide function, taken directly from Tony's create function!
    function hideMsgDiv() {
      var RemDiv = document.getElementById('MsgDiv');
      if (RemDiv) {
        document.body.removeChild(RemDiv);
      }
    }

</script>
</head>
<body>
!IBI.FIL.MYHTML;
</body>
</html>
-HTMLFORM END

(I don't know whether everyone will get it, but instead of the img tag on the MOUSE_OVER field, a div tag can be used instead, with a field value displayed.)

Thank you Tony.

	*Frank*
	prod: WF 7.6.10 platform Windows, databases: msSQL2000, msSQL2005, RMS, Oracle, Sybase,IE7 test: WF 7.6.10 on the same platform and databases,IE7

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10