Making one combo box take notice of another one in XPages

Someone asked me yesterday if I could send them an example of how to have one combo box influence what appears in another combo box on the XPage. As I've been asked this before (several times) I thought I should write it up. In this example I'm picking up values from lookup documents in a lookup view. They could be anything but I have used simple  two field Notes form.

In your custom control or XPage drag two combo boxes onto the page.

Combo Boxes on Custom Control
Combo Boxes on Custom Control

In the first combo box I have bound it to the form that I want to store the data in. In this case it's comoboboxtest with two fields on it. For the Values I have used the following @formula

@DbColumn(@DbName(),"vwLookup",1)

(note the capitalisation and commas)

Lookup Formula

Lookup Formula

For the Events of this comobo box you need to click the onChange event (ServerSide) and then select partial refresh. In the dialog pick the other comob box that you dragged onto the page. Also you need to select the "Do not update or validate date" check box.

Event setting for Combo Box 1

Event setting for Combo Box 1

Then in the second combo box bind it to the other field in your destination document. For the values you need to add another formula.

var combo1 = getComponent("comboBox1").getSubmittedValue(); @DbLookup(@DbName(),"vwLookup",combo1,2);

This sets the variable combo1 to the value that you have picked in the first combo box and then uses combo1 to lookup the values in your view. (Your view must be sorted for this to work and what you are looking up must be the first column)

values formula for Combo Box 2

values formula for Combo Box 2

The other important thing here is that you need to set this script to run dynamically instead of at page load.

And that's it.

Download a small sample here. XPagesTesting

My thanks for Paul Hannan for helping me bug fix this with thousands of other things running through my head this morning.