Coveo Tab

Implements the Coveo JavaScript Search Framework Tab component. Coveo Tab renderings let you customize your search interface design and behavior. For example, Coveo Tab data source options let you:

You can also control the visibility of your other search interface renderings on a per-tab basis.

Usage Notes

Insertion Location

The Coveo Tab rendering is an Allowed Control in the following placeholder(s): Tabs

Example insertion sequence for the Coveo Tab rendering.

Coveo for Sitecore SXA rendering insertion locations are not limited by placeholder Allowed Controls. The Coveo Tab rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

You might want to insert all your Coveo Tab renderings in a Sitecore container and set the width of your tabs with the Sitecore grid system to have them displayed side by side.

Example insertion sequence for the Coveo Tab rendering.

Data Source Options

Option name Description
Caption See caption component option
Enterprise only
Boost expression rules
List of condition-action rules created in the Sitecore Rules Editor. The Coveo Boosting number is used as the QRE modifier value, which is correlated to the item ranking score by a 1 to 10 ratio.
Enterprise only
Filter expression rules
List of filter expression rules created in the Sitecore Rules Editor to apply on queries when the Coveo Tab is selected. These rules are applied on top of rules set on the Coveo Search Interface.
Exclude bucket folders in results Specifies whether to exclude bucket folder items from results. When selected, this option adds NOT(_template == ADB6CA4F03EF4F47B9AC9CE2BA53FF97) to the advanced query expression (aq) when the Coveo Tab is selected.
Exclude media folders in results1 Specifies whether to exclude media folder items from results. When selected, this option adds NOT(_template == FE5DD82648C6436DB87A7C4210C7413B) to the advanced query expression (aq) when the Coveo Tab is selected.
Names of external content sources Name(s) of the Coveo organization external source(s) to search through on top of the Coveo source associated with the current Sitecore context database and other external content sources added through the Coveo Search Interface rendering data source.
Pipeline See pipeline component option
Default layout See layout component option
DOM unique Id Randomly generated HTML element id
Additional data attributes Allows use of Tab component options not directly available in the data source (see Passing Non-Fronted JavaScript Framework Properties to Hive Components)

1: By default, the MediaLibraryCrawler only indexes items under /sitecore/media library/Files in the Sitecore content tree.

Sample Generated HTML and Corresponding Visual Output

In the example below, a Coveo Tab rendering was added and the Caption was set to Shop. In the data source, filtering and boosting rules were also configured to display only items based off of the ecomitems template and to boost items currently on promotion.

Generated HTML:

<a id="coveod9c70725" class="CoveoTab coveo-accessible-button coveo-selected coveo-accessible-button-pressed" 
data-id="coveod9c70725" data-caption="Shop" role="button" aria-label="Shop" title="Shop" tabindex="0">
  <p>Shop</p>
</a>
<div class="coveo-tab-component-container">
  <div class="coveo-tab-debug-information coveo-debug-information coveo-debug-hidden">
    <div>
      <!-- Code associated with added External Content sources would appear here -->
    </div>
    <div>
      <div class="CoveoForSitecoreFilterExpression" data-sc-scope-to-tab="coveod9c70725" 
      data-sc-filter-scope-node="{"advanced" : {"type" : "field" , "fieldName" : "_templatename" , 
      "operator" : {"name" : "==" , "value" : 1},"fieldValueType" : {"name" : "string" , "value" : 3},
      "fieldValues" : ["ecomitems"]}}">
      </div>
    </div>
    <div>
      <div class="CoveoForSitecoreRankingExpression" data-sc-scope-to-tab="coveod9c70725" 
      data-sc-ranking-scope-node="{"rankingExpressions" : [{"expression" : {"type" : "field" , 
      "fieldName" : "OnPromotion" , "operator" : {"name" : "==" , "value" : 1},
      "fieldValueType" : {"name" : "string" , "value" : 3},"fieldValues" : ["1"]},"modifier" : 100}],
      "rankingFunctions" : [],"textualRankingExpressions" : []}">
      </div>
    </div>
  </div>
</div>

Search API call aq:

Tab rendering aq value

Recommended Articles