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 right before the:

HawkSearch.init({

Sample here:

addEventListener('hawksearch:loaded', () => {
		// Intercept the search request and add the query to the search
		addEventListener('hawksearch:before-search-executed', (event) => {
    event.detail.Query = "<<your_field_name>>.keyword: <<your_value>>";
});
  
HawkSearch.init({
  .....

then add this code at the end to trigger a search after the HawkSearch object is initialized:

.then(() => {
		HawkSearch.performSearch({
    Keyword: "",
});

A full code sample would look like this:

addEventListener(
    'hawksearch:loaded',
    () = >
         {
           // Intercept the search request and add the query to the search
           addEventListener(
               'hawksearch:before-search-executed', (event) = > {
                 event.detail.Query = "<<yourfield>>.keyword: <<your_value>>";
               });
           HawkSearch.init({
             clientId : "<<xxx>>",
             components : {
               'query-suggestions' : {template : '' },
               'search-field' : {strings : {placeholder : 'Search by Keyword'}},
               'conceptsearch-field' :
                   {strings : {placeholder : 'Search by a Concept'}},
               'imagesearch-field' :
                   {strings : {placeholder : 'Describe an image'}},
               'visualsearch-field' : {
                 template : 'visualsearch-field__template',
                 strings : {
                   dragImageMessage : 'Search By Image',
                   dropImageMessage : 'Drop an image here'
                 }
               },
               'search-results-item' :
                   {template : 'search-results-item__template'}
             },
             search : {
               url : window.location.pathname,
               endpointUrl : "https://searchapi-dev.hawksearch.net"
             },
             urlPrefixes : {
               assets : "https://dev.hawksearch.net",
               content :
                   "https://preview-dev.hawksearch.net/developerportalsandbox",
             },
             css : {customStyles : 'custom-styles__template'},
             fieldMappings : {
               title : 'xxx',
               url : 'xxx',
               description : 'xxx'
             },
             debug : true
           });
         })
    .then(() = > {
      HawkSearch.performSearch({
        Keyword : "",
      });
    });

Global Events

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