Len Barker
by Len Barker, Managing Partner – Lotus Practice.
I support a host of Lotus Domino web applications that serve as forms with workflow embedded. A nice feature of these applications is that many fields are filled out for the user when they open the form. Information such as employee phone number, department, and supervisor name are filled out by making web service calls to a company HR system (the Domino directory does not contain this information). At a high level, this is how this works:
- The form’s onload event calls a javascript function like LoadDocument(). This javascript function is in the form’s JS Header.
- The LoadDocument function makes a call to javascript function that invokes an ajax call to the web service via a url.
- The form continues to load normally and the fields get filled out when the ajax code is finished running
The nice part about using ajax to do this work instead of something like a WebQueryOpen event is that the form is already opened when the ajax function is called. That means that I have a handle on all of the session information about the current user that I can then pass to the web service call if need be. It also means that I don’t have to save any documents to make the code work. If the user decides to close the form without saving it, then I don’t have any clean up work to do.
There are probably a lot of articles out there with the details of how to set this up. I want to focus on one particular problem that I run into from time to time. That is, what happens if you want to make several web service calls when the form opens? Perhaps you want to call one web service to populate the user information fields and another web service top populate a list of departments.
Multiple ajax calls can be made but you just make sure that one is done before calling the next one. For example, I can’t just make two calls as follows:
getEmployeeInfo(url,email,strResponse);
getDepartmentList(strResponse);
Remember that the power of ajax is that code will continue to run on your web page while an ajax call is being made. So when I call getEmployeeInfo(url,email,strResponse) the httprequest is sent off and while the request object waits for a response the next line of code is run. In this case the next line of code is another call to an ajax function (getDepartmentList(strResponse)). This function will not run to completion because the httprequest object is busy with the first call. So how do you make it work? Find the portion of the ajax code that processes the response and call your next function at the end of that code!
Let’s see if I can clear this up with an example. Below are two javascript functions. The first function is called in the On Load event of the form. The function is passed the url to a web service or Domino agent that will retrieve the list of cost centers; the name of the function that will process the result set (e.g. “receiveCostCenter”; and the name of the field that the cost centers will be added to the select list. The function xmlhttpGet(url, strFunction) is a standard ajax.js script library that processes ajax requests. You can google ajax.js to find the file. If all I wanted to do was get the list of cost centers I would be done. But I also want information about the user to be retrieved from another web service. I put my next ajax call (getPerson) at the end of the receiveCostCenters function so that I know the first ajax operation is complete before I call my next one.
var fldCostCenter = “”;
function getCostCenters(url,strFunction,fldName) {
fldCostCenter = fldName;
if (! xmlhttpGet(url,strFunction)) {
alert(“Unable to get cost centers”);
} //end if
} //end getCostCenters
function receiveCostCenters(strXml) {
if (strXml==”") { alert(“No cost centers returned”); return; }
//load xml
LoadXmlFromStr(strXml);
if (xmlDoc == null) { return; }
if (!document.getElementById(fldCostCenter)) { return; }
fld = document.getElementById(fldCostCenter);
var coll = xmlDoc.getElementsByTagName(“costcenter”);
fld.options.length = 1;
for (n = 0; n < coll.length; n++) {
var id = coll[n].childNodes[1].firstChild.nodeValue + ” (” + coll[n].childNodes[0].firstChild.nodeValue + “)”;
fld.options[fld.options.length] = new Option(id,id);
} //end for
getPerson(“/Webforms/CaterRequests.nsf/”,document.getElementById(‘CurrentUserEmail’).value,’receivePerson’);
} //end receiveCostCenters
*Please vote “Up” this article on DZone if you would like to see more technical article from Davalen.
