Build a JSF search page with EGL using Rational Business Developer

Lesson 5: Customize the search results

In this section, you learn to make a more complex data table to display your search results.

Until now, each JSF component you have added to Web pages has been bound to data from a single database table. If you are using a complex relational database, you may want to work with data from more than one table at a time.

In this section, you customize the results by displaying data from both the Customer table and the State table. In this way, the results show both the customer's name (from the Customer table) and the full name of the customer's state (from the State table) instead of the two-letter abbreviation. You also manipulate the results by combining the customer's first name and last name into a full name field. The resulting data table looks like this:

The easiest way to create a customized data table like this is to create a customized EGL record that represents a single record in this data table. Then, you create an array of these records that is bound to the data table. The customized EGL record you create in this section has the following three fields:

• The email field, which holds the customer's e-mail address from the Customer table.
• The fullName field, which holds the customer's combined first and last name from the Customer table.
• The State field, which holds the full name of the customer's state. To get the full name, the search function cross-references the customer's state abbreviation from the Customer table with the list of abbreviations and state names in the State table.

Add code to the library

Perform the following steps.

1. Open SearchLibrary.egl.
2. Add the function shown in Listing 18 to the library.

                    
function getOneState(state Statetable)
  get state;
end

3. The stateTable record is defined in the file Statetable.egl, so if you did not use code completion to enter that function, you must import that record.
4. Add the following statement to the SearchLibrary.egl file, immediately after the package libraries; line, as shown in Listing 19

                    
import eglderbyr7.data.Statetable;

5. Add the code shown in Listing 20 to the file, just after the final end statement in the library.

                    
Record customizedResult type basicRecord
  fullName   string
    {displayName = "Full Name"};
  email      string
    {displayName = "Email Address"};
  stateName  string
    {displayName = "State"};
end

Note: Because the library itself can not contain Record definitions, you must add the customizedResult record definition after the end statement that closes the library.

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

Here is the complete code (egl_code02-01-05a.dita, 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-05a.dita file.

Back to top

Add code to the page code file

1. Return to the customersearch.jsp page.
2. Right-click inside the customersearch.jsp page and click Edit Page Code.
3. Add the following variable definition to the JSF Handler, after the customerStates string[0]; line, as shown in Listing 21.

                    
allRecords customizedResult[0];

4. This variable represents the new search results, based on the customized record that you just created.
5. If you did not use code completion to insert this line of code, add the import statement shown in Listing 22 to the JSF Handler, below the package jsfhandlers; line.

                    
import libraries.customizedResult;

6. Add the function shown in Listing 23 to the JSF handler.

                    
function generateCustomResults(passedResults Customer[])
  allRecords.removeAll();
  oneRecord customizedResult;
  counter int = 1;
  state Statetable;
    
  //loop once for each search result returned
  while (counter <= (passedResults.getSize()))
              oneRecord.fullName = passedResults[counter].FirstName ::
                " " :: passedResults[counter].LastName;
              oneRecord.email = passedResults[counter].EmailAddress;
              state.StateAbbrev = passedResults[counter].state;
              SearchLibrary.getOneState(state);
              oneRecord.stateName = state.StateName;
              allRecords.appendElement(oneRecord);
              counter = counter + 1;
  end
end

7. This function assembles the customized search results. You must call this function at the end of the searchFunction() function.
8. Add the line of code shown in Listing 24 immediately before the end statement that closes the searchFunction() function in the JSF Handler:

                    
generateCustomResults (searchResults);

9. Save the file.

The new function you added to the JSF handler assembles the customized search results by following these general steps:

1. Assemble the customer's full name from the first and last name.
2. Get the customer's email address.
3. Get the abbreviation of the customer's state.
4. Look up the state name that matches the abbreviation.
5. Add the full name, email address, and state name to the allRecords array.

Here is the complete code (egl_code02-01-05b, zipped up and available in the Downloads section) for the customersearch.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-05b.html file.

Back to top

Create the customized data table

1. Return to the customersearch.jsp page.
2. If you want to remove the old search results, you can delete the old data table. These steps are optional:
   1. Click anywhere in the old search results table to set the cursor focus there.
   2. Press the down arrow key. The entire data table is now selected.
   3. Press Delete. The data table is removed from the page.
3. From the Page Data view, drag allRecords - customizedResult[] onto the page, just below the old data table location. The Insert List Control window opens.
4. Click the radio button next to Displaying an existing record (read-only).
5. Click Finish. The new data table is created on the page.
6. Save the page.
7. Test the page.

Now when you search for a customer, you see the customer's full name, e-mail address, and full state name in the data table. The page looks like that shown in Figure 16.

Back to top

Section checkpoint

You have customized your search results by combining the first name and last name fields into a full name field, and by translating the two-character code from the state field into the full name of the state.

In this section, you learned how to do the following things:

• Add a function to the library that customizes results
• Add a record to the library file, outside the library itself
• Add the new customized results function to the JSF Handler
• Place a new results table on the Web page
• Bind the new results function to the table

6 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

---

6 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