Apply complex customization using a component manager

This is for:

Developer

In this article

Depending on the level of customization required on your components, merely modifying CSS may not be enough. You may want to create a manager component to add custom features to the standard Coveo JavaScript Search Framework components.

Rather than extending the standard components, which can lead to difficult maintenance, the idea is to add the desired options on a manager component and to implement the desired features in this manager component by interacting with the standard components using their methods. This article provides an example of how to create and use such a manager component.

Here are the steps to create and use a facet manager component with an option to reset all facets when the end user clears the basic query expression (q) (q).

Create the file for the facet manager component:

// FacetManager.ts

import {
  Component,
  ComponentOptions,
  IComponentBindings,
  $$,
  Initialization,
  Facet
} from 'coveo-search-ui';

export interface IFacetManagerOptions {
  resetOnQClear: boolean;
}

export class FacetManager extends Component {
  static ID = 'FacetManager';

  /**
  * The options for the FacetManager.
  * @componentOptions
  */
  static options: IFacetManagerOptions = {

    /**
    * Whether to reset the facets when q is cleared.
    */
    resetOnQClear: ComponentOptions.buildBooleanOption({
      defaultValue: false
    })
  };

  constructor(public element: HTMLElement, public options: IFacetManagerOptions,
              public bindings: IComponentBindings) {
    super(element, FacetManager.ID, bindings);
    this.options = ComponentOptions.initComponentOptions(element, FacetManager,
                                                         options);
    if (this.options.resetOnQClear){
      this.AddClearEventHandler()
    };
  }

  /**
  * Adds an event handler which resets the facets when q is cleared.
  */
  private AddClearEventHandler() {
    $$(this.root).on('state:change:q',function(e, data) {
      if(data.value == ""){
        let facets = document.getElementsByClassName('CoveoFacet')
        // This only resets standard facets. To reset other kinds
        // of facets, for example, sliding facets, you would add code
        // accordingly.
        for (var i = 0; i < facets.length; i++){
          let facet = <Facet>Coveo.get(<HTMLElement>facets[i]);
          facet.reset()
        }
      }
    })
  };

};

Initialization.registerAutoCreateComponent(FacetManager);