[SHARING] Handling HTML Controls With Long Lists of Items

I came up with this method for handling HTML controls (combobox, listbox, etc.) that have long lists of items. When a list contains enough items it can take a long time to populate causing the user to wait. In some cases it may cause the browser to pop up a message indicating that there is some script running that is causing the browser to run slowly and asking the user if they want to cancel the script (as if they would know if they should or not).
This was the very problem I was running into when creating an ad-hoc reporting screen. What I've come up with is a way to divide the items returned into blocks of some manageable number. In my application I use blocks of 500 but in the sample shown here I use blocks of 10.
Now the HTML page only has to return 500 items at a time which does not cause either of the issues mentioned above.
The next piece is a Table of Contents of sorts. It consists of a combobox that is populated with the 'first - last' items in each block. That way the user can jump to any block they wish.
Oh yeah, I almost forgot to mention that this has NO CUSTOM JAVASCRIPT! It uses the v7.6.9 advanced chaining feature that allows you much more control of the procedures that populate the controls.
I hope this is useful to some of you. Enjoy!

<!-- Generated by Report Layout Painter -->
<HTML>
<HEAD>
<META id=mycharsetmeta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<META id=Generation content="Gen 3.0">
<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>

<SCRIPT id=IBI_OptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls3";

var rltdyncalendar = "rltdyncalendar";
var gmap = "ibigmap";
var olap="olap";
var olappanebase="olappanebase";
var olapdrill="olapdrill";

var ibixmltree="ibixmltree";

var ibiOptions = new Array(cgipath,ibirls);
</SCRIPT>

<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_nlsVars src="/ibi_html/javaassist/nlsvars.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);
</SCRIPT>
<TITLE>HtmlPage</TITLE>
<SCRIPT id=clientEventHandlersJS type=text/javascript>
//Begin function window_onload
function window_onload() {

UpdateData();

// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload

</SCRIPT>

<SCRIPT for=window eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
</HEAD>
<BODY style="OVERFLOW: auto" nextelementuniquenumber="82" edaconnectionrequired="true">
<SELECT id=combobox1 style="FONT-SIZE: 8pt; Z-INDEX: 4; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 30px" tabIndex=1 name=combobox1 persistentuniqueid="compUid_1"></SELECT>
<SPAN id=text3 style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; Z-INDEX: 8; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 240px; HEIGHT: 20px" tabIndex=8 persistentuniqueid="compUid_82">Jump to...</SPAN>
<SPAN id=text2 style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; Z-INDEX: 7; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 60px; HEIGHT: 20px" tabIndex=7 persistentuniqueid="compUid_81">Field Vaues (in groups of 10)</SPAN>  
<SELECT id=listbox1 style="FONT-SIZE: 8pt; Z-INDEX: 4; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 80px" tabIndex=4 size=10 name=listbox1 persistentuniqueid="compUid_2"></SELECT>    
<SELECT id=combobox2 style="FONT-SIZE: 8pt; Z-INDEX: 5; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 260px" tabIndex=5 name=combobox2 persistentuniqueid="compUid_80"></SELECT>
<SPAN id=text1 style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; Z-INDEX: 6; LEFT: 10px; WIDTH: 300px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 10px; HEIGHT: 20px" tabIndex=6>Select Fieldname</SPAN>
<INPUT id=layoutinfo style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden>
<INPUT id=IBIMR_domain style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=powersys/powersys.htm name="IBIMR_domain">
<INPUT id=IBIMR_folder style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=#testsp12zgnb name="IBIMR_folder">
<INPUT id=ibif_ex style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=app/custfltr2.htm name="ibif_ex">
<INPUT id=ibiapp_app style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden name="ibiapp_app" ismre="1">
<INPUT id=ibic_server style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=EDASERVE name="ibic_server">
<xml id=focus_xmlelement>
<script>

<rootxmlnode top="20" left="1147" width="150" height="130">

<variables></variables>

<input_controls>

<input_control bindcontrolid="compUid_1" inbinding="1" top="55" left="45" width="60" height="20" elementtype="8" name="combobox1" id="combobox1" multiple="0" unresolved="0" onetimepopulated="0">

<link linktype="default">

<condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0">

<data_info datatype="1" sourcetype="typeMaster" modifiedrequest="1" selectedvalue="PIN" datafield="FIELDNAME" displayfield="FIELDNAME">

<![CDATA[SET ASNAMES = ON
CHECK FILE PERSINFO HOLD AS PIHLD
TABLE FILE PIHLD
SUM
FST.FIELDNAME
BY FIELDNAME
ON TABLE PCHOLD FORMAT XML
END
]]></data_info></condition></link></input_control>

<input_control bindcontrolid="compUid_80" inbinding="1" top="49" left="222" width="60" height="20" elementtype="8" name="combobox2" id="combobox2" multiple="0" unresolved="1" onetimepopulated="0">

<link linktype="default" from="compUid_1">

<condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0" resolveparameterfq="FIELDNAME" resolveparameter="FIELDNAME">

<data_info datatype="1" sourcetype="typeMaster" modifiedrequest="1" datafield="TOC_BLOCK" displayfield="TOC_ITEM">

<![CDATA[SET ASNAMES = ON
-DEFAULT &FIELDNAME = 'PIN';
TABLE FILE PERSINFO
SUM FST.&FIELDNAME
RANKED AS ROWNUM BY &FIELDNAME
ON TABLE HOLD AS FOCCACHE/FIELDHOLD
END
TABLE FILE FOCCACHE/FIELDHOLD
PRINT
&FIELDNAME
ROWNUM
RANKED AS BLOCKNUM BY ROWNUM NOPRINT IN-GROUPS-OF 10
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS FOCCACHE/BLOCKHOLD
END
DEFINE FILE FOCCACHE/BLOCKHOLD
CONCAT1/A99V = IF (BLOCKNUM NE LAST BLOCKNUM) THEN (&FIELDNAME);
CONCAT1A/A99V = LAST CONCAT1;
CONCAT2/A99V = IF (BLOCKNUM NE LAST BLOCKNUM) THEN (LAST &FIELDNAME) ELSE ('');
END
TABLE FILE FOCCACHE/BLOCKHOLD
PRINT BLOCKNUM ROWNUM &FIELDNAME CONCAT1 CONCAT1A CONCAT2 MAX.ROWNUM WITHIN TABLE
COMPUTE CONCAT2A/A99V = IF (ROWNUM EQ MAX.ROWNUM) THEN (&FIELDNAME) ELSE (CONCAT2);
COMPUTE TOC_ITEM/A99V = IF (CONCAT2A NE '')OR(ROWNUM EQ MAX.ROWNUM) THEN (CONCAT1A || ' - ' | CONCAT2A) ELSE ('');
COMPUTE TOC_BLOCK/I8 = IF(CONCAT2A NE '') THEN (IF (ROWNUM EQ MAX.ROWNUM) THEN (BLOCKNUM) ELSE (BLOCKNUM - 1));
ON TABLE HOLD AS FOCCACHE/TOCHOLD
END
TABLE FILE FOCCACHE/TOCHOLD
SUM FST.TOC_ITEM
BY TOC_BLOCK
WHERE TOC_BLOCK NE 0;
ON TABLE PCHOLD FORMAT XML
END]]></data_info></condition></link></input_control>

<input_control bindcontrolid="compUid_2" inbinding="1" top="10" left="365" width="60" height="20" elementtype="9" name="listbox1" id="listbox1" multiple="0" unresolved="0" onetimepopulated="0">

<link linktype="default" from="compUid_80">

<condition default="1" name="Default" whattodowithcontrol="0" valuescompareoperator="0" parameterscompareoperator="0" conditionmultiselectoperator="0" resolveparameterfq="TOCBLOCK" resolveparameter="TOCBLOCK">

<data_info sourcetype="typeMaster" datatype="1" modifiedrequest="1" datafield="FIELDVALS" displayfield="FIELDVALS">

<![CDATA[SET ASNAMES = ON
-DEFAULT &FIELDNAME = 'PIN';
-DEFAULT &BLOCKNUM = 1;
TABLE FILE FOCCACHE/BLOCKHOLD
SUM FST.&FIELDNAME AS FIELDVALS
BY &FIELDNAME AS FIELDVALS
WHERE BLOCKNUM = &TOCBLOCK;
ON TABLE PCHOLD FORMAT XML
END]]></data_info></condition></link></input_control>
		</input_controls>

<other_bound_objects></other_bound_objects>

<requests></requests></rootxmlnode></script>
</xml></BODY>
<SCRIPT id=IBI_loader type=text/javascript>
doBeforeLoad();
</SCRIPT>
</HTML>

7.7.05M/7.7.03 HF6 on Windows Server 2003 SP2 output to whatever is required.

Posts: 393 | Location: St. Paul, MN | Registered: November 06, 2007

GamP

Virtuoso

posted

Hide Post

Dan,

Nice technique. I think you could even make it so that there is yet another settable field on your page that will accept the blocksize. That would make it even more user friendly.