Override Coveo Hive Initialization Options

This is for:

Developer System Administrator

In this article

Creating a Custom Component
Overriding the Initialization Options

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 Hive components and their underlying Coveo JavaScript Search Framework components have many available options.

These options are often configurable in Sitecore on the data source items associated to the UI components. However, you might want to add an option which is available in the Coveo JavaScript Search Framework, but not yet in Coveo Hive. You might also want to add the option programmatically based on certain conditions.

Creating a Custom Component

Overriding the initialization option requires to add custom code to an existing component, hence we strongly recommend that you duplicate an existing component instead of adding code to an out of the box component. The out of the box components are overwritten when upgrading, complexifying your upgrade process.

To create a new component

From the file system, copy the .cshtml file of an existing Coveo Hive view rendering from /Views/Coveo Hive to another folder.
From the Sitecore Content Editor, duplicate the view rendering item from /Layouts/Renderings/Coveo Hive to another folder.
From the Sitecore Content Editor, select the view rendering item and set its Path field value to the path of the .cshtml file created in step 1.

Once the custom component is created, you can add it to the search interface by using a placeholder section or extending an existing placeholder, see Insert Custom Components in an Existing Search Interface.

Overriding the Initialization Options

Coveo for Sitecore 5.0.239.2

In the .cshtml file of your component, add the following script after the HTML element of the component:

<script>
  // First select your component. @@Model.Id will render the component DOM Unique Id field value from the data source item.
  var myComponent = document.getElementById("@Model.Id")
  // Change optionToModify to the name of the option you want to override and valueForTheOption to the value for the option.
  myComponent.dataset.optionToModify = "valueForTheOption"
</script>

Save the file. You should see the new attribute among the rest of the options when inspecting your page:

<div id="myFacet" class="CoveoFacet" data-available-sorts="alphaascending,alphadescending,occurrences,score" data-prebind-field="fieldTranslator" data-field="@myfield" data-option-to-modify="valueForTheOption">

This script will run before the initialization of the component since the Coveo init happens during the DOMContentLoaded event (see Events).

For a hands-on advanced tutorial on this subject, see Create a Custom Coveo Hive Component - Multi-Sort Tutorial.