In the Notes client, you often have a series of comboboxes where the
value in one, determines the list of choices in the next, a common
example being "Main Category", "Sub Category1", "Sub Category 2".
When doing this on the Web, using the built-in "refresh fields on
keyword change etc" feature, it works, but can cause the screen to
jump around as all the fields are refreshed.
I had a user who didn't like this, so this is the solution I came up
with that writes comboboxes dynamically, by looking at a hidden
field containing the data - a sort of pseudo-DBLookup in
JavaScript.....
An alternative to using "refresh fields on keyword change" and
"refresh choices on document refresh" involves 4 parts
1) A Lookup view, that contains the values in a single column,
using a predefined separator - I use the pipe symbol |
2) A hidden lookup field on the form that does a dbcolumn on the above view
3) Some JavaScript to process the hidden field above
4) A field that contains the lookup value and a hotspot on the field
that triggers the above JavaScript
As follows
1) Create a view - for example, I called in "LookupStaffDivisions",
and it should have only one column, which contains multiple values
separated by a common separator. In my case I used the pipe symbol
'|' which is also in the JavaScript code. An e.g. of the column
contents is:
HR|Bob Jones
HR|Mike
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
SmithAdmin|Sarah Joyce
Admin|Bill Clinton
2) Create a hidden field on the form that looks this up e.g.
<input type="hidden" name="lookupSomeValue"
value="[SOMECOMPUTEDFIELD]" >
Everything in the line above is passthru HTML. The
[SOMECOMPUTEDFIELD] is replaced with a field that is
computed when composed and contains a dbcolumn on some view. A
sample formula for the field is below:
(Note the space " " at the end of the value of t1 - this is needed
due to the counting starting at 0 in JavaScript)
Sample field value:
t1:=@DbColumn("":"Nocache" ;"" ; "LookupStaffDivisions" ; 1) : " ";
@Text(t1)
3) The JavaScript code (in the JSHeader)
function getLookupList( key, fieldToChange, fieldLookupValues ){
//take a field containing the list values and add them
//to an array
var inVal=fieldLookupValues;
var allValues=new Array();
var count=0;
var beg=0;
var end=0;
while (end!=-1){
end=inVal.indexOf(";", beg);
allValues[count]=inVal.substring(beg,end)
beg=end+1
count++
}
//get the number of documents in the array
var numOfDocs = count
var sLookupResult="";
var sCurrentValue="";
var k=0;
var returnValues=new Array();
//now parse the array looking for the key
for (i=0 ; i < numOfDocs ; i++ ){
sCurrentValue=allValues[i];
iFound=inStr(1, sCurrentValue.toLowerCase() , key.toLowerCase() );
if (iFound > 0 ){
sLookupResult=getEnd(sCurrentValue ,"|" )
returnValues[k]= sLookupResult;
k++;
}
}
//as we are working in base 0, subtract 1 from the total
max=k-1
/*depending on the field type that is being changed, display the
output. So far it's only set to work with comboboxes, as well as a
straight dump to the document if the field isn't found */
if ( fieldToChange == null ) {
//field not found, so output to the document - alternatively
you could
//write an error message. Normally I write the result into an IFrame.
document.open()
document.write("<table cellpadding='0' cellspacing='0'
border='0' bgcolor='#FEFEFE'> ")
for(k=0 ; k<max ; k++){
document.write( returnValues[k] )
}
document.write("</table>")
} else if ( inStr( 1, fieldToChange.type , "select" )) {
//the field type is combo box (html SELECT statement)
//reset the max number of options
fieldToChange.options.length=null
//update the combobox, check how many results are to be returned
if (max<1){
fieldToChange.options.length=1
fieldToChange.options[0].text = "None available"
}else{
//add 1 to max to allow the first item in the list to be
set to "Please select one"
fieldToChange.options.length=max + 1
//set the first option in the list to be "Please select one"
fieldToChange.options[0].text="Please select one"
//now add the results to the end of the combobox
for(k=0 ; k<max ; k++){
fieldToChange.options[k+1].text = returnValues[k]
}
}
}
}
/* The below are various Javascript equivalent of LotusScript
functions, taken from various sources - mostly from the
"Javascript Bible 3rd edition" by Danny Goodman*/
function inStr(beginning, word1, word2) {
check1 = new String(word2);
returnInStr = word1.indexOf(word2, (beginning - 1)) + 1;
return returnInStr;
}
function mid(inputMid, pos, l) {
pos = pos - 1;
if ((pos < inputMid.length) && ((pos + l) <=
inputMid.length)) {
returnMid = inputMid.substring(pos, pos + l); }
else { returnMid = ""; }
return returnMid;
}
function replaceSubstring (inputString, badString,
goodString, caseSensitive) {
fixedReplace = "";
UI = inputString;
UB = badString;
if ((caseSensitive != 1) && (caseSensitive != true)) {
UI = inputString.toUpperCase();
UB = badString.toUpperCase();
}
badEnd = -1;
badLoc = UI.indexOf(UB);
if (badLoc != -1) {
for (x=1; (badLoc != -1); x++) {
fixedReplace = fixedReplace +
inputString.substring((badEnd +
1), badLoc) + goodString
badEnd = badLoc + UB.length - 1;
badLoc = UI.indexOf(UB, (badLoc + 1)); }
fixedReplace = fixedReplace +
inputString.substring((badEnd + 1),
inputString.length); }
else { fixedReplace = inputString; }
return fixedReplace;
}
// similar to the StrLeft function
function getFront(mainStr, searchStr ){
foundOffset = mainStr.indexOf(searchStr)
if ( foundOffset == -1 ) {
return null;
}
return mainStr.substring(0, foundOffset );
}
// similar to the StrRight function
function getEnd(mainStr, searchStr ){
foundOffset = mainStr.indexOf(searchStr)
if ( foundOffset == -1 ) {
return null;
}
return mainStr.substring( foundOffset + searchStr.length, mainStr.length);
}
4) The code for the JavaScript hotspot, which causes the contents
of a combobox to be changed dynamically.
form=document.forms[0];
key=form.Division.options[form.Division.selectedIndex].text;
getLookupList( key, form.StaffList, form.lookupSomeValue.value)
In the above code, Division is the name of the first combobox, which
when selected changes the contents of the 2nd combobox which is
called StaffList, providing a quick way of doing a dblookup without
the issues of the screen jumping around when a refresh occurs.
This was first published in April 2002