Learning XPages Part 51 : Giving Function To The Search Bar

Now that we have designed the basics of
the search bar lets go ahead and give it some functionality. Open the layout_PlaceBar
custom control in your domino designer to get started,

The search function in the database
will only work if the database has been full text indexed so the first
thing I’m going to do is hide the entire search bar. To do this I can compute
the visibility of the panel that contains the search box. Select the panel
( which is much easier to do in the source view of the custom control )
and then click on the diamond beside the ‘Visible’ setting. Select the
option to compute the value and in the JavaScript entry dialog box enter
in ‘database.isFTIndexed()’. This simple function will return ‘true’ if
the database has a full text index and false if it doesn’t.

For the search Edit Box control I’d
like to provide a hint to the end user so that they know it’s a search
box, to do this I’ll add a default value of ‘Search…’ and then make that
default value disappear if they click inside the edit box.

Select the edit box in designer and
look at the ‘All properties’ setion. Under the ‘data’ category you’ll see
the property for filling in the default value.

To make the default value disappear
we can make use of the ‘onFocus’ event. Switch to the events tab and find
the onFocus event. We want this event to run on the users web browser so
make sure you switch to the ‘Client Side’ and then enter in the following
JavaScript :

Document referes to the current document
you have open in the web browser. getElementByID allows you to access the
element in the document by it’s ID name. Because we don’t know the ID name
of the element till runtime we use #{id:mySearchValue} to make the XPages
processor fill in the correct ID name for the end box ( which has the XPages
ID of mySearchValue ). The .value = "" just sets it to blank.

Now this bit of code is very simple,
if you click into the field anything in there is deleted by setting the
field to "". The one problem you might see is if you click into
the field, fill in a few characters and then click out of the field and
then click back in the characters you have entered will disappear. One
way of resolving this would be to use the following JavaScript for the
onFocus event.

This code only clears the field if it
still contains the default value that we setup for it. This seems like
a nicer experience for the end user.

So where do we store the value entered
by the user ? Lets put it into a scope variable. In the properties of the
Edit Box select the Data tab. We need to bind the edit box with something
for it to get and store it’s value. I’m going to store it in a viewScope
variable so click on the ‘Advanced’ radio button and select ‘Scoped Variable’
from the use dropdown box. Select the correct scope for the variable, in
this case a viewScope, and then give the variable a name. I’ve called mine
searchValue.

The last functionality we need to do
is perform some sort of action when the user either presses the enter key
while typing in the search box. We’ll cover that bit tomorrow.