Home > ApEx > ApEx: Search facility on every page

ApEx: Search facility on every page

Back in April I blogged about using the BRANCH_TO_PAGE_ACCEPT request value. This entry talks about how you can use this request value (amongst other things) to implement a search on every page of your application.

THE TABLES
The below makes reference to just one very simple table which contains details of CDs.

Table definition:
CREATE TABLE cds ( id NUMBER , album_name VARCHAR2(200) , artist_name VARCHAR2(200));

THE EFFECT

Enter CD ID
To see this effect in action click here. The bit we’re interested in is the text box on the left of the screen labeled “Enter CD ID”. Type the ID of a CD held in the database (only IDs 1 to 7 exist at the moment) and click “Search” (or press ENTER) and you will be taken directly to the details for that CD. The buttons labeled “Go to Example Page A” and “Go to Example Page B” will take you to pretty much entirely empty pages in the application. These pages are there just to highlight the fact that the “Enter CD ID” textbox is available on every page of the application.

STEP 1: Creating the Search Page (page 3)
Note: This and all the other pages should be of type “No tabs with Sidebar”.

The Search Page
On this page there’s one text item labeled “Enter Album ID” with a name of “P3_SEARCH”, a SEARCH button and a hidden item called P3_STATUS. On clicking the SEARCH button a process of type PL/SQL is fired, whose source is:
BEGIN
SELECT 'FOUND'
INTO :P3_STATUS
FROM cds
WHERE id = :P3_SEARCH;
EXCEPTION
WHEN no_data_found THEN
:P3_STATUS := 'NOT_FOUND';
END;

All this does is:- If a row can be found in the CDS table with the ID that was entered into P3_SEARCH field then P3_STATUS is set to ‘FOUND’, otherwise it is set to ‘NOT_FOUND’.

There are also 2 branches on this page.

Branch 1: The first branch takes us to the “View CD Details” (page 2) and sets the item P2_ID on that page to have the same value as that which was entered into P3_SEARCH. This branch is only fired if P3_STATUS = ‘FOUND’ (i.e. if there is a CD in the table with the ID that was entered into the search field.)

Branch 2: This second branch takes us back to the Search Page (page 3) and fires only if P3_STATUS= ‘NOT_FOUND’ (i.e. if there is not a CD in the table with the ID that was entered into the search field.)

3.jpg

STEP 2: Creating the View Details Page (page 2)

This is the page which shows details of specific CDs held in the database. 4.jpg
The important part of this page is the Before Header PLSQL process which populates the items on the page which details of the CD we are interested in:
SELECT album_name , artist_name
INTO :P2_ALBUM_NAME , :P2_ARTIST_NAME
FROM cds
WHERE id = :P2_ID;

Step 3: Page Zero

With pages 2 and 3 built there is essentially a fully functioning (although very simple) search facility: You can type in the ID of a CD and get its details. Now we need to make this search functionality accessible from every page of the application. The following achieves this: An HTML region has been added to page Zero in “Region Position 02″ with a template of “No Template” and a source of the following:

<script language="javascript">
function doSearch() { window.location='f?p=&APP_ID.:3:&SESSION.'
+':BRANCH_TO_PAGE_ACCEPT'
+'|SEARCH:::P3_SEARCH:'
+document.getElementById('sidebar_search').value; }

function enterPressed(e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}

if (keycode == 13){ doSearch(); return false; }
else { return true; }
}

</script>
<span style="width:90px;" align="center"> Enter CD ID </span>
<br/>
<input type="text" id="sidebar_search" style="width:90px;"
onkeypress="return enterPressed(event);"
onclick="enterPressed(event);">
<br/>
<input type = "button" value="Search" style="width:90px;" onclick="doSearch()">

You’ll notice that the javascript function “doSearch” redirects to page 3 (the search page) setting the REQUEST value to “BRANCH_TO_PAGE_ACCEPT|SEARCH”. Going to the URL specified in the doSearch function is exactly the same as having submitted the search form on page 3 itself (in virtue of the presence of BRANCH_TO_PAGE_ACCEPT in the REQUEST value). It is this which allows the search functionality in the sidebar to work on every page.

The “enterPressed” javascript function ensures that pressing the ENTER key when focussed on the search field does exactly the same as clicking the search button.

OPTIONS

This is a very simple example. You might, for example, want to:

* Make the search more flexible than just searching for an exact ID (using LIKE or Oracle Text etc.) You could then redirect directly to the record in question if only one hit is returned or to a list of Search Results if more then one record is returned. See blog entry here for a method of achieving this.

* Only show the Search Box on certain pages of your application. To achieve this you could add a condition of type “Current page is contained within expression 1” to the No Template HTML region on page Zero

* Make it prettier :)

THE CODE

You can download the application which demonstrates this from here.

Advertisements
Categories: ApEx
  1. September 15, 2007 at 5:07 pm

    Hello,

    Nice example one very small/nitpicking detail, you write your onclick attributes as onClick and they should always be lowercase (onclick).

    Carl

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: