Use standard form controls

This is for:

Developer

Coveo JavaScript Search Framework 2.2900.23 (July 2017)

Since the July 2017 release (v2.2900.23), the Coveo JavaScript Search Framework exposes several form controls with standard styling:

  • Checkbox

  • DatePicker

  • Dropdown

  • FormGroup

  • MultiSelect

  • NumericSpinner

  • RadioButton

  • TextInput

These form controls aren’t actual Coveo components. They’re simple and convenient classes which certain “core” Coveo components use, and which you can also use in your own custom code and components.

Instantiating a standard form control

In eager component loading mode (see Lazy versus eager component loading - Eager component loading), all standard form control classes are available under the Coveo namespace immediately after the CoveoJsSearch library finishes loading.

Suppose you want to instantiate a standard Checkbox form control and append its HTML node to the #my-div element in your search page.

You could do something like this:

[ ... ]
 
<script src="js/CoveoJsSearch.js"></script>
 
[ ... ]
 
<script>
  document.addEventListener('DOMContentLoaded', function() {
 
    [ ... ]
 
    Coveo.init("#search");
 
    document.getElementById('my-div').appendChild(new Coveo.Checkbox().getElement());
 
    [ ... ]
 
  });
</script>
 
[ ... ]

In lazy component loading mode (see Lazy versus eager component loading - Lazy component loading), chances are the form control you want to instantiate isn’t yet available after the init call of your search interface.

In fact, if no component in your search interface requires it, this form control will never be available under the Coveo namespace at all, unless you explicitly load it.

In any case, you must load the form control class you want to use (that is, ensure its promise is resolved) before you can interact with it in lazy component loading mode.

Suppose you want to instantiate a standard Checkbox form control and append its HTML node to the #my-div element in your search page.

Assuming your search page uses lazy component loading, you could do something like this:

document.addEventListener('DOMContentLoaded', function() {
 
  [ ... ]
 
  Coveo.init('#search');
  Coveo.load('Checkbox').then(function(Checkbox) {
    document.getElementById('my-div').appendChild(new Checkbox().getElement());
  }); 
 
  [ ... ]
 
});