Customizing DatafariUI - Search Tabs

Valid from Datafari 5.1 (UI 1.0.0-beta-0.6.0)

Checked for UIv2 1.0

The UI configuration allows to add graphical tabs below the search bar, between the All content tab and the Search Tools tab.

As of the writing of this documentation (March 2022), we propose two types of tabs :

FieldFacet : it will generate as many tabs as a field contains out of a result query. For example, with the "extension" field in our demo, it will create one tab per type of extension returned by the search query (for instance one tab for the pdf type, one for the doc type etc).
This type of tab has two parameters :
field : the field name used to generate the tabs
max: the max number of tabs that can be generated
Raw : This type of tab is called raw because it is just a link to a given URL. It has 2 parameters :
label : the label of the tab (it is i18n)
url: an HTTP URL.
target: (optional) define where to open the url. If absent, default is _self. Values accepted: _self OR _blank

These tabs can be declared as illustrated below in the ui-config.json, in the center property :

"center": {
    "main": [
      {
        "type": "SearchInformation",
        "data": ["filters", "facets"]
      },
      {
        "type": "ResultsList",
        "data": ["title", "url", "logo", "previewButton", "extract"]
      }
    ],
    "tabs": [
      { "type": "FieldFacet", "field": "extension", "max": 3 },
      { "type": "FieldFacet", "field": "repo_source", "max": 3 },
      { "type": "Raw", "label": "google", "url": "https://www.google.fr" },
      { "type": "Raw", "label": "LinkedIn", "url": "https://www.linkedin.com" }
    ]
  }

A field tab is based on a facet, one of those defined in the left or right fields. For instance, if you define a tab based on the repo_source facet, you MUST define the repo_source facet. Otherwise, your tab will not be displayed. If you do NOT want to have both the left facet and its corresponding tabs on tab, and you only want the tabs to be displayed, please set the SHOW parameter of the repo_source facet to false (see example above). If you do not do that, when on the ALL CONTENT tab, you will see both widgets, and the facet will disappear when clicking on one of the tabs corresponding to this same facet.

Here is an example :

{
  "left": [
    {
      "type": "FieldFacet",
      "title": "Extension",
      "field": "extension",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5,
      "show": false
    },
    {
      "type": "FieldFacet",
      "title": "Language",
      "field": "language",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5
    },
    {
      "type": "FieldFacet",
      "title": "Source",
      "field": "repo_source",
      "op": "OR",
      "minShow": 2,
      "maxShow": 5
    }
  ],
  "center": {
    "main": [
      {
        "type": "SearchInformation",
        "data": ["filters", "facets"]
      },
      {
        "type": "ResultsList",
        "data": ["title", "url", "logo", "previewButton", "extract"],
        "folderLinkSources": [],
        "folderTarget": "_blank",
        "previewTarget": "_self"
      }
    ],
    "tabs": [
      { "type": "FieldFacet", "field": "extension", "max": 3 },
      { "type": "FieldFacet", "field": "repo_source", "max": 3 }
    ]
  },
  "right": [],
  "searchBar": {
    "suggesters": []
  }
}

Note the repo_source field defined in the FieldFacet tab is also declared as the field parameters of a FieldFacet facet in the left section.

Select a tab will hide the associated facet (here, extension facet is hidden)