Apply Complex Customization Using a Component Manager

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).

  1. 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, e.g., 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);
    

    See also Create Custom Components.

  2. Export the facet manager component:

    // Index.ts
    // ...
    export { FacetManagager } from './path/to/FacetManager';
    // ...
    
  3. Include the facet manager component in your search interface, setting the desired options:

    <!-- ... -->
    <div class="coveo-main-section">
       <div class="CoveoFacetManager" data-reset-on-q-clear="true"></div>
       <!-- ... -->
    
Recommended Articles