In this article you will find:

Overview

The Hawksearch results widget also has an implementation with VueReactJS. js provides out-of-the box access to the Hawksearch service. The framework specifics expose some particular features that cover many advanced scenarios.This version provides the most common use cases of the search service.

Goal

This document provides information on setting up the Hawksearch results widget using VueReactJS. js. Basic usage is covered in Selecting React or Vue Getting started and any additional information may be found here.

Prerequisite

Steps for setup

1. Open the selected widget template file

2. Uncomment, if necessary, the part of the markup designated as Vue React template. This should include a div element with attribute data-component="vue"react-app" or data-component="react-app-spabootstrap". In it, there should be Vue components named search-box, facet-list and resultsIt should be an empty div element. Comment the part marked as Vue template.
   The React template . Only this step is required for enabling the components, the rest of the steps are optional.

3. Modify the data-client-guid attribute to set the Hawksearch client ID.

4. Modify the is looking like this:
   

   Code Block

   // React template @Html.Script(Url.WidgetContent("assets/build/js/vendor.bundle.js"), "bottom", false) @Html.Script(Url.WidgetContent("assets/build/js/main.js"), "bottom", false) @Html.StyleSheet(Url.WidgetContent("assets/build/css/vendor.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/build/css/main.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch.css"), "head") @Html.StyleSheet(Url.WidgetContent("assets/dist/react-hawksearch-override.css"), "head") <div data-component="react-app-bootstrap" data-client-guid="@Model.ClientId" data-hawksearch-tracking-api="@Model.TrackingUrl" data-hawksearch-base-api

   attribute to set the Base API URL.Modify the

   ="@Model.HawksearchBaseAPI" data-hawksearch-search-api

   attribute to set the Search API URL

5. Modify the data-json-params attribute (JSON object, param_name: param_value) to set additional search parameters, specific for the widget instance.

6. Modify the data-index-name attribute to set index for the widget search requests.

7. Edit the HTML structure around <search-box>, <facet-list> and <results> to set the desired layout. The existing classes are used for the built-in theme. There is an additional Razor condition if the search box should be shown.

   ="@Model.HawksearchSearchingAPI" data-hawksearch-autocomplete-api="@Model.AutocompleteUrl" data-tracking-events="@Model.TrackingEvents" data-index-name="@Model.HawksearchIndexName" data-json-params="@Model.Data" data-show-searchbox="@Model.ShowSearchBox.ToString()" data-current-culture="@Model.CurrentCulture"> </div> <script data-translations="react-mappings" type="application/json"> { "Telerik.Sitefinity.Events.Model.Event": "@Html.HtmlSanitize(Html.Resource("EventTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Image": "@Html.HtmlSanitize(Html.Resource("ImageTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Video": "@Html.HtmlSanitize(Html.Resource("VideoTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Libraries.Model.Document": "@Html.HtmlSanitize(Html.Resource("DocumentTypeDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.News.Model.NewsItem": "@Html.HtmlSanitize(Html.Resource("NewsItemDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Blogs.Model.BlogPost": "@Html.HtmlSanitize(Html.Resource("BlogPostDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Lists.Model.ListItem": "@Html.HtmlSanitize(Html.Resource("ListItemDisplayName", "HawkWidgetsResources"))", "Telerik.Sitefinity.Pages.Model.PageNode": "@Html.HtmlSanitize(Html.Resource("PageNodeDisplayName", "HawkWidgetsResources"))" } </script> <script data-translations="react-translations" type="application/json"> { "Narrow Results": "@Html.HtmlSanitize(Html.Resource("NarrowResults", "HawkWidgetsResources"))", "Search Results": "@Html.HtmlSanitize(Html.Resource("SearchResults", "HawkWidgetsResources"))", "Search Results for": "@Html.HtmlSanitize(Html.Resource("SearchResultsFor", "HawkWidgetsResources"))", "Sort By": "@Html.HtmlSanitize(Html.Resource("SortBy", "HawkWidgetsResources"))", "Enter a search term": "@Html.HtmlSanitize(Html.Resource("EnterKeyword", "HawkWidgetsResources"))", "Quick Lookup": "@Html.HtmlSanitize(Html.Resource("QuickLookup", "HawkWidgetsResources"))", "Clear All": "@Html.HtmlSanitize(Html.Resource("ClearAll", "HawkWidgetsResources"))", "Clear": "@Html.HtmlSanitize(Html.Resource("Clear", "HawkWidgetsResources"))", "No Results": "@Html.HtmlSanitize(Html.Resource("NoResults", "HawkWidgetsResources"))", "Loading": "@Html.HtmlSanitize(Html.Resource("Loading", "HawkWidgetsResources"))", "You've Selected": "@Html.HtmlSanitize(Html.Resource("YouSelected", "HawkWidgetsResources"))", "response_error_generic": "An error occurred while searching for your results. Please contact the site administrator." } </script>

8. Save, re-build and refresh the page.

9. Now the active template that is used in the Hawksearch result widget should be the React one.