The tab widget adds tabs on top of the results in the search view, between which a user can switch to either filter the results or being redirected to pre configured links.

The tab widget can be initialized in the DATAFARI_HOME/tomcat/webapps/Datafari/js/search.js like this:

Manager.addWidget(new AjaxFranceLabs.TabWidget({
     id : 'tabwidget',
     elm : $("#facet_tabs"),
     field : "repo_source",
     rawTabs : [ {
     "label" : "Test",
     "href" : "http://www.francelabs.com"
     }, {
     "label" : "Test2",
     "href" : "http://www.google.com"
     } ],
     actifValue : "Test",
     container: "#tabs-container",
     showEmpty: true
}));

Here is the description of the available parameters : 

• id : the id of the widget, must be unique 

• elm : the jquery element in which the widget will be built. By default a pre-existing div with the id "facet_tabs" is ready to be used by the Tab widget, this is the reason why it is recommended to provide the $("#facet_tabs") jquery element that refers to that div. Of course you can build and use your own div as long as you follow the Widgets and CSSs good practices  

• field : (optional) the solr field that will be used to construct the tabs. The field must be a text field because this feature is like the Table widget (See [DEPRECATED] Ajaxfrancelabs Widgets and Modules), the difference is that the facet values will be displayed as tabs and a tab click will apply a query filter associated to the corresponding facet value

• rawTabs : (optional) JSON array used to create pre-defined tabs that will redirect the user to a pre-configured URL. The JSON array must be composed by a list of JSON objects that contain the following properties :

  • "label" and "href". The "label" field represents the tab name

  • "href" field represents the URL on which the user will be redirected by clicking on the tab

  • "keepURLParams" : (optional default to false) a boolean to say if url parameters (anything after the '?') should be kept, requires the href parameter to not contain any URL parameter if set to true. Useful for redirecting users to another Datafari while keeping track of their current search query.

Example : 

[
  {
     "label" : "Test",
     "href" : "http://www.francelabs.com",
     "keepURLParams" : true
  }, 
  {
     "label" : "Test2",
     "href" : "http://www.google.com"
  } 
]

• actifValue : (optional) used to define the default active tab.
  In case you use the Tab widget as a facet widget, this parameter should stay empty.
  In case you use the Tab widget with rawTabs, this parameter may be filled with a label value. In that case the default selected tab will be the one with the label corresponding to this parameter

• container: Must contain the css selector (not the Jquery Object) to get to the element containing the elm declared before. Used for styling purposes. Several tabs widget can share the same container.

• showEmpty: (optional, default to false) For facet tabs only. Used to say if the "All" tab must be displayed even is 0 results are present.

Here is an illustration of a widget tab configured with the field parameter : 

And the corresponding configuration in the search.js file :

Manager.addWidget(new AjaxFranceLabs.TabWidget({
     id : 'tabwidget',
     elm : $("#facet_tabs"),
     field : "extension"
     container: "#tabs-container",
}));

It is possible to show results with 0 entries. To do so, you need to configure your solr field so that the facet.mincount is 0, below is an exemple for the repo_source field that you would need to add to your solrconfig.xml:

<int name="f.repo_source.facet.mincount">0</int>

Then, if you want the "All" tab to also display when there are 0 results, you will need to add the parameter showEmpty: true to the widget instanciation like shown below:

Manager.addWidget(new AjaxFranceLabs.TabWidget({
    id : 'tabwidget2',
    container: "#tabs-container",
    elm : $("#facet_tabs2"),
    container: "#tabs-container",
    field: "repo_source",
    showEmpty: true
}));

Here is an illustration of a widget tab configured with the rawTabs parameter : 

And the corresponding configuration in the search.js file :

Manager.addWidget(new AjaxFranceLabs.TabWidget({
     id : 'tabwidget',
     elm : $("#facet_tabs"),
     rawTabs : [ {
     "label" : "Test",
     "href" : "http://www.francelabs.com"
     }, {
     "label" : "Test2",
     "href" : "http://www.google.com"
     } ],
     actifValue : "Test"
}));