Gravatar for

Question by jnein, Jun 13, 2016 9:23 AM

Creating Drop Down Facet

I am using Coveo for Sitecore 4. I would like to display multiple drop down/combo box facets horizontally instead of the multi-select facets vertically that come out-of-the-box with Coveo for Sitecore. I am able to use css to move the facets above the search results and have them side-by-side but I'm not sure how I can convert the multi-value facet into a single drop down/combo box facet. Has anybody done something similar before?

1 Reply
Gravatar for

Answer by Jean-François L'Heureux, Jun 13, 2016 9:40 AM


The Coveo JavaScript Search Framework (JS UI) out of the box Facet component is generating HTML to display the facet as a list. To display a facet in a dropdown/combobox, I think you would have to create your own JS UI component that may inherits the default Facet component but render different HTML. Note that the facet component is the more complex component of the framework.

To create your own component for the JS UI: To wrap your component in Sitecore, you'll have to duplicate the Coveo Facet component and create an ascx/cshtml file for your new component. You can follow this guide but for the Coveo Facet component:

I hope this helps getting started,


Gravatar for

Comment by jnein, Jun 13, 2016 11:00 AM


Can I just copy and edit the existing JS UI component for a multi-value facet field? The example provided in the link to create a custom JS UI component is extremely simple. It doesn't provide any details about how to pull in index fields or update the body of the request for custom facets. Can you point out where the existing multi-value facet JS UI code is located?

Thank you, John

Gravatar for

Comment by Jean-François L'Heureux, Jun 13, 2016 11:13 AM

Hi John,

There is no such thing as a multi-value field facet. The "Facet" component is the one handling everything you mentioned:

  • Accepting initialization options and data attributes for configuration.
  • Adding the right properties to the queries to get the facet values and filtering when there's a selection.
  • Outputting the right HTML markup to display the facet and the items.
  • Calling the Coveo Cloud Usage Analytics service to log user actions.

The component's code is included in some JavaScript files in your Sitecore /Website/Coveo/js folder:

  • CoveoJsSearch.js
  • CoveoJsSearch.min.js
  • CoveoJsSearch.WithDependencies.js
  • CoveoJsSearch.WithDependencies.min.js

Those files are generated from TypeScript. They contain all the components, classes and utilities for the JS UI framework to work.

Look for the string "var Facet = (function" to find the Facet component class. You will see that the class is using a lot of other classes and that is it really complex as it needs to support multiple options.

I hope this helps.


Gravatar for

Comment by jnein, Jun 13, 2016 11:22 AM


Thanks, this does help. I'll try to dig into it a little more and see where I end up. I guess I'm just surprised this hasn't come up before and there isn't already a solution out there to creating a combo box facet.


Gravatar for

Comment by Jean-François L'Heureux, Jun 13, 2016 11:26 AM

Coveo's old UI framework (.Net Front-End) had dropdown style facets but this was very rarely used by customers as facet navigation is important and shouldn't be hidden by default to improve usage. So this feature wasn't implemented in the JS UI facet component.

It is advised not to use the .net Front-End in Sitecore as this UI is in the way to be deprecated soon.

Ask a question