Learning XPages Part 51 : Giving Function To The Search Bar
Tags : Lotus Domino Xpages Search
Bookmark :
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.
Bookmark :
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.getElementById("#{id:mySearchValue}").value = "";
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.
var me = document.getElementById("#{id:mySearchValue}");
if (me.value === "Search...")
{
me.value = ""
}
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.
