Example: Extending result item component to include a field from the response object

Owned by gabriel.georgiev (Deactivated)
Last updated: Aug 10, 2021 by andrey.sotirov (Deactivated)
2 min read

Steps to extend

  1. Navigate to the directory of the currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).

  2. Copy the file of the base template and name it accordingly (Hawksearch.SearchResponseFieldItem.cshtml for example).

  3. Edit the file adding or replacing the template override for the result item:

    <script id="vue-hawksearch-result-item" type="x-template"> <div> <div><h3>{{ getField('title') }}</h3></div> <div>{{ getField('content') }}</div> <input type="hidden" :value="getResponseField('TrackingId')"> </div> </script>

    Note, that there is an input with a specific method invoked. Using getResponseField(), the value of the TrackingId field is passed to an element placed inside the component. The method takes the field name as a parameter. In this case, it is on the top level of the response object:

    { "Facets": [ ... ], "VisitorTargets": [ { "Id": 9356, "Name": "International" }, { "Id": 10187, "Name": "awe" } ], "TrackingId": "87ac0720-a61c-4ba7-93d6-77835c60e67c", "Success": true, "Pagination": { ... }, "Keyword": "", "Results": [ ... ], "Selections": {}, "Sorting": { ... }, "Redirect": {}, "Merchandising": { ... }, "FeaturedItems": { ... }, "SearchDuration": 34 }

    Deeper properties can also be accessed:

    <input type="hidden" :value="getResponseField('VisitorTargets.0.Name')">

     

  4. Include the file in the project.

  5. Save, build and reload the site.

  6. Open the widget designer for Hawksearch results widget on the designated page and select the newly created template from the select list. Save and publish the page. Configuring Hawksearch results widget