UI Development

Coveo Javascript Search Framework

Introduction:

Coveo is a platform that has unified search, uses machine learning, analytics to unlock the insights mainly known as Cognitive Search. It indexes the information which is stored in diverse repositories, and performs metadata enrichment on these indexed content.

We have various products of coveo in market such as:

  • coveo for Sitecore: It is the only relevance solution which is fully integrated into Sitecore. It maximizes the use of sitecore APIs and provides search-to-conversion which enhances the Sitecore’s Experience platform
  • coveo for Salesforce: It is a cloud native application that delivers AI-powered search available on the Salesforce AppExchange. Depending on the Salesforce edition, the coveo package comes up with indexes and many other features
  • coveo for Microsoft Dynamics 365: It enables you to start indexing your content into the cloud creating a transparent experience that offers Coveo’s AI capabilities. Many companies can connect all the content which is available across the organisations into single unified search
  • coveo for ServiceNow: It offers an AI powered search experience driven by your data by replacing the built-in search engine in customer portal and introduces new means of search to find the most relevant content

All the coveo products have the own version of JS search Framework which is in-built. Now let’s discuss about Coveo JS search in more detail:

Coveo Javascript framework:

As we discussed above, it is an open-source library, where in which you can use it’s in-built components like searchbox, tabs, facets etc. to create rich search interface. It also provides us some out-of-the-box interfaces where we can simply customize / modify them. The administrators can customize/modify the search interfaces using the Interface editor, while the developers can directly customize by modifying the HTML markup with appropriate framework attributes.
The coveo javascript Search framework is also called as Coveo Search UI, which can be easily installed. In July 2016, it became open-source. So you can easily install the Coveo search UI and modify the code as per your requirements. The code is written in Typescript, but it is compiled into JS which allows us to custiomize the code according to our needs.

Installation:
  1. Clone the repository from GitHub
  2. Install the project dependencies using npm
  3. Build the search project
  4. We have to run the webpack server by opening http://localhost:3000

We will now see the fully configured search interface which is pointing to a sample endpoint:

 

Endpoints:

If we want to perform HTTP request against the queries we use an interface object called as a search Endpoint. So one of the first step in setting up a fully functional search interface is to configure its search endpoint

To configure the new search endpoint, we use configureCloudV2Endpoint method. The most reliable and simplest way would be relying on API Key Authentication, which means passing an API key as a bearer token

 

Components:

Coveo Search UI provides various components which can be simply used or customized as mentioned above.
Some of the commonly used components are:

  1. SearchInterface:
    It is the root of the coveo search interface. It is the component which houses all other coveo components, and it also initializes the coveo by calling init()

  2. Searchbox: 
    The searchbox allows the users to perform queries using text input and a button, further more it also has additional features as Querysuggestions, Omnibox etc.
  3. Omnibox:
    Omnibox component, an extension of Querybox provides the same behaviors and options adding the type-ahead functionality to search input. It has the ability to enable and disable the certain features of type-ahead
  4. ResultList:
    Coveo displays the query results into ResultList component which can be multiple like a list, card or table. Each ResultList uses one or more templates to display the results.
    A ResultTemplate can be pre-built or can be custom (which is mostly the case). In order to create a custom template we have two engines,
    HTML engine and underscore engine

    1. HTML Engine:
      This is the simplest of two however it is rigid in implementation in terms of complex designs
    2. Underscore Engine:
      This makes the implementation flexible for complex designs. It is recommended to use underscore template
  5. DidYouMean:
    This component displays the possible query corrections. In case of no results for the searched query, it suggests the new query or can automatically trigger new query
  6.  Pager:
    This is a simple pagination component which is tightly coupled with results for the searched query
  7. Analytics:
    Coveo also provide analytics for the search page. It is used to post the analytics to coveo platform using REST apis

There are lot of components provided by coveo which can be referenced here: https://coveo.github.io/search-ui/globals.html

Coveo components can be added to the page in two ways:

  1. Automatic Initialization:
    Coveo parses under the root element and initializes the required components with the specified CSS classes
  2. Manual Initialization:
    If required we can manually initialize the component and attach the specified element using coveo.load()

 

Events:

We can make use of javascript events provided by coveo. The events are broadly under 2 categories: global events and component events

Global Events:
These are not associated with any particular component. These events further divided into two types: Initialization events and Query events

  1. Initialization Events:
    As the name suggests these are the events which are fired during the initialization of coveo framework (i.e.) coveo.init()
    The initialization events:

    • beforeInitialization
    • afterComponentsInitialization
    • restoreHistoryState
    • afterInitialization
  2. Query Events:
    As the coveo query is triggered, it fires the following query events according to the state of the query

    • newQuery
    • buildingQuery
    • doneBuildingQuery
    • duringQuery / duringFetchMoreQuery
    • queryError
    • preprocessResults / preprocessMoreResults
    • noResults
    • querySuccess / fetchMoreSuccess
    • deferredQuerySuccess

Component Events:

These events are usually fired by specific components, can be listened on the root element as all the events are bubbled in coveo search interface. Most of the events can be referred to the component firing it

Please note it is a leading practice to attach all the event listeners before coveo.init()

Methods:

This framework has many high level functions and methods which will make it easier to interact with the interface and also its components. We will discuss the most used methods below:

  1. init(param):
    It initializes the search interface, where param is search div element
  2. executeQuery(param):
    It executes the search query flow firing the required events without interacting with the search box, where param is the search interface element
  3. load(param):
    This method is used to add a coveo component at run time, where param is the name of the component. It returns a promise for the coveo component
  4. logCustomEvent(param1, param2, param3):
    In order to load custom events to coveo analytics, this method is used, where param1 is a search interface element, param2 is custom-event and param3 is the metadata
  5. state(param1, …):
    This method can be used to alter the state of the coveo search interface where we can modify the query, facets etc. Here param1 is search interface element and we can have multiple parameters which we can modify

 

This is the basic introduction to the coveo JS framework, stay tuned for a follow along example soon…

Links for reference:

  1. https://docs.coveo.com/en/375/javascript-search-framework/coveo-javascript-search-framework-home
  2. https://coveo.github.io/search-ui/globals.html

About The Author