[Technique] Dynamically preselect items in chained combo boxes >=WF7.7

Hello everybody,

I recently found an interesting new feature in WF JavaScript code. It seems that since WF 7.7.01 there are in fact JS events called (if set) for each input control (e.g. ComboBox, ListBox etc.) before and after reloading the control's contents e.g. when populating or re-populating a chained control (events are called "onbeforeload" and "onafterload").

According to this thread those events will surface with 7.7.04 also in the Composer, but in ibirls3.js, they are already present (and called) in WF 7.7.01.

In my opinion they present a great possibility e.g. to "preselect" items in chained combos or even to try and "keep" selections of chained combos (e.g. listbox3) active, even if previous combos (e.g. listbox1) have been changed (different items selected) and have been repopulated.

a code snippet should demonstate a preselection posibility (keeping a selection would rather mean, storing each selection and trying to find the selected items again after repopulation):

<html>
... put this inside a composer created page ...
<script>
function preselectItem()
{
	try{
		// select only the 3rd item - works for WF7.7.01
		// you may of course select every item you like here
		document.getElementById('listbox2').options[2].selected = true;
		document.getElementById('listbox2').options[0].selected = false;
	} catch(e)
	{
		// never write an empty catch ;-)
	}
}
</script>
...
<body>
<SELECT style="Z-INDEX: 6; ..." id=listbox1 tabIndex=5 multiple size=3 persistentuniqueid="compUid_1" name="listbox1"></SELECT> 
<SELECT onafterload="preselectItem();" style="Z-INDEX: 8; ..." id=listbox2 tabIndex=7 multiple size=3 persistentuniqueid="compUid_2" name="listbox2"></SELECT> 
...
</html>

Hopefully this one works for you, too

Regards
Linne

This message has been edited. Last edited by: linnex,

WebFOCUS 7.7.03

Posts: 67 | Registered: January 05, 2011

njsden

Virtuoso

posted

Hide Post

linnex, excellent info. Thanks very much for sharing. That "onafterload" event opens up many interesting possibilities and it's definitely something I'll try to find some time to play with.

Just a comment: IBI has exposed a function in their JavaScript arsenal called IbComposer_setCurrentSelection which I think can be used to "select" values in those controls. I have not used it myself but I see it as a possible aid in your preselectItem() routine.

The nice thing about it (if it works as it's name suggests) is that it encapsulates whatever DOM operations are needed in order to set the selected values of those controls.

With more meta-data being added by HTML composer as new versions are released, there is always a possibility of changes in the way internal element IDs are rendered by WF upon loading the page and direct interactions with the DOM via getElementbyId may not behave as one would expect in future versions.

I found a reference to that function in this guide: Designing a User Interface for a Web Application With the HTML Composer 7.7.03 (DN: 4501002.0511).

Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.

Posts: 1533 | Registered: August 12, 2005

Ignored post by njsden posted

Show Post

Dan Satchell

Virtuoso

posted

Hide Post

If -HTMLFORM (and therefore !IBI.AMP....) is not being used or cannot be used for your launch page, I found the following works for pre-selecting a value from a drop-down list, based on linnex and njsden's posts here. It doesn't require adding a new JavaScript function to your HTML. but the "onafterload" option must be added manually to the HTML SELECT statement for the drop-down list.

I have a year/month drop down list dynamically populated with several years worth of dates. My goal was to make the current year/month the selected value, even though it is neither at the top nor bottom of the list.

Here is the fex for preparing the current year/month value for my launch page:

DEFINE FILE xxx
 YRMONTH_SELECT/A6 WITH <xxx.fieldname> = EDIT('&YYMD','999999$$');
END
-*
TABLEF FILE xxx
 PRINT YRMONTH_SELECT
       YRMONTH_SELECT
 WHERE RECORDLIMIT EQ 1 ;
 ON TABLE PCHOLD FORMAT XML
END

Make sure the format for YRMONTH_SELECT above is the same as the XML value format in the year/month drop-down list...and make no assumptions.

Next I created a simple text input box on my launch page (via HTML COMPOSTER) and defined the fex above as the external, dynamic input for that object. In the Properties dialog box, I changed the Name of this object from the system-generated name ("editxx") to "YRMONTH_SELECT". This isn't necessary, but it makes for more understandable code in the call to pull its value later. In the Properties and Settings dialog box, I selected the YRMONTH_SELECT field as both value and display fields. I chained this input box in front of my year/month drop-down list so the current year/month value will be available before the drop-down list populates. Again, this probably isn't necessary because use of "onafterload" should take care of this. But I never make any assumptions with this tool. This YRMONTH_SELECT input box will be hidden, but I recommend leaving it visible until everything is working correctly.

Finally, I manually added the following "onafterload" option to the SELECT statement for my year/month drop-down list.

<SELECT style="Z-INDEX: 3; POSITION: absolute; WIDTH: 90px; FONT-SIZE: 9pt; TOP: 90px; FONT-WEIGHT: bold; LEFT: 710px" id=combobox1 language=javascript
 tabIndex=3 onchange="" size=1 persistentuniqueid="compUid_1" onafterload="IbComposer_setCurrentSelection('combobox1',YRMONTH_SELECT.value,true);"
 defaultselection="1" labelid="text1" boundtovariable="1" requiredfield="0" name="YRMONTH"></SELECT>

Notice that you must use "YRMONTH_SELECT.value" in the call to IbComposer_setCurrentSelection. If you forget the ".value", it won't work. Also, you MUST use the ID (Unique Identifier) of your drop-down list ('combobox1' in this case) in the call, not it's Name, and it MUST be enclosed in quotes. The ID can be found in the HTML or in the Properties dialog box. The final value in the call (true/false) indicates whether objects chained after the year/month drop-down list should be updated after its value has been set. Note, importantly, that only the 'combobox1' value has quotes around it in the call.

I recommend initially using the value field from the XML for your drop-down list as the display value, too. This will allow you to see that both the value from YRMONTH_SELECT and values from the drop-down list are identical in format. You can change the display value for the drop-down list to a more friendly format after everything is working correctly. Finally, right-click on the YRMONTH_SELECT input box, and select "Style" from the menu. Select "Layout" from the list of options and then change "Visibility" to "Hidden".

By the way, it would be much easier if "YRMONTH_SELECT.value" could simply be placed in the "Selected Value" option box of the Properties and Settings dialog box for the drop-down list instead of having to add the "onafterload" option to the HTML. Really, it should not be this difficult to accomplish this basic task!

Hope I haven't forgotten anything, and that someone finds this helpful.

This message has been edited. Last edited by: Dan Satchell,

WebFOCUS 7.7.05

Posts: 1213 | Location: Seattle, Washington - USA | Registered: October 22, 2007

Ignored post by Dan Satchell posted

Show Post

linnex

Gold member

posted

Hide Post

Hi everybody,
hi njsden and Dan,

thank you for your additional input. Especially the IbComposer_setCurrentSelection sounds very interesting and I will definitely play around with it soon.
Dan's idea of using an additional (possibly invisible) input control to provide the "target" controls with the to-select data sounds very interesting, too - as it avoids any manual XMLHttpRequest to /ibi_apps/WFServlet or /ibi_apps/RemoteValues I would have come up with myself.

And @Dan - I totally agree with you that such a simple task as (dynamic) pre-selection should be much simpler. But at least I may we may now "tap" into the populate-chaining process of combos - which I only achieved with huge workarounds up until now.

Btw. another possibly interesting aspect which is now possible (using onafterload) is to style or activate/deactivate the populated items differently: e.g. if you would like to show all month in the past of a combo in red and leaving all future month in black; Or introduce "grouping-h-lines" into combos which are not selectable (deactivated onafterload)

Best regards
Linne

WebFOCUS 7.7.03

Posts: 67 | Registered: January 05, 2011

Ignored post by linnex posted

Show Post

njsden

Virtuoso

posted

Hide Post

quote:
Hope I haven't forgotten anything, and that someone finds this helpful.

I certainly did find it helpful and will have a chance to give this a try in a new project that's coming soon. Thanks Dan!

Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.

Posts: 1533 | Registered: August 12, 2005

Ignored post by njsden posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

Can it set defaults for a series of chained controls? That's quite hard to do with the asynchronous nature of chained controls.

I'm asking because I wrote a fairly extensive javascript library for 7.6.11 that links into the IbInputControl functionality in ibirls3.js, that makes setting defaults like those very easy.

An example of how my library is used:

function onInitialUpdate() {
    // Grab the hierarchy of the controls in the form
    var frm = new Form(); // reads out the list of input controls and how they're chained

    // Extend a Date-object with accessors for year, month & day
    var date = AccessorStore.assignMultiple(new Date(), ['year', 'month', 'day']); // adds Date.year and Date.month properties

    // Set defaults per CSS-id
    frm.setDefaults({
        yearId  : date.year,
        monthId : date.month,
        dayId   : date.day
    });

This example could be used with a chained set of year/month/day dropdowns, with id="yearId", "monthId" and "dayId" respectively.

Note that if the current year is not the first year in the years-dropdown, a different year gets selected when the default is being applied to it and the (chained) month dropdown gets reloaded. My library handles that too.

For example, if the years-dropdown would start at 2011 and it is February 29th 2012 now, my library would select that date as a default, even though 2011 didn't have a Feb 29th. It's using WebFOCUS' ability to pull new data into the dropdowns while changing the selections and updates the default settings for each dropdown on the fly.

The accessors - properties to the base object that define a get- and set-method - are an important part of that: They allow the dropdown values to modify the underlying Date object after new content is pulled into the dropdown (after a default got set higher up in the hierarchy of the chain and changed the selected value there).
The AccessorStore in above example is just a collection of frequently used accessor objects. It's just a list of names (to identify them), getters and setters.

I wouldn't mind making it available, but currently it's linked into several other javascript libraries we use and I wouldn't really have time to maintain it for purposes outside our company anyway. Maybe IBI would be interested...

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

linnex

Gold member

posted

Hide Post

Hi Wep,

from what I understand what you did in 7.6.11 with your JS library, you could now do that with the introduced onbeforeload and onafterload events - yet of course, they also only provide JS events for each input (combo etc.) that are called prior and/or after each update of the resp. input - they do not provide a library or API to perform this and that - but now you can finally write it yourself in JS without having to tap into or override the IBI/WF ibirls3.js.

You may of course set defaults to each combo by analysing the content (option elements) after each reload and select the items you have declared as default values - if these defaults are determined by another fex you could use the technique Dan described above (using invisible input controls). But the "logic" to do so is not (yet) provided by WF, only the means to hook up into the asynchronous process of combo population.

Especially for versions 7.6.11 and below you will still need libraries like yours to tab into the WF JS system as AFAIK the events were not implemented then (I only have 7.6.10 available, and I could not find them there - so I can only guess that 7.6.11 is no different).

So for people & companies still using WF below 7.7. your library might really come in handy.

Regards
Linne

WebFOCUS 7.7.03

Posts: 67 | Registered: January 05, 2011

Ignored post by linnex posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

Perhaps 7.7 changed from using synchronous XmlHttp calls to asynchronous calls?
I don't think it will be hard to adjust my library for that - a pair of onBeforeLoad/onAfterLoad callbacks in the right place would be sufficient.

Finding the right place is going to be the more difficult part, the main library file is just over 1200 lines of code. That includes quite a bit of comments and a number of convenience-functions for dealing with dropdowns, but still, the larger part is the form handling code. It also depends on almost 200 lines of Date-class extensions, for example for calculating the ISO week number. And that code depends on other stuff again, such as a Formatter-class for outputting objects (=data) in a specific format. If I put everything in one file, then I won't need to include the dynamic loader - besides, IBI has something like that built-in as well.

Yup, I do write quite a bit of Javascript. Perhaps the only thing not in there is NLS support.

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

jlentner

Member

posted

Hide Post

Hi all,

I've got the pre-selecting to work from the hidden text box to a dropdown as shown by njsden but am not able to get it to pre-select a radio button. Does the IbComposer_setCurrentSelection call apply to radio buttons?

WF 7702

Posts: 9 | Registered: June 27, 2012

Ignored post by jlentner posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Yes.

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[Technique] Dynamically preselect items in chained combo boxes >=WF7.7

Focal Point | Privacy Statement | Terms of Service