Have you ever looked at a report and wished you had more information about a particular piece of data, but didn’t want to go through the effort of clicking the mouse button to drill down to more detailed information? Or, relevant detailed information exists, but there may not be enough of it to warrant a drill-down to a whole new page? The following technique provides a user with pop-up information simply by moving the mouse over a specific record.

Below you’ll see a KPI report.

This report shows quickly, in a graphical form, the current status of each plant’s nine predetermined key performance metrics. In this case, the corporation has decided that Claims, Experience, Inventory, Profit, Quality, Returns, Revenue, Shipments, and Turnover Ratio are the metrics that will best show how a plant is performing. If you mouseover one of the dots, you get the actual and budgeted values for each of the intersections. This provides a great deal of added value for a few extra lines of code.

Examining the FOCEXEC

By this point, most of us are familiar with how to add a gif to represent data in a report. In this case, we are creating a rather complex DEFINE that will determine which gif gets placed onto the report based on whether or not the data is greater or less than the predetermined thresholds. What makes this report even more valuable is we’re going to be adding pop-up information to each image.

Let’s take a look at the FOCEXEC. I’m leaving the stylesheet out because there is nothing special in it.

DEFINE FILE DOT STRAT1/A300= IF ACTUAL GT HTHRES THEN '< img src="http://localhost/ibi_html/ibicc/r1.gif">' ELSE IF ACTUAL LE HTHRES AND ACTUAL GE MTHRES THEN '<img src="http://localhost/ibi_html/ibicc/g1.gif">' ELSE IF ACTUAL LT MTHRES AND ACTUAL GT LTHRES THEN '<img src="http://localhost/ibi_html/ibicc/y1.gif">' ELSE IF ACTUAL LT LTHRES THEN '<img src="http://localhost/ibi_html/ibicc/r1.gif">'; ACTUAL1/A20=FTOA(ACTUAL, '(D12.2)', ACTUAL1); BUDGET1/A20=FTOA(BUDGET, '(D12.2)', BUDGET1); SCRIPTA/A600='<a onMouseOver="return overlib(''Actual: ' ||ACTUAL1|| ' <BR>Budget: ' || BUDGET1 || ' '');" ' | 'onmouseout="return nd();">' || STRAT1 || '</a>'; END

The first section of the FOCEXEC is the DEFINE. This is where most of the work is done for this technique. The first field is STRAT1. This controls which gif is displayed on the screen. What we are more concerned with in this report is adding the mouseover for the STRAT1 field.

The first step is deciding what additional information will appear when we mouseover a given record. For our example, it’s valuable to display the actual and budgeted value for each of the records.

Since we are going to be building an anchor tag as a DEFINE field, and these values are going to be included in that DEFINE field, we need to convert both ACTUAL and BUDGET from decimal fields to alphanumeric fields. To do this, we use the FTOA function to create ACTUAL1 and BUDGET1, which now can be used in our anchor tag DEFINE.

The SCRIPTA field is going to combine our anchor tag (which contains the call to the mouseover event), the information we want to display in the pop-up box, and the image we are displaying on the page. SCRIPTA is a combination of the three previous define fields. What is returned by the OVERLIB function is actually just HTML that is hidden. Between the parentheses we write out "Actual:" then get the data, after which we add a line break (<BR>) then write out "Budget:" and getting the associated data value. We then embed the STRAT1 image field into the DEFINE and close our anchor tag.

TABLE FILE DOT SUM SCRIPTA BY MEASURE_NAME AS ' ' ACROSS D_DSP AS ' ' HEADING "Key Performance Indicators by Plant" "as of &DATE" ON TABLE SET PAGE-NUM NOLEAD ON TABLE NOTOTAL ON TABLE HOLD AS FIRST FORMAT HTMTABLE

The next section is the TABLE request. Here we are simply writing out the SCRIPTA field that contains the anchor tag with the overlib function call and the image tag. We are sorting it by a MEASURE_NAME field and then across D_DSP, which is a Dimension field. There is a heading and then we have an ON TABLE SET PAGE-NUM NOLEAD, which will minimize the space at the top of our report. The ON TABLE HOLD AS FIRST FORMAT HTMTABLE is going to hold our output in an HTML table, which we are going to be embedding into an HTMLFORM.

We now skip the WebFOCUS stylesheet section and go right to the HTMLFORM.

-HTMLFORM BEGIN <html> <head> <style> table {border-collapse: collapse;} </style> <script language="JavaScript" SRC="http://localhost/ibi_html/ibicc/JS/mouse.JS"> </script> </HEAD> <BODY> <div id="overDiv" style="position:absolute; visibility:hidden; z-index:0;"></div> !IBI.FIL.FIRST; </body> </html> -HTMLFORM END

Now we look at the HTML that will surround our report. First, we have to refer to our mouse.js file, a rather large JavaScript file found at http://www.informationbuilders.com/support/developers/files/mousover.zip. I’m not an expert in the area of JavaScripts but you don’t need to be to incorporate them into your WebFOCUS reports. I don’t remember exactly where I found this script but it works quite well with very little tinkering. The second point of interest is the <style> tag, which contains some css to shrink the grid lines. I prefer to have less space between my cells then the default. This stylesheet preference limits it. Take the <style> section out and rerun the FOCEXEC. You’ll see the difference. It’s a much cleaner report with the table collapsed.

The third point of interest in this HTMLFORM is the div.

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:0;"></div>

overDiv is the div id, and you’ll notice that the visibility property is set to hidden. This is the div we are controlling for our mouse.js. On mouseover, the script is going to change the visibility to "visible" and place within the div our HTML code that is embedded in the function call. In this case it happens to be the actual and budget values.

Finally, we need to add the WebFOCUS report that has been waiting patiently in the HOLD. To do this we just add !IBI.FIL.FIRST; to the HTML code and it will embed our report starting with a <table> tag.

Examining the JavaScript

As I’ve mentioned, I didn’t write this script, so I don’t know all the ins and outs, but I’ll go through what I do know here (the script is well commented, so you probably don’t need this):

	To change the background color of the pop-up, modify this line: if (typeof ol_fgcolor == 'undefined') { var ol_fgcolor = "#E7E7DE";}
	To change the border color: if (typeof ol_bgcolor == 'undefined') { var ol_bgcolor = "006869";}
	To change the text color: if (typeof ol_textcolor == 'undefined') { var ol_textcolor = "#000000";}
	To modify the width of the pop-up, use this line: if (typeof ol_width == 'undefined') { var ol_width = "150";}