Why can't I bookmark my facets?

The other week I was commenting on shooting myself in the foot with the configuration of Coveo's UI for Sitecore. Another issue that came up during that bit of project work was that in their default state, the facet components didn't respond to data in the URL. Having done a bit of digging, however, one of my colleagues found an answer to this, which I figured I should write down in case anyone else is stuck on the same challenge...

Edited to add: The ever-helpful Jean-Francois L'Heureux from Coveo raised some interesting points in the comments below. If this is an issue you've experienced, take note that the fix my colleagues came up with could have a side-effect if you have multiple facets on the same field (he has an alternative fix), and that this issue should be resolved in the June release of the software.

The issue we were seeing was quite simple to recreate. On a default search page, you could click on a facet and it would correctly update both the search results and the URL data fragment representing the facet's state:

The URL ends up looking like https://myserver/defaultcoveopage#f:@ftitle15494_c8c43077494745a0937f3ef10374ca9e=[Alpha]

However, if you then copy and pasted this URL to another browser window, the facet control would not respond to the data in the URL:

Initially a bit of googling lead to this post discussing the the idea that having IDs in the facet's field data wasn't right. This suggested that the issue might be down to not having published the item describing the Facet under /sitecore/system/Settings/Buckets/Facets. But quite a bit of time publishing these items, and anything relating to them didn't make any difference.

Some further googling lead to this post mentioning the difference between the facet using the "UniqueID" or the "Field" to configure it. While the post isn't too descriptive, it did lead my colleague to looking at the code in the FacetView.cshtml file.

Out of the box, the cshtml file includes the following element with attributes to drive the UI's javascript:

<div id='@Model.UniqueId'
        class="CoveoFacet"
        data-title='@Model.Title'
        data-field='@Model.Field'
        data-number-of-values='@Model.NumberOfValues'
        data-id='@Model.UniqueId'
        data-enable-collapse='@Model.EnableCollapse'
        data-enable-more-less='@Model.EnableMoreLess'
        data-enable-settings='@Model.EnableSettings'
        data-lookup-field='@Model.LookupField'
        data-sort-criteria='@Model.Sort'
        data-is-multi-value-field='@Model.IsMultiValueField'
        data-show-icon='@Model.ShowIcon'
        data-computed-field='@Model.ComputedField'
        data-computed-field-operation='@Model.ComputedFieldOperation'
        data-computed-field-format='@Model.ComputedFieldFormat'
        data-computed-field-caption='@Model.ComputedFieldCaption'
        data-include-in-breadcrumb='@Model.IncludeInBreadcrumb'
        data-number-of-values-in-breadcrumb='@Model.NumberOfValuesInBreadcrumb'
        data-include-in-omnibox='@Model.IncludeInOmnibox'
        data-enable-facet-search='@Model.EnableFacetSearch'
        data-facet-number-of-values-in-facet-search='@Model.NumberOfValuesInFacetSearch'
        data-allow-toggling-operator='@Model.AllowTogglingOperator'
        data-use-and='@Model.UseAnd'
        data-page-size='@Model.MorePageSize'
        data-injection-depth='@Model.InjectionDepth'
        data-available-sorts='@String.Join(",", Model.AvailableSorts)'></div>

					

You can modify this mark-up to refer to the Model Field name instead of the UniqueID. (NB: Coveo recommend you do not modify the files they install, as these may be overwritten by upgrades. If you need to change files they ship, copy them and modify the copy. Remember that if you're copying the file for a UI component, you'll need to create a new Layout/Rendering item in Sitecore which points to your new file too)

The change required is simple:

<div id='@Model.UniqueId'
        class="CoveoFacet"
        data-title='@Model.Title'
        data-field='@Model.Field'
        data-number-of-values='@Model.NumberOfValues'
        data-id='@Model.Field'
        data-enable-collapse='@Model.EnableCollapse'
 -- snip --
        ></div>

					

Saving this and refreshing the page changes the URLs that are generated when you click a facet item to use the name instead: https://myserver/defaultcoveopage#f:@ftitle15494=[Alpha]. And when you paste this into a new tab, the facet correctly configures itself:

However, you'll notice that the order of the items in the facet has changed here, and your selected value is now at the top of the list, no matter where it was to start with – so you may need to add some explicit configuration to keep the data sorted into the order you need.

↑ Back to top