Overview
All components in the Vue.js suite are extendable and can be modified to handle custom layout, styles and behavior. 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.
Goal
This document provides information regarding template extension of the Hawksearch results widget and it’s layout and style customization capabilities.
Prerequisite
Info |
---|
Configured Hawksearch results widget using the Vue template Configuring 'Hawksearch results' Widget Setup Hawksearch results with Enable Vue.js for Hawksearch results widget |
Steps of extending the base template
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.
Place the script tag containing the component’s overridden template in the file.
Save, rebuild and refresh the page.
Template overrides examples
The result item will most probably be extended. The component has a property for accessing individual fields from the index. To place the field value invoke getField() with the field key. The override should be placed in the Hawksearch results widget template.
Overriding the result item component with two column layout using bootstrap classes
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.TwoColumns.cshtml for example).
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().
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
Overriding the result item component to include images and links
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.Gallery.cshtml for example).
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).
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
Extending search results view to show additional fields based on the type of the result item
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.ContentTypeDynamicItems.cshtml for example).
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 )
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
Note |
---|
Vue.js requires all component templates to have a single root element. Note that all the examples are placed in a single <div> |
...