Gravatar for

Question by esequielp, Dec 23, 2016 2:48 PM

Custom JSComponent after upgrading to December 2016 version


I am working on an upgrade from Coveo for Sitecore 4.0 July 2016 to the latest version of December 2016. I was able to execute the diagnostic page and got all greens and I am also able to fully rebuild all indexes.

Now, I need to focus on a number of JS Components that we customized and that now are throwing errors. I know that between these versions the Coveo JS Framework was changed but I am not sure on how to proceed migrating the components we already have working in PROD.

For example, we have a component that we drop in the html and automatically adds a filter to the search:

Then, the constructor:

 function ColumnFilter(element, options, bindings) {, element, ColumnFilter.ID, bindings);

        this.options = Coveo.ComponentOptions.initComponentOptions(element, ColumnFilter, options);

        this.bind.onRoot(Coveo.QueryEvents.buildingQuery, this.buildingQuery.bind(this));

I am getting an error on the last line, saying that onRoot is not a function.

Uncaught TypeError: this.bind.onRoot is not a function
    at new ColumnFilter (column-filter.js:12)
    at Function.t.createComponentOfThisClassOnElement (Initialization.ts:285)
    at Initialization.ts:496
    at Function.M.each.M.forEach (underscore-min.js:5)
    at Initialization.ts:483
    at Initialization.ts:255
    at Function.M.each.M.forEach (underscore-min.js:5)
    at Function.t.automaticallyCreateComponentsInside (Initialization.ts:255)
    at Function.t.initSearchInterface (Initialization.ts:170)
    at RegisteredNamedMethods.ts:26

Do we have a migration guide for these components? How can I realize how to bind stuff with this latest version. Any idea that can lead me in the right direction, would be appreciated.

By the way, I downloaded and mount the search-ui branch from npm and looks like all components are done with Typescript. We would like to avoid having to rewrite all our features.


1 Reply
Gravatar for

Answer by Sébastien Belzile, Dec 23, 2016 3:25 PM


There are some resources available on the developers website: a getting started guide. Take a look at this page. It shows the basis of implementing Coveo components. You will be interested in the line that shows:

this.bind.onRootElement(QueryEvents.buildingQuery, (args: IBuildingQueryEventArgs) => this.handleBuildingQuery(args));

If you take a look at the code, you should notice that there are no onRoot method. Instead, have a look at the onRootElement method.

The major breaking change introduced by the open source version is the removal of jQuery. So most problems you will encounter are related to this. The Coveo JS framework implements instead a kind of jQuery subset.

Gravatar for

Comment by esequielp, Dec 26, 2016 12:22 PM

Thanks for your reply.

If I create a brand new typescript component I am able to make it to work. However, as I said, I would like to avoid having to rewrite our 20+ custom coveo components written in javascript.

The initial compilation issue was solved by using onRootElement instead of onRoot. However what seems to be the real issue is that the args are not being properly sent with that bind. See below and in args I haven't got a queryBuilder property.

ColumnFilter.prototype.buildingQuery = function (e, args) {
        if (args && args.queryBuilder) {                                     
            var columnName = this.options.columnName;

            args.queryBuilder.advancedExpression.add(columnName + "==" + value);

I tried with a couple ways but no luck. Does anyone have an idea on how to bind and send the arguments as it was done before the new JS Search fw?


Gravatar for

Comment by Sébastien Belzile, Dec 27, 2016 11:36 AM

Could you try attaching a debugger and tell me what is the e and 'args' argument made of? The main difference between the open source framework and the old one is, as I mentionned, no jQuery. Events are no exceptions to this: they are not jQuery events anymore.

Ask a question