Page Comparison

...

Navigate to the directory of the currently 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.

Edit the file adding or replacing the template override for the Results component:

Code Block

    <script id="vue-hawksearch-results" type="x-template">
        <div class="hawk-results" @clickv-on:click="onClick">
            <autocorrect-suggestions />

            <search-results-label />

            <banner></banner>

            <selections />

            <template v-if="searchError">
                <span>{{ $t('response_error_generic') }}</span>
            </template>
            <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0">
                <span>{{ $t('No Results') }}</span>
            </template>
            <template v-else-if="!waitingForInitialSearch">
                <tabs></tabs>

                <div class="hawk-results__top-tool-row">
                    <tool-row />
                </div>

                <result-listing />

                <div class="hawk-results__bottom-tool-row">
                    <tool-row />
                </div>
            </template>

        </div>
    </script>

Add the <custom-results-label /> where the response field should be visualized (ln.7). In this example, the number of results is displayed after the search results label. The name of the field is passed to the results-field prop (i.e. Pagination.NofResults). These values follow the same convention as the one in the result item: Example: Extending result item component to include a field from the response object

Code Block

    <script id="vue-hawksearch-results" type="x-template">
        <div class="hawk-results" @clickv-on:click="onClick">
            <autocorrect-suggestions />

            <search-results-label />
            
            <custom-results-label results-field="Pagination.NofResults"></custom-results-label>

            <banner></banner>

            <selections />

            <template v-if="searchError">
                <span>{{ $t('response_error_generic') }}</span>
            </template>
            <template v-else-if="searchOutput && searchOutput.Results && searchOutput.Results.length == 0">
                <span>{{ $t('No Results') }}</span>
            </template>
            <template v-else-if="!waitingForInitialSearch">
                <tabs></tabs>

                <div class="hawk-results__top-tool-row">
                    <tool-row />
                </div>

                <result-listing />

                <div class="hawk-results__bottom-tool-row">
                    <tool-row />
                </div>
            </template>

        </div>
    </script>

The end result so far is only the value of the field. To dynamically display additional labels around the required field, the component provides several slots. Currently, there are three available: before, after and default (i.e. instead) slot. With this example, the label will be either Found 12 results or No results found depending on the search output.

Code Block

    ...

    <custom-results-label results-field="Pagination.NofResults">
        <template v-slot:before>
            Found
        </template>
        <template v-slot:after>
            results
        </template>
        <template v-slot>
            No results found
        </template>
    </custom-results-label>
    
    ...

Include the file in the project and make it an Embedded resource in the Visual Studio solution.
Save, build and reload the site.

Versions Compared

Old Version 4

New Version Current

Key