Gravatar for paldrich@ascedia.com

Question by Paul Aldrich, Jan 24, 2018 9:37 PM

How to add a hive custom component value to Coveo state?

Using Coveo Hive and CfS v4.1.82.12. I have a custom component with a start and end date to filter results, using a custom date field I created. I am trying to figure out how to add the entered date range (start date and/or end date) to the Coveo state and thus the URL query string. Found something at the bottom of this document: https://developers.coveo.com/display/public/JsSearchV1/State, but a few things:

  1. Running this code during the afterComponentsInitialization only runs it once on page load then never again after that. So I also added it after the advanced query is updated.
  2. The code itself adds the attribute correctly to the Coveostate property/object but the URL query string is not updated.

Code:

(Note, the hardcoded values in the registerNewAttribute call are for testing)

    AOPADateRangePickerFacet.prototype.processQueryChange = function (coveoClass) {
        Coveo.$(this.bindings.searchInterface.element).on(Coveo.QueryEvents.buildingQuery, function (e, args) {
            var dateField = $(coveoClass.startDateField).closest('div.CoveoAOPADateRangePickerFacet').attr('data-field');
            var newDateSet = coveoClass.getNewDateSet(coveoClass);
            NewDateSet = newDateSet;
            StartDate = $(coveoClass.startDateField).val();
            EndDate = $(coveoClass.endDateField).val();

        // This becomes '@aoparesultdate>=2018/1/1' for example
        var expressionString = dateField + newDateSet;
        args.queryBuilder.advancedExpression.add(expressionString);
    });

    // Update state
    var searchInterface = coveoClass.bindings.searchInterface.element;
    if (searchInterface.Coveostate !== undefined) {
        searchInterface.Coveostate.registerNewAttribute("f:@aoparesultdate", [":range=[1072936800000,1479358944000]"]);
    }

    this.bindings.usageAnalytics.logSearchEvent({
        name: 'facetSelect',
        type: 'facet'
    });

    this.bindings.queryController.executeQuery();
};</pre>

    AOPADateRangePickerFacet.prototype.registerStateAttribute = function (coveoClass) {
        Coveo.$(this.bindings.searchInterface.element).on("afterComponentsInitialization", function (e) {
            coveoClass.bindings.searchInterface.element
                .Coveostate.registerNewAttribute("f:@aoparesultdate", [":range=[1072936800000,1479358944000]"]);
        });
    }

Both functions are called when the custom component is initialized.

1 Reply
Gravatar for olamothe@coveo.com

Answer by olamothe, Jan 24, 2018 10:07 PM

Hi Paul,

When you call "state.registerNewAttribute" , the first parameter is the key that you wish to register, and the second one is the "default" value for that key.

A default value is just something that tells the state object that if the value of the state for that particular key is equal to that default value, then nothing should happen. For example, internally, when we register the "q" attribute, we say that an empty string is the default value.

This is what make it so we are not saving #q="" in the URL, because it's an useless information, since it's the "default" value.

In your case, you probably want to first register your attribute like this :

state.registerNewAttribute("f:@aoparesultdate:range", [])

This means that the default value for that key will be an empty array (no selection, no filters).

This only create an entry in the state object, but nothing else is done. After you register the new key in the object, as well as its default value, you can then start setting any relevant value that you need.

For example, you could call :

state.set("f:@aoparesultdate:range", [1072936800000, 1479358944000])

This will cause the parameter to appear in the URL, as well as trigger all the "state modification" events for any subscribers.

If you were to then execute this :

state.set("f:@aoparesultdate:range", [])

You would see that the parameter would dissapear from the URL, since it is back to its default state.

Since you are registering the default state as [1072936800000, 1479358944000], this explains why you are not seeing any change in the URL.

Gravatar for paldrich@ascedia.com

Comment by Paul Aldrich, Jan 24, 2018 10:36 PM

Thank you olamothe for explaining! Looks like it gets added to the Coveostate object and to the URL query string. However, when I load the current URL (with query string) in a new tab, on page load (in the afterComponentsInitialize event), Coveostate does not have my attribute. Will I have to set the state on load manually (based on the current query string) since this is a custom component?

Ask a question