The Business Controls Caddy

Taking Advantage of AJAX Code From the Domino Community

The past two weeks have included some hair-pulling developing a domino web application for a client. The hair-pulling was not the result of coding extensive JavaScript and DHTML. It was poorly defined requirements from the project owner. Let me put a caveat here. The project owner did not appreciate the difficulty in transferring what was on paper to the web in a way that would be easy to understand and follow by the end users. It was complicated by the fact that the requirement was dropped off and the project owner left country for two weeks.

One of the last requirements I had to code for is the ability to select multiple values from a list. In the past, I have used Jamie McGee's client demo of this functionality, modified to be an application access management tool for business owners of applications. In those projects, I went from using a tool for list selections to a tool for name and role selections. But now I needed a tool for the web that would run squeek free. Since I have become enamored with AJAX (Asynchronous JavaScript and XML) because of the performance and user interface gains it provides, I turned to a demo Name Picker application written by Matt White over in the United Kingdom, and went from there.

My Requirements

I needed to give users of the application the ability to select one or more values from a list of 205 choices. Because the users are all external to the organization, there is no way to control the browser options and settings. In particular, I did not want to deal with pop-up blockers. I also did not want to deal with the amount of screen real estate I would have to use for a listbox.

Alan's Name Picker

Matt set out to write an AJAX application that would suit every Lotus Notes & Domino developers dream of effectively and efficiently providing the Lotus Notes client name picker functionality on the web. This turned out to be a great and easy to implement/modify solution.

The Changes I Am Making

Matt's demo name picker application is designed to be opened as a pop-up window, which did not meet my needs. At first, I though about calling the form in a <IFRAME>, but decided against this. What I decided to do was take his code and make it part of the form. So the steps I took were to

Take his HTML code and warp it inside a <div> tag on my form.
Move his stylesheet parameters to my style sheet
Note that I had to rename the classes he had assigned to <td>, <tr>, <body>, and other elements so that I could retain his interface without disrupting the rest of the application.
Move his JavaScript to a JavaScript library I now call in the HTML Head
Edit the JavaScript code to reflect the fact that there was no longer a window.opener, as well has renaming the default variable values.
Move the Code to a Subform that I Can Share with the Community

What I Still Need To Do

I still have a few things to address to have it meet my needs. One is to move the stored values to a hidden field to save, JavaScript calls to display the value picker based on the Yes/No question that precedes it (no biggie), and to add validation needed for this new element. I have to make sure the code will run on Safari as well.

Why I am Posting This

I am posting this to thank Matt publicly for posting his sample for the Domino Community, and to Richard Schwartz for including the link to Alan's application on his blog. The other equally important reason is to point out that developers do not need to start from scratch to solve their coding challenges. There is a wealth of free information and sample out there including the Lotus developerWorks Sandbox, openNTF, the Martin Scott code library, Henry "Newbs" Newberry's samples, Matt Holthe over at Breaking Par, the Lotus Blogshere, Jake Howlett's Codestore and more. Take advantage of it and make your applications sing!

Related Links