Gravatar for

Question by yonico, Jan 23, 2015 3:21 PM

Custom facets in coveo

Hello - is it possible to create custom facets with fixed values? for example using words that are not inside each items because user would like to filter with certain words in two categories A- checkboxes with more than one check(will be OR comparison for all ) AND B- radiobuttons with the possibility of one check

1 Reply
Gravatar for

Answer by Jean-François L'Heureux, Jan 23, 2015 5:35 PM

You can create your own JS UI components for that use case (see JavaScript Search Framework). These components are meant to be included directly in an ASP.Net page or control like a copy of the CoveoSearch.ascx sublayout. They won't be customizable directly in Sitecore by default.

To enable customization directly in Sitecore, you will need to wrap them in Sitecore sublayouts with parameters template, page editor buttons, a custom ascx file, a custom code behind class and a custom model like the Coveo Facet sublayout. We do not have documentation on how to create such wrapper but you can analyze the Coveo Facet sublayout fields, templates and files to understand how to do it.

After this, your custom facets won't show up in the "Add here" dialog in the Page Editor because Coveo is filtering the sublayouts to display to its out-of-the-box facet components. To add your custom facets to the facets placeholder, you will need to do it through the Presentation Details dialog of your search page. After they are added in the facets placeholder, you will be able to edit them in the Page Editor.

Gravatar for

Comment by yonico, Jan 28, 2015 1:56 PM

Thanks for your answer. Is there a way to edit coveo query to include some of items selected by jquery? going item by item looking for the selected filters. We have the html working and was wondering if there is a way to check value per value and add to the query the values to be applied. NOTE: The filter for the content type will point to template name but needs to be fixed for certain values.

Gravatar for

Comment by Jean-François L'Heureux, Jan 28, 2015 2:23 PM

It is possible to do that but it is a lot more complicated than you think. You need to save your facet state in the URL when a value is selected. You need to provide a way to automatically select your facet values when an URL is loaded from a bookmark. You need to handle the events to clear all facet values, clear this facet values, and some other events.

You can read the code of the JS UI facet component in the /Coveo/js/CoveoJsSearch.js file by searching "var Facet = (function" in the file. You will understand all the things you need to handle and the way to affect the query.

Gravatar for

Comment by yonico, Jan 28, 2015 4:45 PM

Thanks - I will try that! Regarding the values we get from the facets, is it possible to limit some values and exclude them from what we get?

Gravatar for

Comment by Jean-François L'Heureux, Jan 28, 2015 4:49 PM

Yes, with the allowedValues configuration available in the JS UI:

Gravatar for

Comment by yonico, Feb 3, 2015 11:03 AM

thanks.. do I need to put this tags inside CoveoSearch.ascx?

Regarding this other example. What should I put in Facet? is it the id of the div facet? //Example : Using a facet for object type var myValueCaption = { "txt" : "Text files", [ etc … ]}; $("#search").coveo("init", { Facet : { valueCaption : myValueCaption } })

Gravatar for

Comment by Jean-François L'Heureux, Feb 3, 2015 1:34 PM

When you specify Facet as an option key, you are configuring all the facet components on your page simultaneously:

$("#search").coveo("init", { Facet : { valueCaption : myValueCaption } });

If you want to configure a single facet, you can put its id attribute's value as an option key:

<div class="CoveoFacet" id="facetUniqueId" ...></div>
$("#search").coveo("init", { 'facetUniqueId' : { valueCaption : myValueCaption } });
Gravatar for

Comment by Jean-François L'Heureux, Feb 3, 2015 1:34 PM

For the allowedValues, you choose if you want to initialize them directly in the HTML or by Javascript.


<div class="CoveoFacet" id="facetUniqueId" data-allowed-values="File,People" ...></div>


$("#search").coveo("init", { 'facetUniqueId' : { allowedValues: ["File,People"] } });

For all those examples, the base files are CoveoFacet*.ascx (WebForms) or Facet*View.cshtml (MVC). You are encouraged to customize your own copies of those files instead of the original ones because the original files will be replaced if you upgrade to a newer version of the product.

Ask a question