Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

Overview

The React version of the Hawksearch results can be extended with custom templates for result items. For this, it is required to include the react-hawksearch NPM package separately and include the extended build resources.

Goal

This document provides information regarding template extension of the Hawksearch results widget and it’s layout and style customization capabilities.

Prerequisite

Configured Hawksearch results widget using the Vue template

Configuring 'Hawksearch results' Widget

Setup Hawksearch results with React

React SDK setup

Extending the widget template

  1. Open the results active widget template for editing. It is located in Mvc\Views\Hawksearch\Hawksearch.Default.cshtml. If a resource package is used, then edit the same path in the ResourcePackages folder. Make sure that this is the correct template.

  2. Create a custom result item component following the steps from Create results widget

  3. Make sure to include the proper markup (i.e. the target element) in the widget template.

  4. Import the build JS resources that include the components initialization.

    @Html.Script(Url.WidgetContent("assets/build/js/<build_file>.js"), "bottom", false)

  5. Clean up all other components markup that are not relevant to this widget.

  6. Save, rebuild and refresh the page.

Modifying React results components

  1. Follow Extending result item component for examples on how to create custom result items.

  • No labels