Learning XPages Part 50 : Creating A Search Function
Tags : Lotus Domno XPages Search
Bookmark :
Right now our XPages phone book application is finished and reaches the first objective that I had laid out for the phone book. The other two objectives are not XPages related and won't be covered in this blog series. I could finish right here and release the application to OpenNTF but there is one more function I want to add before doing that...
I want to add a search function to my XPages application, this will involve adding in an area to allow the user to enter in the words they want to search for and a button to start the search process. I've decided to add my search bar to the right side of the placebar
I could have added it to the titleBar or even in the lefthand sidebar but I think that this location is the most logical as the search function really doesn;t belong as part of the application title and having it in the sidebar may confuse the user into thinking they are searching the current set of data they are viewing. By having the search bar above the main application area I hope that the user will know that they are searching the entire application.
Lets add the search bar, Open your layout_PlaceBar custom control and drag in a new panel control from the controls pane on the right of your screen. Go in to the source view and move the panel up to the top of the page so that it appears just under the opening DIV on the page. I have given my panel a name and I've set the styleclass to 'lotusRight'.
Into this panel we need to drag in two more controls. An Edit Box control and a Link control. For the Edit Box control I have given it a name of mySearchValue and I have also specified the width of the control to 200px.
For the Link control I have removed it's label value and I have also given it a friendly name
Because I don't have a label value I have specified an image. This is an image resource that I have imported into the image resources section of my application.
The source for the search bar's layout now looks like this :
Note that I have also added a top and righ margin to the overall panel control to move it into exactly the right place.
In the next part I'll add the events that are needed to the controls.
Bookmark :
Right now our XPages phone book application is finished and reaches the first objective that I had laid out for the phone book. The other two objectives are not XPages related and won't be covered in this blog series. I could finish right here and release the application to OpenNTF but there is one more function I want to add before doing that...
I want to add a search function to my XPages application, this will involve adding in an area to allow the user to enter in the words they want to search for and a button to start the search process. I've decided to add my search bar to the right side of the placebar
I could have added it to the titleBar or even in the lefthand sidebar but I think that this location is the most logical as the search function really doesn;t belong as part of the application title and having it in the sidebar may confuse the user into thinking they are searching the current set of data they are viewing. By having the search bar above the main application area I hope that the user will know that they are searching the entire application.
Lets add the search bar, Open your layout_PlaceBar custom control and drag in a new panel control from the controls pane on the right of your screen. Go in to the source view and move the panel up to the top of the page so that it appears just under the opening DIV on the page. I have given my panel a name and I've set the styleclass to 'lotusRight'.
Into this panel we need to drag in two more controls. An Edit Box control and a Link control. For the Edit Box control I have given it a name of mySearchValue and I have also specified the width of the control to 200px.
For the Link control I have removed it's label value and I have also given it a friendly name
Because I don't have a label value I have specified an image. This is an image resource that I have imported into the image resources section of my application.
The source for the search bar's layout now looks like this :
Note that I have also added a top and righ margin to the overall panel control to move it into exactly the right place.
In the next part I'll add the events that are needed to the controls.
