Page Comparison

...

All components in the Vue.js suite are extendable and can be modified to handle custom layout, styles and behaviorbehaviour. This is possible due to the built-in capability of the platform to attach templates as script tag and therefore supplying a dynamic structure of the presentation.

...

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

...

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 you are using the correct template.

2. Place the script tag containing the component’s overridden template in the file.

3. Save, rebuild and refresh the page.

...

• Overriding the result item component with two column layout using bootstrap classes

  1. Navigate to the directory of the current 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.TwoColumns.cshtml for example).

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

     Code Block
     <script id="vue-hawksearch-result-item" type="x-template"> <div class="row"> <div class="col-md-6"> <div><h3>{{ getField('title') }}</h3></div> <div>{{ getField('info') }}</div> </div> <div class="col-md-6"> <div>{{ getField('content') }}</div> </div> </div> </script>

     Apply the desired structure in this format. All indexed fields are accessible through getField().

  4. Include the file in the project and make it an Embedded resource in the Visual Studio solution.

  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

Example: Overriding the result item component to include images and links

1. Navigate to the directory of the current 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.Gallery.cshtml for example).

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

   Code Block
   <script id="vue-hawksearch-result-item" type="x-template"> <div> <a :href="getField('url')"> <img :src="getField('image')"> </a> <p>{{ getField('description') }}</p> </div> </script>

   Apply the desired structure in this format. All indexed fields are accessible through getField(). Note the syntax of binding the attributes (no {{ }} and : placed before the attribute).

4. Include the file in the project and make it an Embedded resource in the Visual Studio solution.

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

Example: Overriding the result item component with two column layout using bootstrap classes

Example: Extending the result items with different layout for products and content

Example: Extending search results view to show additional fields based on the type of the result item

1. Navigate to the directory of the current 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.ContentTypeDynamicItems.cshtml for example).

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

   Code Block

   <script id="vue-hawksearch-result-item" type="x-template"> <div> <template v-if="getField('contenttype') == 'Telerik.Sitefinity.Events.Model.Event'"> <div><h3>{{ getField('title') }}</h3></div> <div><img :src="getField('image')"></div> <div>{{ getField('content') }}</div> </template> <template v-else-if="getField('contenttype') == 'Telerik.Sitefinity.News.Model.NewsItem'"> <div><h3>{{ getField('title') }}</h3></div> <div>{{ getField('summary') }}</div> <p><a :href="getField('link')">Read more</a></p> </template> <template v-else> <div>{{ getField('content') }}</div> </template> </div> </script>

   Apply the desired structure in this format. All indexed fields are accessible through getField(). Vue.js directives are applicable in the template override ( Vue.js Directives )

4. Include the file in the project and make it an Embedded resource in the Visual Studio solution.

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

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

...

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

...

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

Edit the file adding or replacing the template override for 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')">

...

Include the file in the project and make it an Embedded resource in the Visual Studio solution.

...

Save, build and reload the site.

...

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

General info

...

Example: Extending pagination tool with custom markup

General info

• Vue.js requires all component templates to have a single root element. Note that all the examples are placed in a single <div>

...

• The template is defined by HTML id attribute and there can only be one on a single page. Make sure not to duplicate the template overrides.

• If there are several Hawksearch widget templates used in different cases, there can be different component templates for each. For instance, if you need a separate structure for a specific list

...

• that has a dedicated widget, apply the custom template override there and use it only for this case

...

• .

...

• The script tag is not required to be in the widget template where

...

• it's used. A more general approach can be to place all the page specific templates separately and used them for all widgets on this page. This can be implemented with the

...

• Embedded code widget from the Scripts and Styles section.

• All of Vue.js directives (v-if, v-else, v-else-if, v-show etc.) are applicable in the template override. Vue.js Directives