< Previous | Next >

Lesson 4: Populate a combo box dynamically

In this lesson, you enhance the search page by listing the possible choices for the customer's state in a combo box.
To make searching as easy as possible for the users, you should prevent user error and simplify the decisions the user must make wherever possible. In this lesson, you learn how to make the search page easier to use by replacing the State input field with a combo box. This combo box lists only the states that are represented by at least one customer record in the database, preventing the user from having to guess which state to use.

Add the code to the library

First, you need to add a function to your library that retrieves every state represented in the database. This function is simpler than the other functions in the library because you need to retrieve only one column from the database and there are no input parameters for the search, only an output array holding the list of states. You could use an array of customer records for the state information, but an array of strings is simpler to work with because you don't need the rest of the fields in the record.
  1. Open SearchLibrary.egl.
  2. Add the following function to the library:
    	function getAllCustomerStates(listOfStates STRING[])
    		customers Customer[0];
    		counter INT;
    
    		get customers with
    			#sql{
    				select "STATE"
    				from EGL.CUSTOMER
    				order by "STATE" asc
     			};
    
    		listOfStates.removeAll();
    		for (counter from 1 to customers.getSize() by 1)
    			listOfStates.appendElement(customers[counter].State);
    		end
    
    	end
  3. Save the file.
  4. Generate the library.
Here are some technical notes about the getAllCustomerStates function you just added:
  • This function accesses the customer records from the database in the same way as the getAllCustomers() function. The major difference is that the getAllCustomerStates() function selects only the STATE fields instead of every field in the Customer table.
  • The "group by" SQL command groups the results by state so each state is listed only once in the results.
  • The "order by" SQL command puts the results in alphabetical order; the asc keyword indicates ascending order.
  • The for loop moves only the state field from the records into an array of strings.

Here is the complete code of the SearchLibrary.egl file. If you see any errors marked by red X symbols in the file, make sure your code matches the code in this file: Completed SearchLibrary.egl file after lesson 4.

Add code to the JSF handler

  1. Return to the customersearch.jsp page.
  2. Right-click on the customersearch.jsp page and click Edit Page Code from the popup menu.
  3. After the line of code andOr CHAR(3);, add this line of code:
    customerStates STRING[0];
    This variable holds the list of states returned by the function in the library.
  4. Add a blank line after function onPreRender(). Then, add this line of code on the blank line:
    SearchLibrary.getAllCustomerStates(customerStates);
  5. Save the file.

The customersearch.egl file looks like this when you are done (some functions are compressed, indicated by a plus sign in the left margin of the page):

Code in the customersearch.egl file

Here are some technical notes on the code you just added:

  • The customerStates array holds the list of states represented by at least one customer in the database.
  • The line you added to the onPreRender function sends the customerStates array to the getAllCustomerStates function in the library, populating the array with the list of states.

Here is the complete code of the customersearch.egl file. If you see any errors marked by red X symbols in the file, make sure your code matches the code in this file:Completed customersearch.egl file after lesson 4

Add the combo box to the page

Adding a combo box that is populated dynamically is more complicated than adding a JSF control that has predefined values, such as the radio button group you added in the previous lesson. This combo box must be bound to two pieces of EGL data:
  • The customerStates array, which provides the list of options for the combo box.
  • The searchTerms.State variable, which holds the user's selection from the combo box.
  1. Return to the customersearch.jsp page.
  2. Click the STATE input field to select it and press Delete. The input field is removed from the page.
  3. From the Palette, open the Enhanced Faces Components drawer.
  4. Drag a Combo Box item to the page, and place it where the STATE input field was.
  5. In the Page Data view, expand JSF Handler > Data > searchTerms - Customer.
  6. Under searchTerms - Customer in the Page Data view, drag State - State onto the combo box.
    The cursor message reads, "Drop here to bind 'STATE' to the control 'menu1'".
  7. Click the combo box to select it.
  8. Open the Properties view. In the Properties view, note that the Value field is set to #{customersearch.searchTerms.State}, indicating that the value of the selection in the combo box is placed into the State field of the searchTerms record.
  9. In the Properties view, click Add Set of Choices, which is at the far right of the view, near the table of choices. A new item is added to the list of choices with the label <selectitems> and a default value. The <selectitems> label is a JSF tag that represents multiple options, rather than a single static label. In other words, the combo box will use the values you specify in the Value column for both the labels in the combo box and the values the labels represent.
  10. Next to the <selectitems> label, click the Select Page Data Object button in the Value field. The Select Page Data Object window opens.
  11. In the Select Page Data Object window, expand Data and click customerStates - string[].

    The Select Page Data Object window looks like this:

    Appearance of the Select Page Data Object window

  12. Click OK. Now the choices in the combo box come from the customerStates variable, while the selected state in the combo box is put into the searchTerms variable.
  13. Save the page.
  14. Test the page.

Lesson checkpoint

You have created a combo box on your web page that creates a list of search parameters.
In this lesson, you have learned how to do the following things:
  • Add the code for a limited search to the library.
  • Add code to the JSF Handler to call the revised search function.
  • Add a combo box to the web page.
  • Bind the revised search function to the combo box.
Now you are ready to begin Lesson 5: Customize the search results.
< Previous | Next >

Feedback