This post describes how to create custom Mindbreeze search interfaces using the built-in Mindbreeze client.js file. This post is a follow up to our post on Four Options for Creating Mindbreeze Search Interfaces where we mention Option 3 is creating custom Mindbreeze web applications. For this example, I will be using my local web server with XAMPP for Windows which uses Apache in the background. Setting up XAMPP is beyond the scope of this blog post, but this approach can be taken with any web server or architecture. The widgets and html snippet references in the post are based on the following documentation from the Mindbreeze website: Development of Search Apps.

Creating a Basic Search Page

To begin, I created a blog.html file referencing Mindbreeze’s client.js file and using RequireJS to load the Mindbreeze search application. To do this, I created a new application object and told the page where the starting <div> block is using the rootEl property of the application. Since I did not want the page to run a blank search right away, I also added the startSearch property and set it to false. There are a few mustache templates that I injected onto the page by copying and pasting from the default Mindbreeze search application (index.html). I then removed some of the optional elements to create a no-frills search page as shown in the snippet below. I’ve included the templates for result count and spelling suggestions, which are contained in the searchinfo and results templates respectively.

Navigating to this page with a query parameter (e.g. ?query=ALL) returns a simple search results list without any styling.

We can now add our own custom styling to the page. I added the Bootstrap CDN, along with jQuery to style my page.

Adding some bootstrap class information like container and col-md-9 for the results helps me quickly style the page for adding on facets. There are two different types of facets that Mindbreeze offers: FilteredFacets and FilteredFacet.  FilteredFacets allow for the configuration page in the Management Center to control what facets are displayed on the page.  FilteredFacet allows developers to manually add the desired facets individually.  For this demonstration, I will be manually adding a facet using FilteredFacet. This is shown below with the addition of the facet for author.

We can see that I now have the author field as a configured value.  There are more configurations offered like changing the template of the results in the filter or HTML tags, allowing user input, and modifying the title label. Information on these options can be found here: Mindbreeze Filtered Facet Widget. Now we will add the search form onto the page. This will allow suggestions to show up when a user is typing a query.  You can add additional parameters to the input tag to tell Mindbreeze which data sources to run suggestions against like popular searches, recent searches, and document properties.  This documentation is available here: Mindbreeze Suggestions. We’ll style the suggestions in the next section.

Now we want to add pagination or infinite scrolling to allow the loading of more results.  For this example, I will use paging via the Mindbreeze pages tempalte. This will allow page numbers to display in list format and Mindbreeze will be able to handle the paging actions for us.

Modifying Mustache Templates to Alter Result Data

Now we want to structure our result data. This is an easy way to adjust the information displayed for each result item. We can do this by overriding our results <div> and adding our own mustache.  Here is where you can make changes such as adding specific metadata for each result to display contextually relevant information.

Adding Custom Styling

After the appropriate data is returned, we can perform some styling.  For this, I am going to reference a custom CSS file on my Apache server.

We recommend that your CSS handle displaying search results on both mobile and desktop displays.

You can see the styling of the Suggestions (using jQuery UI autocomplete) below.

I’ve included the final code for this example below. You can see how this could be modified and extended to suit a wide variety of needs and use cases. If you have any questions about our experience with Mindbreeze or would like to know more, please contact us.