< Previous | Next >

Lesson 3: Use the OR search condition

In this lesson, you add a radio button group to the page that allows the user to choose between an AND search condition and an OR search condition.

When you run this improved page, it will look like this:

Finished search page from the end of this lesson

Add the OR search code to the library

In the previous lesson, you added a function that searches with the AND condition. In the following steps, you add a function that searches with the OR condition. In this way, the user will be able to search for records that match either a last name or a state.
  1. Open the SearchLibrary.egl library file.
  2. Add the following code to the file, just before the final end statement:
    	function NameAndStateSearch_Or(lname STRING in, 
    			state CHAR(2) in, customer Customer[])
    		get customer with
    			#sql{
    				select
    					CUSTOMERID, FIRSTNAME, LASTNAME, PASSWORD, PHONE, 
    					EMAILADDRESS, STREET, APARTMENT, CITY, "STATE", 
    					POSTALCODE, DIRECTIONS
    				from EGL.CUSTOMER
    				where LASTNAME like :lname 
    					or "STATE" = :state
    			order by
    				CUSTOMERID asc
    			};
    	end

    This function is identical to the NameAndStateSearch_And function you added in the previous lesson, except that it uses OR instead of AND in the where statement.

  3. Save the file. EGL generates the library automatically.
  4. Close 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 3.

Add a radio button group to the page

Now that you have two different search functions, you need to add a radio button to the page so the user can choose which type of search to use.
  1. Return to the customersearch.jsp file.
  2. Add a new line above the Submit button by placing the cursor to the left of the Submit button and pressing Enter.
  3. From the Palette, open the Enhanced Faces Components drawer.
  4. Drag a Radio Button Group onto the new line.
  5. Click the radio button group to select it.
  6. If you do not have the Properties view open, open it by clicking Window > Show View > Properties.
  7. In the Properties view, click the Add Choice button. The Add Choice button is on the far right of the Properties view. A new choice for the radio button group is listed in the table to the left of the buttons.
  8. In the Label field of the new choice, type this text:

    AND

  9. In the Value field of this choice, type this text:

    AND

  10. Click Add Choice again.
  11. Type this text for the Label and Value of the second choice:

    OR

    The properties view looks like this when you have finished:
    Properties view showing the options for the radio button group
  12. Save the page.
The page looks like this when you finish adding the radio button group:

Appearance of the customer search page

Add the OR search code to the page

Next, you must configure the JSF handler to use the input from the radio button to decide which search function to use.
  1. Right-click a blank area of the page and click Edit Page Code from the menu. The file customersearch.egl opens in the editor.
  2. With the variable declarations at the top of the handler, add this line of code:
    andOr CHAR(3);
    Later, you will bind this variable to the radio buttons. It holds the value "AND" or "OR," depending on which radio button you select on the page.
  3. Replace the function call to NameAndStateSearch_And with the following code:
    		if (andOr == "AND")
    			SearchLibrary.NameAndStateSearch_And(
    			searchTerms.LastName, 
    			searchTerms.State, searchResults);
    		else
    			SearchLibrary.NameAndStateSearch_Or(
    				searchTerms.LastName, 
    				searchTerms.State, searchResults);
    		end
    
    The entire function now looks like the following code:
    	function searchFunction()
    		searchTerms.LastName = searchTerms.LastName+"%";
    
    		if (andOr == "AND")
    			SearchLibrary.NameAndStateSearch_And(
    			searchTerms.LastName, 
    			searchTerms.State, searchResults);
    		else
    			SearchLibrary.NameAndStateSearch_Or(
    				searchTerms.LastName, 
    				searchTerms.State, searchResults);
    		end
    
    		resultMessage = " customer(s) found.";
    		numberOfResults = searchResults.getSize();
    
    	end

    This function now calls different functions depending on the value of the andOr variable.

  4. Save and close the file.
  5. Return to the customersearch.jsp page.
  6. From the Page Data view, bind the andOr - char(3) variable to the radio button group by dragging it onto the radio button group on the page.
  7. Bind the searchFunction() function to the Submit button on the page.
  8. Save the page.
  9. Test the page.

When you test the page, try using the new radio button functions. You must select one of the radio buttons for the search page to work properly.

This search page is still difficult to use because there are not many records in the sample database and many states to guess from. In the next lesson, you will change the State input field to a combo box that lists all of the states used in the database.

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

Lesson checkpoint

You now have a search page that can search based on two parameters simultaneously, or can find results that match one, but not the other.
In this lesson, you have learned how to do the following:
  • Add an OR search to the search function in your EGL library
  • Add a radio button group to your search page
  • Add the OR search code to the JSF Handler
  • Bind the new search function to the radio button group
Now you are ready to begin Lesson 4: Populate a combo box dynamically.
< Previous | Next >

Feedback