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:

Basic Facet

The URL ends up looking like https://myserver/defaultcoveopage#f:@ftitle15494_c8c43077494745a0937f3ef10374ca9e=%5BAlpha%5D

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:

Not Working Facet

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=%5BAlpha%5D. And when you paste this into a new tab, the facet correctly configures itself:

Fixed Facet

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.

Advertisements

2 thoughts on “Why can’t I bookmark my facets?

  1. Hey Jeremy, very good post as usual!

    Modifying the data-id attribute value to the field name used by the facet have one drawback: You cannot have more than one facet using the same field in your search interface as they will share the same URL hash state attribute. A selection in the first facet will also select the value in the other ones. This is not something we see often but some customers have this requirement.

    The facet field name and GUID you see is there to give each facet a unique ID in the DOM and URL state when there is no “Unique Id” set in the rendering parameters. The Model.UniqueId property first look if there’s a value in the “Unique Id” field. If there’s none, it generates an ID made with the field name and a unique part (a GUID in MVC, an auto-generated ID in Web Forms).

    This behavior was new in the September 2015 release of Coveo for Sitecore 3.0 but introduced the problem you mention: The facet ID is different at each page load, thus the facet cannot load selected values from the URL state.

    Coveo fixed this problem recently and it will be included in the next release of Coveo for Sitecore 3.0 and 4.0 in June 2016.

    In the meantime, the recommended way to obtain the expected behavior is simply to set the “Unique Id” Sitecore field value in each of the facet component rendering parameters. That way, your IDs will be used instead of generated ones.

    • That’s really useful information – When I get a chance later I’ll call that out in the body of the post, and pass it on to my confused colleagues. Cheers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s