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
Updated 9 days ago