Versions Compared

Key

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

...

This document provides insight on Vue.js React powered custom mappings feature.

...

Info

Configured Hawksearch box or results widget using the Vue React template

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

Setup Hawksearch box with Vue.jsReact

Configuring 'Hawksearch results' Widget

Setup Hawksearch results with Vue.jsReact

Labels mapping

The label mappings are realized the same way as the translations. An array with the label values is positioned in each of the widget templates. In this case however, the array should be extended with any values that are specific to the indexed data. The most common case is mapping the Sitefinity content type value to a human readable label in the facets and selections header.

Code Block
<script data-translations="vuereact-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"))",
        ...
    }
</script>

...