Versions Compared

Old Version 5

changes.mady.by.user gabriel.georgiev

Saved on

compared with

New Version Current

changes.mady.by.user Liliya Burlakova

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

In this article you will find:

Table of Contents

Overview

The Hawksearch box widget comes with a ReactJS powered front end which has the latest features exposed to the Hawksearch service.

Goal

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

Prerequisite

Info

Configured Hawksearch box widget.

https://hawksearch.atlassian.net/wiki/spaces/CON/pages/605618600/Configuring%2BHawksearch%2Bbox%2BWidget

Steps for setup

  1. Open the selected widget template file

  2. Uncomment, if necessary, the part of the markup designated as React template. This should include a div element with attribute data-component="react-search-box" or data-component="react-search-box-bootstrap". It should be an empty div element. Comment the part marked as Vue template. Only this step is required for enabling the component, the rest of the steps are optional.
    The React template should look like this:

    Code Block
    // React template

    if (!SystemManager.IsDesignMode)
    {
        @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-search-box-bootstrap"
         data-client-guid="@Model.ClientId"
         data-hawksearch-tracking-api="@Model.TrackingUrl"
         data-hawksearch-base-api="@Model.HawksearchBaseAPI"
         data-hawksearch-search-api="@Model.HawksearchSearchingAPI"
         data-hawksearch-autocomplete-api="@Model.AutocompleteUrl"
         data-json-params="@Model.Data"
         data-search-page="@Model.ResultsUrl"
         data-index-name="@Model.Index"
         data-current-culture="@Model.CurrentCulture">
    </div>

    <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"))"
        }
    </script>

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

...