< Previous | Next >

Lesson 5: Customize the search results

In this lesson, 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 lesson, 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 instead of the two-letter abbreviation (from the State table). 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:

Data table with full customer name and state name

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 lesson has the following three fields:
  • The email field, which holds the customer's email 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

  1. Open SearchLibrary.egl.
  2. Add the following function to the library:
    	function getOneState(state Statetable)
    		get state;
    	end
    The stateTable record is defined in the Statetable.egl file, so if you did not use code completion to enter that function, you must organize your imports (Ctrl+Shift+O).
  3. Add the following code 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.
  4. Save the file.
  5. Generate the file.

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

Add code to the page code file

  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. Add the following variable definition to the JSF Handler, after the customerStates STRING[0]; line:
    allRecords customizedResult[0];
    This variable represents the new search results, based on the customized record you just created.
  4. If you did not use code completion to insert this line of code, be sure to organize imports.
  5. Add the following function 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.STATE_ABBREV = passedResults[counter].state;
    			SearchLibrary.getOneState(state);
    			oneRecord.stateName = state.STATE_NAME;
    			allRecords.appendElement(oneRecord);
    			counter = counter + 1;
    		end
    	end
    This function assembles the customized search results. You must call this function at the end of the searchFunction() function.
  6. Add this line of code immediately before the end statement that closes the searchFunction() function in the JSF Handler:
    generateCustomResults (searchResults);
  7. 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 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 5.

Create the customized data table

  1. Return to the customersearch.jsp page.
  2. Optional: 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, email address, and full state name in the data table. The page looks like this:

Finished search page

Lesson 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 lesson, you have learned how to do the following:
  • 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
< Previous | Next >

Feedback