Dynamically Populating a Multiple Selection List Box

1. Dynamically Populating a Multiple Selection List Box This Learning Module shows how to use EGL to dynamically populatea Multi-Selection List Box.

2. Dynamically Constructed Selection Controls In this lab, we will learn how to populate a Multiple Selection List directly from server-side information.  Here’s how you will do this: • Starting on the next slide (steps begin on the next slide), you’ll create a new page. • Then you will create a JSFHandler that contains an array populated from the database • The array will have additional “annotations” (properties) that “hook into” the JSF Selection controls • You will add a JSF component to the page • Then you will bind the data to the component

3.  Dynamically Constructed Selection Controls – JSFHandler • Create a new .jsp web page named: dynSelection_multiSelection.jsp • Using the code in the Notes section of the document, (Copy/Paste and) replace the existing default JSFHandler code. • Note the following: • In the array record definitions there are new properties that bind server-side data directly to JSF controls: • {selectedValueItem = <var> • This properties specifies which: • Single field receives the result of a single selection control • @SelectionList – a property “annotation” that points to: • labelItem = <var> • Specifies which field – FROM THE ARRAY RECORD – will be used to display selection values • valueItem = <var> • Specifies which field – FROM THE ARRAY RECORD – will be used to return the selected values

4. Dynamically Constructed Selection Controls – Page and Layout • Drag a new List Box – Multi Select control onto the page inside of the left column of a two columned HTML Table • Bind the statesML array to the new control • Drag the selectedChoiceML – string control onto the page • Drag a command button onto the page

5.  Run on Server • Note that the Multiple Selection List Box was populated with dynamic data pulled from the database.