Under the Covers: Put a Little "Zoom" in Your WebFOCUS Reports
By Brian Carter
I have often viewed pages on the Web that don't exactly fit in the given window size. I don't know about you, but I don't like to use the mouse any more than I have to. Once I get to a page, I want to sit back, relax and read the contents.
Now, wouldn't that be even more of an issue when you are analyzing your important data for your business? You'd probably like to concentrate on analyzing the data and not clicking scroll buttons over and over again to see the piece of the report that just doesn't quite fit on the screen. Let me show you a really
cool trick that will allow you to "zoom" in and out of your WebFOCUS reports and give your users customizable views.
Microsoft's Internet Explorer (IE) has built-in Cascading Style Sheet extensions that give developers a little more flexibility in styling web pages. In this case we'll use a little Jscript to dynamically change the size of all of the elements on the page or "zoom." Simply put, we can add a simple control that will
allow the user to change the zoom property for the page. Screen 1 shows a WebFOCUS report and graph that have been "zoomed" to 70 percent.
Screen 1
Let's take a look at the code. All of the FOCUS and HTML code for this report is contained in a single procedure.
1. TABLE FILE GGSALES
2. SUM UNITS
3. BY PRODUCT
4. ON TABLE SET PAGE-NUM OFF
5. ON TABLE SET STYLE *
6. TYPE=REPORT, GRID=OFF, $
7. ENDSTYLE
8. ON TABLE HOLD AS REP1 FORMAT HTMTABLE
9. END
10. GRAPH FILE GGSALES
11. SUM UNITS
12. ACROSS PRODUCT
13. ON GRAPH SET LOOKGRAPH 3DGROUP
14. ON GRAPH SET GRAPHEDIT SERVER
15. ON GRAPH SET BARNUMB OFF
16. ON GRAPH SET 3D ON
17. ON GRAPH SET VZERO ON
18. ON GRAPH SET GRID ON
19. ON TABLE HOLD AS GRPH1 FORMAT HTMTABLE
20. END
21. -HTMLFORM BEGIN
22. <html>
23. <head>
24. <title>WebFOCUS Zoom Technique</title>
25. <script>
26. //<!--
27. function changeZoom2(oSel) {
28. newZoom = oSel.options[oSel.selectedIndex].innerText
29. oZoom.style.zoom = newZoom;
30. }
31. //-->
32. </script>
33. <style type="text/css">
34. td, h1{ font: 9pt Arial, Helvetica, sans-serif; }
35. h1 {font-size: 14pt; }
36. #toolbar {
37. height: 20pt;
38. width: 1in;
39. padding: 3px;
40. background: 0033ff;;
41. border : thin outset;
42. }
43. </style>
44. </head>
45. <body>
46. <h1>WebFOCUS Zoom Control</h1>
47. <div id="toolbar">
48. <SELECT ID="percent"
onchange="changeZoom2(percent);">
49. <OPTION SELECTED>Zoom</OPTION>
50. <OPTION>10%</OPTION>
51. <OPTION>20%</OPTION>
52. <OPTION>30%</OPTION>
53. <OPTION>40%</OPTION>
54. <OPTION>50%</OPTION>
55. <OPTION>60%</OPTION>
56. <OPTION>70%</OPTION>
57. <OPTION>80%</OPTION>
58. <OPTION>90%</OPTION>
59. <OPTION>100%</OPTION>
60. <OPTION>110%</OPTION>
61. <OPTION>120%</OPTION>
62. <OPTION>130%</OPTION>
63. <OPTION>140%</OPTION>
64. <OPTION>150%</OPTION>
65. <OPTION>160%</OPTION>
66. <OPTION>170%</OPTION>
67. <OPTION>180%</OPTION>
68. <OPTION>190%</OPTION>
69. <OPTION>200%</OPTION>
70. </SELECT>
71. </div>
72. <div id="oZoom">
73. <table>
74. <tr><td>!IBI.FIL.REP1;</td>
<td>!IBI.FIL.GRPH1;</td></tr>
75. </table>
76. </div>
77. </body>
78. </html>
79. -HTMLFORM END
First of all, this procedure takes advantage of HTMLFORM, since we need a way to get our output into an existing HMTL file. The HTML target can reside in the procedure or it can be an external HTML file that resides on the Reporting Server. In this case, we're embedding the
HTML right in the procedure. Merging the report output and the HTML is easy. Lines 8 and 19 hold the report and graph output in the form of an HTML table. These HTML tables are then embedded into an HTML document using the !IBI syntax (see line 74).
The key to this technique is in the HTML. Look at lines 25-32 and you'll see we have embedded a Jscript function. Jscript is a Microsoft scripting language similar to JavaScript that offers some powerful interactive functionality based on Microsoft's Dynamic HTML Object Model. The style property of any object can be
dynamically changed through interaction with the user.
Let's look at the flow of this behavior. The user would kick things off by selecting a zoom percentage level from the dropdown control that contains an onChange event (line 48). The onChange event calls the changeZoom function on line 27, which
reads the selected percentage value and assigns it to a variable called newZoom (line 28). Line 29 then assigns the newZoom value to the <DIV> element that contains the WebFOCUS report output (line 72).
That's it. With a couple of lines of Jscript code you have a very interactive and customizable report. The zoom level is even respected when the page is printed. So, not only does this assist in viewing the report, it can also help customize the printing process as well. Have fun and keep looking "Under the Covers"
for more tips, tricks, and techniques!
 
|
