Event Listeners

RapidUI allows you to to add Event Listeners to most RapidUI components. These are the events you can use in your code:

Adding a Query using addEventListener

The addEventListener feature allows you to submit requests to the underlying Rapid UI framework before any requests are sent to the HawkSearch back end. A common example in the HawkSearch Search API is to pass in a Query variable that includes a specific search parameter. The example is below that will only return results where the "hierarchy" field includes the value "parent." This is added within the script area where the Config Object resides.

addEventListener('hawksearch:before-search-executed', (event) => {
  const searchRequest = event.detail;
  searchRequest.query = "hierarchy.text:\"parent\"";
  console.log(searchRequest); 
});

Global Eventss

hawksearch:initialized

This event is fired after the HawkSearch Handlebars UI has been loaded. Developers can hook into this event to define custom Handlebars partials.

addEventListener('hawksearch:initialized', (event) => {
    HawkSearch.handlebars.registerPartial('custom-partial', 'HTML here');
});

Autocomplete Events

hawksearch:before-autocomplete-executed

This event is fired before every autocomplete query. This can be used to modify the raw request sent to the HawkSearch API.

addEventListener('hawksearch:before-autocomplete-executed', (event) => {
    const autocompleteRequest = event.detail;

    console.log(autocompleteRequest);
});

hawksearch:after-autocomplete-executed

This event is fired after every autocomplete query. This can be used to modify the raw response received from the HawkSearch API.

addEventListener('hawksearch:after-autocomplete-executed', (event) => {
    const autocompleteResponse = event.detail;

    console.log(autocompleteResponse);
});

hawksearch:autocomplete-completed

This event is fired after every autocomplete query prior to data binding.

addEventListener('hawksearch:autocomplete-completed', (event) => {
    const autocompleteResponse = event.detail;

    console.log(autocompleteResponse);
});

Search Events

hawksearch:before-search-executed

This event is fired after before every search operation. This can be used to modify the raw request sent to the HawkSearch API.

addEventListener('hawksearch:before-search-executed', (event) => {
    const searchRequest = event.detail;

    console.log(searchRequest);
});

hawksearch:after-search-executed

This event is fired after every search operation. This can be used to modify the raw response received from the HawkSearch API.

addEventListener('hawksearch:after-search-executed', (event) => {
    const searchResponse = event.detail;

    console.log(searchResponse);
});

hawksearch:search-completed

This event is fired after every search operation prior to data binding.

addEventListener('hawksearch:search-completed', (event) => {
    const searchResponse = event.detail;

    console.log(searchResponse);
});

hawksearch:search-failed

This event is fired if the search operation fails due to some error.

addEventListener('hawksearch:search-failed', (event) => {
    const searchResponseError = event.detail;

    console.log(searchResponseError);
});

Recommendations Events

hawksearch:before-recommendations-executed

This event is fired after before every recommendations operation. This can be used to modify the raw request sent to the HawkSearch API.

addEventListener('hawksearch:before-recommendations-executed', (event) => {
    const recommendationsRequest = event.detail;

    console.log(recommendationsRequest);
});

hawksearch:after-recommendations-executed

This event is fired after every recommendations operation. This can be used to modify the raw response received from the HawkSearch API.

addEventListener('hawksearch:after-recommendations-executed', (event) => {
    const recommendationsResponse = event.detail;

    console.log(recommendationsResponse);
});

hawksearch:recommendations-completed

This event is fired after every recommendations operation prior to data binding.

addEventListener('hawksearch:recommendations-completed', (event) => {
    const recommendationsResponse = event.detail;

    console.log(recommendationsResponse);
});

VisualSearch Events

hawksearch:visualsearch-upload-failed

This event is fired if an image upload on VisualSearch component fails due to some error.

addEventListener('hawksearch:visualsearch-upload-failed', (event) => {
    const visualSearchMessage = event.detail;
    console.log(visualSearchMessage);
});

VisualSearch Errors

- file_type_unsupported // Image file not uploaded
- file_too_large // Image uploaded is larger than 4MB
- file_extension_unsupported // Image formats supported: JPG, JPEG, PNG, WEB, AVIF