Written by The Jahia Team
 
Developers
   Estimated reading time:

At its core, Augmented-Search is a GraphQL API that can be called by a diverse set of front-end (or back-end) technologies to build a search experience.

As we were designing Augmented-Search, we identified three main approaches that can be taken by Jahia developers for building a search front-end:

  • One of the approaches consists of calling the GraphQL API directly and building the user interface from scratch using technologies search as React and Apollo Client. Taking this route provides you with the most flexibility, but depending on your existing knowledge in this domain might require more time than the two other approaches. This section of the documentation will not cover it in detail since other pages of the Academy contains such content
  • Another approach consists of building your search experience using our search-ui jahia connector which provides an interface between Elastic search-ui components and Jahia's GraphQL API. This gives you access to a wide set of search-oriented react components to get started quickly.
  • Finally, you can also build your search experience starting with our Augmented-Search sample UI. Although we strongly discourage using the module "as-is" (mostly due to styling consideration), it would allow you to get started very quickly and can be customized to fit your needs.

 

Elastic Search-UI and Jahia Search-UI Connector

Elastic, the company behind Elasticsearch (which is the data store used by Augmented-Search) is maintaining a repository of UI elements to accelerate the building of search interfaces, or in their own word: "...for the fast development of modern, engaging search experiences.".

Alongside those components, Elastic built to connectors to interface with their own products (app-search and site-search), and fairly early on in the project, we decided that the best approach to avoid re-inventing the wheel, was to implement our own connector. The Jahia connector, built similarly to Elastic's own, provides this interface between Elastic search-ui and Jahia GraphQL API.

If you want to integrate with search-ui components but don't want to start from our Augmented-Search sample UI, you can simply integrate search-ui-jahia-connector in your project (don't hesitate to look at how we did it for our sample UI) and start using search-ui components.

Augmented Search sample UI

As mentioned earlier on this page, our sample UI was built as a convenient codebase to get started quickly with Augmented-Search, but it will need to be customized to your needs, both from a functional and a design standpoint.

Our objective while developing and maintaining this sample module is to focus on functionalities, while no effort will be spent on styling (since each site is different).