Gravatar for paldrich@ascedia.com

Question by Paul Aldrich, Jan 17, 2018 8:52 PM

Issues with adding a custom facet interaction to advanced query

I have created a new custom component and facet using Coveo Hive. I am working on the Javascript for the custom component now. I found that by adding the following, I am able to add my custom facet selection/interaction to the existing advanced query on my search page:

Coveo.$('.CoveoSearchInterface').on("buildingQuery", function (e, args) {
            args.queryBuilder.advancedExpression.add('@fdate231:range=[1457270784000,1470523680000]');
        });

After running the statement in the event handler, I see my custom facet value gets added to the advanced query, but there are a few issues I am seeing with this:

  1. URL hash does not get updated.
  2. My other facets become grayed out (but still clickable) and the search results section is empty.
  3. If I interact with my facet again (which is just a div with a start date field and an end date field), before setting the advanced query again, I can see that what I added to the aq before is now gone.

I get an error in the console each time I interact with the custom facet:

Failed to load resource: the server responded with a status of 400 (Bad Request) coveo/rest/v2/?sitecoreItemUri=5aa4a363-d124-4c7f-ad29-1d2ece841c86&siteName=aopa

When I click the link in the Chrome dev console, I do not get a 400. The page shows the JSON.

1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Jan 18, 2018 1:11 PM

I think you are misunderstanding how the Coveo JavaScript framework works. Let me address some of them here:

> I am able to add my custom facet selection/interaction to the existing advanced query on my search page

The `advancedExpression` part of the query is used to add expressions to the query. You are currently adding an invalid syntax. Refer to the Coveo Cloud Query Syntax Reference to understand how to query the index with your range.

> URL hash does not get updated.

The `advancedExpression` part is not related to the client-side state of the Search Interface.

Refer to this page to understand how state works in the coveo-search-ui framework: https://developers.coveo.com/display/JsSearchV1/State

> My other facets become grayed out (but still clickable) and the search results section is empty.

This is caused by the error in your console. You have to fix the error first. And I think it is caused by the invalid query syntax.

> When I click the link in the Chrome dev console, I do not get a 400. The page shows the JSON.

Of course. The request is sent using POST, so when you open the link, it is a GET without any query parameters. Your empty query is working, which further reinforce that you have an invalid query syntax error.

You have to open Chrome's Network tab and see the response of the query.

Moreover, if you have the `CoveoErrorReport` component, you should see those errors pop up in the Search Interface.

> I have created a new custom component and facet using Coveo Hive

This is more of a general advice, but seeing your code, I don't think you are embracing the Framework's custom component's features.

If you follow the link here: Implementing a Custom Component, you can use `this.bindings.searchInterface` instead of referencing a static Search Interface with `Coveo.$('.CoveoSearchInterface')`. This makes it so the custom component is reusable through multiple Search Interfaces without knowing its ID.

See here for a list of what is available in the `bindings` variable: IComponentBindings.

Gravatar for paldrich@ascedia.com

Comment by Paul Aldrich, Jan 18, 2018 3:13 PM

Hi François,

Thank you for the detailed response. I've fixed the syntax and have gotten my tests to work; they are updating the search results and the counts in the other facets now. Here is my new code:

        Coveo.$(this.bindings.searchInterface.element).on(Coveo.QueryEvents.buildingQuery, function (e, args) {
            args.queryBuilder.advancedExpression.add(CoveoForSitecore.Context.fields.toCoveo('@date')
                + '=2016/01/01..2016/12/31');
        });<br>

Regarding the URL hash, I saw the example at the bottom of the State document you shared, but I am unsure of what should go into the registerNewAttribute() method? According to the GitHub docs, "the name of the new attribute to register", but I don't know what attribute I am supposed to be adding.

UPDATE: At the time I wrote this the documentation wasn't as clear but I made some educated guesses and also added this question, to which olamothe gave a great response:

https://answers.coveo.com/questions/14320/how-to-add-a-hive-custom-component-value-to-coveo.html.

Ask a question