JavaScript Search Framework Version 1.x to 2.x Breaking Changes and Migration Guidelines

Although the July 2017 Release (v2.2900.23) of the Coveo JavaScript Search Framework is a “major” release, updating a search page from version 1.x of the framework is usually a relatively straightforward process.

This article briefly underlines the breaking changes introduced by this release, as well as its other major non-breaking new features.

Breaking Changes

The July 2017 Release (v2.2900.23) of the Coveo JavaScript Search Framework can introduce a few minor breaking changes from versions 1.x, but only in specific cases.

Query Syntax is Now Disabled by Default

This change is only breaking if you did not explicitly specify the value of the enableQuerySyntax option in the Searchbox, Querybox, or Omnibox component of your search page.

Previously, the Querybox enableQuerySyntax option default value was true. As a result, unless you explicitly set this option to false when configuring your search box, the end user could input and submit valid Coveo Cloud query syntax (such as @myfield=="my value"), which the Search API would then parse and interpret as such.

Since the Coveo JavaScript Search Framework 2.2900 release, the Coveo Cloud query syntax is disabled by default. This means that if you want to enable the query syntax for all end users in your search page, you need to set the enableQuerySyntax option to true in your Searchbox component:

<div class="CoveoSearchbox" data-enable-query-syntax="true"></div>

A new enableQuerySyntax option is also available in the ResultsPreferences component. You can set this option to true if you want individual end users to be able to specify, in the Preferences panel, whether to enable query syntax in the search page, or let the Searchbox enableQuerySyntax option value automatically decide:

...
<div class="CoveoPreferencesPanel">
  <div class="CoveoResultsPreferences" data-enable-query-syntax="true"></div>
  ...
  ...

The Old Design is Now Entirely Deprecated

This change is only breaking if your search page still uses custom CSS that relies on the so-called “old” design (pre December 2015 Release (v1.0.273)).

If this is the case, you will likely need to properly adjust your styling to the “new” design before you can migrate your search page.

In Coveo JavaScript Search Framework versions 1.x , you had to specify data-design="new" in your SearchInterface to ensure that the “new” design was used in your search page.

The “old” styling has been entirely deprecated in the v2.2900 release. Therefore, you can safely remove data-design="new" from your SearchInterface, as this attribute no longer has any effect at all. Moreover, you should now preferably include the CoveoFullSearch.css and templates.js files in your search page (whose content is now the “new” design), rather than the CoveoFullSearchNewDesign.css and templatesNew.js files.

Those obsolete files are still included in the 2.x packages, but you should avoid referencing them in your search page.

The Framework now Uses SVG Icons

This change is only breaking if you are using customized PNG sprites to display the icons in your search page. If this is the case and you still want to use those sprites, you will need to override some CSS rules.

Previous Coveo JavaScript Search Framework versions used PNG sprites to display icons.

Since the 2.2900 release, the framework uses scalable vector graphics (SVG) instead. This offers a whole new (and easier) way to customize the look of your search page (see Customizing SVG Icons).

Major Non-Breaking New Features to Leverage

The July 2017 Release (v2.2900.23) of the Coveo JavaScript Search Framework includes some exciting new features which you will likely want to take advantage of when updating your search page from version 1.x.

Lazy Component Loading

Using lazy component loading can greatly reduce the loading time of a search page, especially beneficial on mobile devices (see Lazy Versus Eager Component Loading).

Many Result Layouts

Three different result layouts are now available to use in the Coveo JavaScript Search Framework: list (the default result layout), card, and table (see Result Layouts).

Standard Form Controls

Several form controls with “standard” styling, including a check box and a datepicker, are now available to use under the Coveo namespace (see Using Standard Form Controls).