Adding search to our app


In this post I will demonstrate how to apply a search to our application described in previous posts, in which we read the JSON from Domino Access Service and parse it with the Jackson library to display it thereafter with a Repeat control.

Since I am using in our application the Application Layout control with a responsive Bootstrap UI (shameless pitch to glory the persons who delivered this great functionality to XPages) which includes a searchBar section and scrolling through 40K of person records is not something you want to anguish your thumb with, a search functionality gives the advantage to skip scrolling through unnecessary documents.

searchBar section

Here is how I set up the searchBar section in the Application Layout control:


As you can see I have defined a result page for the search, called search.xsp.

Here is how the search bar will look like for the user:


XPage search

beforePageLoad event

The beforePageLoad event has slightly changed compared with event in our initial XPage. This time we search for the search parameter defined in the searchBar section:

var query = context.getUrlParameter(“search”);
var persons = new Array();
persons = personsBean.getPersons(“http://dev1/fakenames40k.nsf/api/data/collections/name/people?count=25&search=” + query);

Next is the result list. I have added an additional list item and added the active class:

This item will display the search query we have provided:


The Repeat control has also changed slighty. The rows property has been adjusted. We calculate the number of documents returned by the full text search.

var query:string = context.getUrlParameter(“search”);
var vw:NotesView = database.getView(“people”);
var totNums:Integer = vw.FTSearch(query).toFixed();
return totNums}]]>

Also the text that indicates where we are in the result set has been modified:

Tip: since we are actually performing FT searches here perhaps it is better to put the counted results already from our initial call in a scope variable and re-use it =(

The button in our infinite scroll function/custom control has also been adapted. Here is the code:

Here is what the end result looks like after a search:


4 thoughts on “Adding search to our app

  1. Johnny Oldenburger 2015-May-15 / 12:26 pm

    Great post. Thanks for sharing.

  2. GC 2018-April-30 / 10:57 pm

    Hi Patrick,
    I want to display my search results documents in a view/repeat control. Can you give me an example how to show those. My view/repeat controls displays the parent documents and the search will look into child documents and if matches should display parents only. Any idea pls

    • Patrick Kwinten 2018-May-1 / 12:36 pm

      Hi GC, I do not know how your back-end code looks like but here you have 2 scenarios: 1) perform a search on the response documents. then use the document collection as source in the data-binding of a repeat control. within the repeat control for each entry you perform a lookup via the parentID (in the REF field of response). 2) perform a search on the response documents. then loop through the collection and for each entry you get the parent document, again via the parentID. Add each parent doc to a new collection and bind this collection to the repeat control. Should not be that difficult. I suggest the last scenario.

      • GC 2018-May-1 / 2:50 pm

        Hi Patrick, Thank you for your quick response. Right now i am playing with a simple code just to subtract the first entry and show rest all. This will help me before i go for entire script. Source code is below. Please correct me with the right code.



Leave a Reply to GC Cancel reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s