Back

More on the javascript function show_hide




Creating collapsible/expandable HTML text with RPG and javascript

As web toolkits like CGIDEV2 and other web products are finding their way into iSeries shops, it is changing the way data is presented and distributed in these organizations.

In this example, I illustrate the use of a small javascript function that can create collapsible/expandable sections in an HTML document.   The interesting feature, that this example illustrates, is the ability to hide HTML text within the document until the user requests it with a click of the mouse.  When clicked, the text is revealed. In this way the user does not need to access the HTTP server for each request.  It also makes it possible to present many pages of data without initially overwhelming the user with details.

The document itself is generated dynamically using RPGLE with CGIDEV2.   It may be then viewed on a web server or emailed to designated recipients.

region: Canada
region: East
region: Europe
region: Internatl
region: NorthEast
region: SouthWest


This is the HTML skeleton program required for the CGIDEV2 programs. It is stored on the IFS as file /CgidevExt/pgm60ifs.html.


<AS400>top
Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<AS400>Javascript
<script TYPE="text/JavaScript">
function show_hide(id, show)
{
if (el = document.getElementById(id))
{
if (null==show) show = el.style.display=='none';
el.style.display = (show ? '' : 'none');
}
}
</script>

<AS400>Style
<style type="text/css">
table
{
border-style: outset;
width: 800;
}
table td
{
background-color: f0f8ff;
}
</style>

<AS400>StartBody
</head>
<body>

<AS400>Header1
<h2>Shipping Report</h2>


<AS400>NewRegion
Region:
<a href="javascript:show_hide('section/%seq%/');"> /%REGN07%/ </a><br>
<div id="section/%seq%/" style="display:none">
<table class="sample">

<AS400>ShipDetails
<tr>
<td width = "50"> /%ORDNM07%/ </td>
<td width = "200"> /%SLSRP07%/ </td>
<td width = "50"> /%CUSTN07%/ </td>
<td width = "200"> /%CUST07%/ </td>
<td width = "100"> /%SHIPD07%/ </td>
<td width = "50"> /%UNIYS07%/ </td>
<td width = "50"> /%VALUE07%/ </td>
</tr>

<AS400>EndofRegion
</table>
</div>

<AS400>BottomOfTable
</table>
</div>

<AS400>Endhtml
<br><br>
<A href="http://as400.liberty-i.net/CgiDevExt/index.html" target="_blank">Home</A>
<A href="http://as400.liberty-i.net/mycgilibp/PGM55.pgm" target="_blank">Add a Shipment</A>
</body>
</html>







And here is the RPGLE CGIDEV2 program..

1.00 
      H dftactgrp(*NO) actgrp('PGM60')
2.00 
       *---------------------------------------------------------------------------------*
3.00 
       *  Program: PGM60                                                                 *
4.00 
       *  MMC - December 8, 2005                                                         *
5.00 
       *  Illustration of collapsable/expandable html text                               *
6.00 
       *  based on interactive RPG/CGIDEV2 programs found at http://www.easy400.net/     *
7.00 
       *  more examples at http://as400.liberty-i.net/CgiDevExt/index.html               *
8.00 
       *---------------------------------------------------------------------------------*
9.00 
       /copy qrpglesrc,hspecs
10.00 
       /copy qrpglesrc,hspecsbnd
11.00 
 
12.00 
       FSHIP07L1  IF   e           k disk    usropn                               Ship File
13.00 
 
14.00 
       * Prototype definitions and standard system API error structure
15.00 
       /copy qrpglesrc,prototypeb
16.00 
       /copy qrpglesrc,usec
17.00 
 
18.00 
       * Saved query string
19.00 
      Dsavedquerystring...
20.00 
      D                 s          32767    varying
21.00 
 
22.00 
       * Constant for updHTMLvar subprocedure
23.00 
      D initHTMLVars    c                   '0'
24.00 
 
25.00 
       * Indicators for GetHtmlIfsMult subprocedure
26.00 
      d IfsMultIndicators...
27.00 
      d                 ds
28.00 
      d  NoErrors                       n
29.00 
      d  NameTooLong                    n
30.00 
      d  NotAccessible                  n
31.00 
      d  NoFilesUsable                  n
32.00 
      d  DupSections                    n
33.00 
      d  FileIsEmpty                    n
34.00 
      d
35.00 
      d  REGN07_HOLD    S                   LIKE(REGN07)                         last region
36.00 
      d  SEQ            S              6  0
37.00 
       *---------------------------------------------------------------------------
38.00 
       * Mainline
39.00 
       *---------------------------------------------------------------------------
40.00 
       * Read externally defined output html files
41.00 
      c                   eval      IfsMultIndicators = gethtmlifsmult(
42.00 
      c                             '/CgidevExt/pgm60ifs.html':
43.00 
      c                             '<as400>')
44.00 
       * Clear the HTML buffer
45.00 
      c                   Eval      REGN07_HOLD  = *hival
46.00 
      c                   Eval      Seq = 1
47.00 
      c                   callp     ClrHtmlBuffer
48.00 
 
49.00 
       * Write top of HTML document
50.00 
      c                   callp     wrtsection('Top')
51.00 
 
52.00 
       * Write Javascript section
53.00 
      c                   callp     wrtsection('Javascript')
54.00 
      c
55.00 
       * Write Stylesheet section
56.00 
      c                   callp     wrtsection('Style')
57.00 
      c
58.00 
       * Write Begin Body section
59.00 
      c                   callp     wrtsection('StartBody')
60.00 
      c
61.00 
      c                   callp     wrtsection('Header1')
62.00 
      c                   callp     wrtsection('TopOfTable')
63.00 
      c                   Open      SHIP07L1
64.00 
      c     *loval        Setll     SHIPRRC
65.00 
      c                   Read      SHIPRRC
66.00 
      c                   DoW       not %EOF
67.00 
      c
68.00 
      c                   If        REGN07 <> REGN07_HOLD
69.00 
      c                   Eval      Seq = Seq + 1
70.00 
      c                   callp     updHTMLvar('SEQ' :%char(SEQ))
71.00 
      c                   callp     updHTMLvar('REGN07' :REGN07)
72.00 
      c                   callp     wrtsection('NewRegion')
73.00 
      c                   EndIf
74.00 
      c
75.00 
      c                   callp     updHTMLvar('SLSRP07' : SLSRP07)
76.00 
      c                   callp     updHTMLvar('CUSTN07' : CUSTN07)
77.00 
      c                   callp     updHTMLvar('CUST07'  : CUST07)
78.00 
      c                   callp     updHTMLvar('SHIPD07' : SHIPD07)
79.00 
      c                   callp     updHTMLvar('UNIYS07' : UNIYS07)
80.00 
      c                   callp     updHTMLvar('VALUE07' : VALUE07)
81.00 
      c                   callp     updHTMLvar('ORDNM07' : ORDNM07)
82.00 
      c                   callp     wrtsection('ShipDetails')
83.00 
 
84.00 
      c                   Eval      REGN07_HOLD =  REGN07
85.00 
      c                   Read      SHIPRRC
86.00 
      c                   If        REGN07 <> REGN07_HOLD
87.00 
      c                   callp     wrtsection('EndofRegion')
88.00 
      c                   EndIf
89.00 
      c                   ENDDO
90.00 
      c                   callp     wrtsection('BottomOfTable')
91.00 
      c                   Close     SHIP07L1
92.00 
      c
93.00 
       * Write the *fini section to ensure all buffered output is sent to the browser.
94.00 
      C                   callp     wrtsection('endhtml *fini')
95.00 
      C                   return



Note that I moved this page off my site because some web indexing sites seem take a dim view of sites with hidden or invisable text.

For further information

the new IBM Web with CGIDEV2 download:
http://www-03.ibm.com/servers/eserver/services/assets/ebus_cgisrv.html

Easy400 site with CGIDEV2 documentation, tutorials and addition mail and security tools
http://www.easy400.net/en

Easy400 Discussion Group
http://groups.yahoo.com/group/Easy400Group/


More CGIDEV2 examples on my web site
http://as400.liberty-i.net/CgiDevExt/index.html


1