- Advanced Use Cases
Use Components Only on Specific Tabs
When building a search interface, you might want to show components only when a user selects a specific tab.
To do so, add the
data-tab-not options on any HTML element inside your Search Interface (see Coveo SearchInterface Component). The element doesn’t need to be a Coveo component.
For more information on the specific syntax to use, see Coveo Tab Component.
Facets are already not displayed when no result fits their criteria. For this reason, you usually don’t need to add the
data-tab-not option on facets.
The following use cases present examples on how to use the
Displaying Help Text Only When a Specific Tab Is Selected
In your search page, you have a few different tabs.
You want to display helpful text to your users to let them know, when they’re not on your All Content tab, that they’re not viewing all of the available content.
To do so, you choose to use a simple
div element with the
The markup for your text box would look like this:
<div class="help-text" data-tab-not="All"> You're not currently viewing all of the available content. To view all the content, select the <strong>All Content</strong> tab. </div>
Displaying Different Facets Based on the Selected Tab
In your search page, you have three tabs:
All Content, which shows your documentation pages as well as all of your products
Knowledge, which only shows documentation pages
Products, which only shows your products
When a user is on your All Content tab, you want to display all facets.
However, when a user selects the Knowledge tab, you want to display only the FileType and Author facets.
Finally, when a user selects the Products tab, you want to display only the Year facet.
The markup of your search page would look like this, with certain sections skipped for brevity:
<body id="search" class='CoveoSearchInterface'> <div class="coveo-tab-section"> <a class="CoveoTab" data-id="All" data-caption="All Content"></a> <a class="CoveoTab" data-id="Knowledge" data-caption="Knowledge"></a> <a class="CoveoTab" data-id="Products" data-caption="Products"></a> </div> <!-- ... --> <div class="coveo-main-section"> <!-- ... --> <div class="coveo-facet-column"> <div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All,Knowledge"></div> <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All,Knowledge"></div> <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All,Products"></div> </div> </div> </body>