Our search bar is starting to take shape,
it is displaying on the screen when it knows the database is full text
indexed and the edit box has a default value that disappears when you click
it in the web browser. We have also bound the editbox to a viewScope variable.
In this part we’ll tell the editbox and the link what page to go to to
show the search results and then in Part 53 we’ll build the new XPage to
display the results.
Lets start with the link as it will
be the easier of the two and we’ll be able to resuse some of the code we
write in the editbox. Open the layout_Placebar custom control in your Domino
designer and select the link in the searchbar area.
When a user clicks on the link I’d like
to open an XPage called SearchResults.xsp and pass in the value that I’m
searching for. To do this I need to create an onClick event for the link
so switch to the events tab and then select the onClick event and then
click the ‘Add Action’. The action I’m going to add is a basic ‘Open Page’
action.
The page that I’m going to open will
be computed as an example of how you can use the viewScope variable. Click
on the diamond for the page to open argument and enter in the following
code :
"Search.xsp?searchValue="
+ viewScope.searchValue;
That’s everything we need to do for
the link. The editbox is a little more complex. We’d like to give the user
the ability to press the ‘enter’ key on the keyboard to kick off the search
so that they don’t have to click the link.
Select the editbox control in your domino
designer and go to the events tab. The event that we want to change is
the ‘onkeypress’ event. Select it.
For the server event we want to create
a basic ‘Open Page’ action just like we did above for the link using the
exact same code for the computed page. On it’s own this event is useless,
the user would only get to press one letter and the event would fire, to
make sure it only fires when the user presses the ‘enter’ key on the keyboard
we also need to write a ‘Client Side’ event.
In the same ‘onkeypress’ event switch
to the client tab and enter in the following code
This code checks to see what key has
been presses and if it is not the enter key then the event just returns
false, if on the other hand the event returns a true value because the
person has pressed enter then control is handed to the server side event
which opens the page.
So now we have accepted the search value
and instructed the page to go to the search.xsp XPage. In the next part
we’ll build that page.
I have a small comment for this part:In your search edit box you event.keyCode to determine wich key was pressed. Unfortunately this won’t work in Firefox. The best solution is replace it for this.keyCode.I really enjoyed working my way through your tutorial and all the information you’ve given. Thumbs up!
LikeLike
Hi
Thank you, Exactly what I was looking for. But I am not able to see the code portions in this page. Can you help.
Thanks a lot
Srinivas
LikeLike
I think the code that’s in the image which is not showing up is this:
getEvent = event.keyCode;
if (getEvent == “13”)
{ return true; }
else
{ return false;}
LikeLike