Manage Components on a Per-Tab Basis

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

Coveo for Sitecore 5.0.239.2

When adding tabs to your search interface, you most likely want to manage your components on a per-tab basis. The Coveo JavaScript Search Framework data-tab and data-tab-not attributes may be used to show components only when a user selects one or several specific tab(s) (see Use Components Only on Specific Tabs).

In the February 2019 version of Coveo for Sitecore, a new data source option called Additional Data Attributes was added on many Coveo Hive components to leverage Coveo JavaScript Search Framework options not directly available in the data source itself (see Pass Non-Fronted JavaScript Framework Properties to Hive Components). The Additional Data Attributes option is therefore the mechanism you should use to define component visibility on a per-tab basis.

Note

Facets are already not displayed when no search result item contains the associated field. Leveraging the data-tab and data-tab-not attributes with the Additional Data Attributes option on facets should therefore not be used when the filtering specified on the Coveo Tab component data source already eliminates the possibility of having result items which contain the facet field.
Example

You have added several tabs in your Coveo for Sitecore search interface. On the All Content tab, your users can search for any item in your web database. On the Staff tab, you’ve configured a filtering rule so that only items based off of a staff template. You already have numerous facets displayed when the All Content tab is selected and you feel that it’s only relevant to display the Department facet when a user selects the Staff tab.

To display the Department facet only when a user selects the Staff tab

  1. Add the Department facet to your search interface (see Coveo Facet).

  2. In the Sitecore Experience Editor, select the Department facet.

  3. In the floating toolbar, select the Edit the rendering’s data source option. It should be the leftmost option in the toolbar.

  4. Scroll all the way down to the Attributes section.

  5. Under Additional Data Attributes, in the key field, type tab.

  6. In the value field, paste the DOM Unique Id value of the Staff Coveo Tab component.

    FacetTabInAdditionalDataAttributes

  7. Click OK. The changes are applied immediately in the Experience Editor.

  8. Publish your changes.

Notes

  • Use camel case notation for multi-word Coveo JavaScript Search Framework attributes (see Coveo JavaScript Search Framework). For example, type tabNot in the Additional Data Attributes key field to reference the data-tab-not Coveo JavaScript Search Framework attribute.

    AddtionalDataAttributesMultiWordAttributes

  • To specify many tabs in the Additional Data Attributes value field, use a comma to separate your DOM Unique Id values.

    AddtionalDataAttributesMultiValues