Creating a Custom Facet in Coveo Hive – Part One

Recently I was tasked with creating a custom facet for a client’s Coveo for Sitecore implementation. I was implementing Coveo Hive, which worked well and it was very simple to add components to the page in a modularized fashion. After reviewing the proof of concept search page, the client realized they didn’t like the date slider component at all, and asked that we instead have a facet with two fields, start date and end date, and each field would have a calendar picker.

I quickly found out this was not available as an OOTB component. I would have to learn how to create a custom component and allow it to be added to a search page. I would have to manage state, facet appearance and breadcrumbs for the new facet. Due to the complexity of this task, I will be creating a blog post series for each major part. In this first blog post, I will go through the basic setup of your custom facet and at the end of this post, you should be able to see and interact with your facet to some extent. Final code will be provided at the end of the final blog post in this series. Let’s get started!

It Starts With Javascript (Or Typescript)

When I first started working on this, Coveo’s documentation suggested creating a custom component using Javascript. It looks like they’ve updated their documentation. You’ll want to start here and pick one of the two paths. I went the JS path, so my code will be different from yours if you choose the TS path.

Error when serializing the property “RankingState”

I noticed this warning in the Experience Editor of a Coveo Hive search page, specifically on the search interface:

Warnings

• RankingState

  • Error when serializing the property "RankingState". (Exception has been thrown by the target of an invocation.)

I immediately checked the Sitecore logs and found a long winded exception chain. The head exception was of course, “Exception has been thrown by the target of an invocation“. Many nested exceptions below that, at the very bottom of the chain, I found this error:

Exception: System.InvalidOperationException

Message: Cannot use DataAdapterProvider as xDB is disabled.

Source: Sitecore.Analytics.DataAccess

   at Sitecore.Analytics.DataAccess.DataAdapterProvider..ctor()

   at Sitecore.Analytics.Data.DataAccess.MongoDb.MongoDbDataAdapterProvider..ctor(Func`2 driverFactory)

Researching that error, I found that the problem was my settings in the Sitecore.Xdb.config file (under App_Config/Include). I had XDB disabled, but not XDB.Tracking disabled. I disabled XDB.Tracking and the warning went away. I assume if you have XDB disabled, you should also disable tracking because it relies on XDB. Just thought I’d quickly post this problem and solution as I continue working with Coveo Hive.

 

The Coveo Analytics are not enabled for this Search Interface

Last week I started working with Coveo Hive. There are a few strange things I ran into or wasn’t sure how to resolve. I’ll be writing a series of blog posts on these things as I continue to work on my very first Coveo Hive project.

---

I set up a Coveo Hive search page using the basic layout provided with Coveo for Sitecore. Opening the page in the Experience Editor, I immediately noticed an error in red:

The Coveo Analytics are not enabled for this Search Interface. Insert a Coveo Analytics component to record Coveo Usage Analytics data.

I thought the instruction here was a little bit vague. I also was shocked to not find much information in the documentation about this (specifically, how to enable usage analytics in Coveo Hive). In the previous Coveo framework, you would select the search interface in the Experience Editor, and check a box to enable Coveo Usage Analytics. In Hive, you add a component (as the literature dictates).

I wasn’t sure exactly where to insert it though, and how; but here’s what worked for me. The solution was to add a Coveo for Sitecore Analytics component to the UI Header, above the search box and search box settings. You may have to do some clicking and navigating the hierarchy of components to find the UI Header. Hope this helps!