® IBM Software Group © 2006 IBM Corporation Dependent Combo-Box U.I. Development This Learning Module walks you through the options and development techniques for creating two or more combo-boxes whose contents are programmatically-dependent upon user-selection.

2 Last update: 12/04/2007 Dependent ComboBoxes  It is another common U.I. requirement to have a page display related comboBoxes, that allow the user to:  Select from a populated ComboBox-1  Which fires off a server-side process that populates ComboBox-2  …etc.  This technique is easy to achieve with RBD/EGL. Here’s how:  Create the default page  Create the JSFHandler that loads arrays for the comboBox and processes the user selection  And also programmatically hides/shows the combo-box  Let’s try it 

3 Last update: 12/04/2007  Dependent ComboBoxes Lab  Create a new page, named: dependentComboBoxes.jsp  Add an HTML to the page: 3 Rows/1 Column, Width: 100%  Copy/Paste the code in the Notes section of this slide, and replace the existing JSFHandler source  Note the following:  The arrays:  States is the parent array – it will load the top combo-box  Customers is the dependent array – the SQL statement reads rows from the (combo-box) selected state  The SQL statement  The visibility expressions  Press Ctrl/S to save your code

4 Last update: 12/04/2007  Create the ComboBoxes  From Page Data:  Drag statesCB onto the page – create a ComboBox  Drag customersCB onto the page – create another ComboBox  Drag getCustForState onto the page – create a Submit Button  Select the customersCB ComboBox, and from Properties/All Attributes  Select the rendered attribute, then Compute… vis  Select the vis boolean field  Run the page on the server. Select a state with customers: New Jersey, California, Connecticut, New York, etc.  Select a state without customers 

5 Last update: 12/04/2007  OPTIONAL – Firing off the Function “onchange” – 1 of 2  Another common functional requirement in dependent combo-box applications is for the form to be submitted when the user selects a value in the combo-box (not requiring them to click a submit button, but merely select a new value). This can be accomplished by adding a single JavaScript statement to an onchange event for the combo-box: document.getElementById(' : ').click(); document.getElementById(' : ').click(); Document.getElementById – a JavaScript statement that returns the address of a component (' : ') (' : ') – the fully qualified (JSF-ID) component name in the HTML.click();.click(); – a JavaScript API that “clicks” a Submit Button  Example from our project: document.getElementById('form1:buttonGetCustForState1').click(); document.getElementById('form1:buttonGetCustForState1').click();  Note that the above example assumes:  Default Form Id  Default Button Id: – if you dragged the GetCustForState function onto the page

6 Last update: 12/04/2007  OPTIONAL – Firing off the Function “onchange” – Workshop  Where to enter the onchange JavaScript function? StateAbbrev  Select the StateAbbrev combo-box. Quick Edit view  From the Quick Edit view onchange  Select the onchange event and code the statement shown here…  Run the page – and see how it works!  See notes on one more optional technique…(hiding the Submit Button) QuickEditView