Skip to end of metadata
Go to start of metadata

This page explains how to link a Tab Component in a Coveo Search Page to other components.

This lets you hide components on your page based on the current selected tab.

Set Up Your Components to Exclude

There are two ways for configurable components to be excluded from a tab component. You can either use an existing Coveo parameters template, or create your own rendering parameter.

Using Existing Coveo Parameters Templates

For Coveo Facet and Coveo Sort components, refer to Using Sitecore Items for a Component Properties to set up your component properties.

Creating Your Own Rendering Parameter That Can Be Excluded

  1. Create a new template or use an existing one.
  2. In the Content tab, in the Data section, select the Base Id Template, located in the /templates/CoveoModule folder.
  3. It is now possible to insert a new item based on this template. Every item created using this template can be selected in the Tab components Exclude Components property.

Choosing Which Component to Exclude in Your Tab

  1. Edit the tab properties by opening a Coveo Tab and clicking on Edit Properties.
  2. Get to the Exclude Components section.
  3. Navigate in the tree to the item you want to exclude.
  4. Double-click on it, or click the right arrow to select the item. It should appear on the right side, in the Selected section.
  5. Click OK.
  6. Save your page, and wait for it to refresh.
  7. Select the tab. The excluded component should now be hidden.

    BeforeAfter

 

JavaScript Binding

It is also possible to bind your elements using JavaScript.

This is useful to hide any component with an ID on your page without resorting to Rendering Parameters.

Bind IDs to a Tab Component

The excludedItemIds property is an array containing every ID you want to hide when the tab associated with tabId is selected.

Given the following example:

TabExample.html

When the showEverythingTab is selected, the content section will show:

TabExample.html

While selecting myTabId, it will only show:

TabExample.html
  • No labels