Adding search to our app

Introduction

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:

searchbar

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:

searchbox

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);
viewScope.put(“names”,persons);

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:

acgtive

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.

<![CDATA[#{javascript:database.updateFTIndex(true);
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:

endresult

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.

          

        0}]]>

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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