When moving Notes applications from a Notes client to a web client, there are a number of design approaches that need to be changed.   While Domino will support many @Functions on the web, often they come with the unwanted side effect of a refresh of the form.  One example of this is drop down selection fields that present available values based on a lookup, where the lookup key comes from another field on the form.

This article presents a way to achieve this functionality using Javascript and jQuery.

The examples shown are within the DOCOVA framework, however the concepts can be applied to any Domino web application, or actually, any web application.

Let me setup the scenario.  First, I have some configured lists setup, in this case, a list of countries, where each country has a list of cities.

fig1

fig2

In my form, I have Country and City fields setup, with drop down like icons for selecting the respective values.  The concept is straightforward, after a Country is selected, the City list shows only those cities that are listed for that Country.

fig3

Here’s the selection dialog in action, first picking a Country

fig4

Then a City

fig5

Selected values, shown in the form

fig6

Now let’s have a look at how this is done.   In my example, I’m working on a Domino server, but as mentioned, the concepts can be applied to any platform.

Here are my fields in Domino Designer

fig7

Arguably, the Country field could be a standard drop down field with a @DBLookup formula that retrieves the Country list, however I’ve opted for full client side Javascript for this example so it can be applied to any platform.

The selectCountry() function calls dbLookup, which we have created as a direct replacement for the formula language @DBLookup function, and is part of our Docova.Utils JS class that contains a number of such methods.   The syntax for our dbLookup function and corresponding code is included in the attached code.  We use a JSON value pair array to pass the options so that the order doesn’t matter, and we can easily add options to the functions in the future without having to revisit all existing code. (Note the selectKeyword function is not included with this article)

selectCity() is very similar to selectCountry(), the difference being we pass the Country as part of the lookup key, allowing us to return the correct list of cities.

The JS header code is available here, and the dblookup function is here.

For more information on DOCOVA and how we’re migrating Notes applications to the web, visit www.docova.com.