Build a JSF search page with EGL using Rational Business Developer

Lesson 4: Populate a combo box dynamically

In this section, 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 try to prevent user error by simplifying the decisions that the user must make wherever possible. In this section, 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. In addition, 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 function shown in listing 15 to the library:

                    
function getAllCustomerStates(listOfStates string[])
  customers Customer[0];
  counter int;
  
  get customers with
    #sql{
      select EGL.CUSTOMER."STATE"
      from EGL.CUSTOMER
      group by EGL.CUSTOMER."STATE"
      order by EGL.CUSTOMER."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 that 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 that 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 (egl_code02-01-04a.html, zipped up and available in the Downloads section) for the SearchLibrary.egl file. If you see any errors marked by red X symbols in the file, make sure that your code matches the code in the egl_code02-01-04a.html file.

Back to top

Add code to the JSF handler

1. Return to the customersearch.jsp page.
2. Right-click inside the customersearch.jsp page and click Edit Page Code.
3. After the line andOr char(3);, add the line of code shown in Listing 16.

                    
customerStates string[0];

4. This variable holds the list of states returned by the function in the library.
5. Add a blank line after Function onPreRender(). Then, add the line of code shown in Listing 17 on the blank line.

                    
SearchLibrary.getAllCustomerStates(customerStates);

6. Save the file.
7. Generate the file.

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

Here are some technical notes on the code that 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 (egl_code02-01-04b.html) for the customersearch.egl file, zipped up and available in the Downloads section. If you see any errors marked by red X symbols in the file, make sure your code matches the code in the egl_code02-01-04b.html file.

Back to top

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 section. 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.

Perform the following steps.

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 searchTerms - Customer.
6. Under searchTerms - Customer in the Page Data view, drag State - State onto the combo box.
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 that 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, click customerStates - string[].

The Select Page Data Object window looks like that shown in Figure 14:

ALT:

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.

Back to top

Section checkpoint

You have created a combo box on your Web page that creates a list of search parameters.

In this section, you 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.

5 of 11 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Lesson 1: Create a simple search page
• Lesson 2: Add code for the search function
• Lesson 3: Use the OR search condition
• Lesson 4: Populate a combo box dynamically
• Lesson 5: Customize the search results
• Lesson 6: Use type-ahead to prompt the user
• Lesson 7: Create a custom AJAX request
• Download
• Resources
• About the author

---

5 of 11 | Previous | Next

Next steps from IBM

• Try: Rational Business Developer
• Community: EGL Cafe
• Buy: Rational Business Developer

Dig deeper into Rational on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers