2.0.13 • Public • Published
Jahia logo

Jahia Search UI Connector

A connector based on Search UI Site Search Connector by Elastic

This connector aims at providing a compatibility layer between Jahia GraphQL API and Elastic Search-ui react components.



In order to use Search UI Jahia Connector, you simply need to add the "@jahia/search-ui-jahia-connector": "^1.0.0" package to the list of dependencies in your package.json

Then import the relevant components (described in detail below) in your app


Interfacing with Jahia's GraphQL Search API is done by instantiating the JahiaSearchAPIConnector object.

The following functionality is currently implemented:

  • onSearch
  • onAutocomplete
  • Sort


The following configuration is required in order for the custom request/response adaptors to work

Param Type Description
apiToken* string Jahia GraphQL API token
baseURL* string URL for Jahia server
siteKey* string Identifies which site search will be performed in
language* string The language in which to perform the search
workspace* string Specifies which workspace to perform search in LIVE or DEFAULT
nodeType* string Indexed document type to filter by (defaults to jnt:page)

Result Field Configuration

Fields in result set are determined by a list of instantiated Field object

Param Type Description
type* FieldType The type of field to return from search
name* string The JCR property name to retrieve
alias string Alternate name to be used in response
useSnippet string Field rendering type; snippet (HTML) or raw (Plain text)

Facet Configuration

There are 3 types of facets currently supported

  • Term
  • Range
  • Date Range
Facet Object Configuration
Param Type Description
type* string Type of facet [value|range|date_range]
disjunctive boolean AND[false] or OR[true] operation
ranges** Array Array of range objects described below

ranges field is required for Date/Number range facet. Below is the structure:

 let rangeExample = {
   //Label used for this range (required)
   name: 'jcr:lastModified',
   //At least `from` or `to` is required
   from: 'now-1M',
   to: 'now'

Note date_range value can be a date string or date math expression i.e now-1M


By following the guidelines below, you will be able to use JahiaSearchAPIConnector in your Search UI app. example_results

Import the require classes to be used in Search UI's SearchProvider

import JahiaSearchAPIConnector, {Field, FieldType} from '@jahia/search-ui-jahia-connector';

Instantiate the connector by providing the configuration of your server and search results.

Note* for testing purposes we will provide a fake string for apiToken. See connection options for how to generate the token.

let connector = new JahiaSearchAPIConnector({
        apiToken: 'none',
        baseURL: 'http://localhost:8080',
        siteKey: 'digitall',
        language: 'en',
        workspace: 'LIVE',
        nodeType: 'jnt:page'

Instantiate a list of fields to be returned from the search query

let fields = [
    new Field(FieldType.HIT, 'link'),
    new Field(FieldType.HIT, 'displayableName', 'title'),
    new Field(FieldType.HIT, 'excerpt', null, true),
    new Field(FieldType.NODE, 'jcr:created', 'created')

Facets are configured by using the following structure

let facets = {
  // Term Range Facet
  'jcr:keywords': {
    type: 'value',
    disjunctive: true
  // Date Range Facet
  'jcr:lastModified': {
      type: 'date_range',
      disjunctive: true,
      ranges: [
          from: 'now-1w',
          to: 'now',
          name: 'Last Week'
          from: 'now-1M',
          to: 'now',
          name: 'Last month'
          from: 'now-6M',
          to: 'now',
          name: 'Last 6 months'
          from: 'now-1y',
          to: 'now',
          name: 'Last year'

Define the configuration object for Search UI's SearchProvider components

let config = {
        searchQuery: {
            //Set defined fields for search query
            result_fields: fields,
            facets: facets
        autocompleteQuery: {
            results: {
                resultsPerPage: 10,
                //Set defined fields for autocomplete query
                result_fields: fields
        //Set the JahiaSearchAPIConnector connector that was defined above
        apiConnector: connector,
        hasA11yNotifications: true

At this point you should have all bricks necessary to successfully use Jahia's Search UI Connector.




Package Sidebar


npm i @jahia/search-ui-jahia-connector

Weekly Downloads






Unpacked Size

823 kB

Total Files


Last publish


  • cmailleux
  • shuber
  • gflores-jahia
  • jahiaadmin
  • mdechecchi
  • jahia-ci