Using Result Templates

Results templates determine how your query results are displayed in your search interface. They output a specific HTML representation for each raw JSON result item returned by the Coveo Search API.

Result templates are separated in result layouts, which determine the format in which your results are presented. Then, using a template engine, you can specify the way each result is displayed.

Result Layouts

Your result templates are separated in layouts, which determine the format in which your results are presented. The Coveo JavaScript Search Framework supports three different result layouts:

Each layout uses its own set of result templates (see Result Layouts).

Template Engines

The Coveo JavaScript Search Framework supports two result template engines: HTML templates and Underscore templates.

You are strongly encouraged to use HTML templates over Underscore templates for a variety of reasons.

Advantages Disadvantages
HTML Templates (recommended)
  • Can be easily configured and customized with the drag-and-drop UI of the Interface Editor (see Coveo JavaScript Interface Editor)
  • Uses the Coveo JavaScript Search Result Template components (see Customizing Result Templates)
  • Possible to execute inside an environment with strict Content Security Policies (e.g., Salesforce with LockerService enabled)
  • Can use custom components for logic that is not available out of the box (see Creating Custom Components)
  • Less flexible, as it cannot execute arbitrary JavaScript code
Underscore Templates
  • Extremely flexible, as it executes arbitrary JavaScript code (see underscorejs.org)
  • Can be incompatible with stringent Content-Security-Policies.
    This could be considered insecure for some setups (e.g., Salesforce with LockerService enabled), depending on the backend server serving the JavaScript resources
  • Cannot be edited with the drag-and-drop UI of the Interface Editor (see Coveo JavaScript Interface Editor)
  • Can become hard to read and difficult to maintain

For a result template to be understood as such, it needs to be a script tag with an id attribute and the result-template CSS class.

Out of the Box Result Templates

Out of the box, the Coveo JavaScript Search Framework comes with prebuilt default HTML Result Templates for different types of results.

When creating your search page using the Interface Editor, these result templates are automatically included in your page, inside the div element that contains your ResultList component or components, depending on whether you are using a single or mutliple result layouts.

Otherwise, you can include the default result templates by adding the correct script in the header of your page, after the CoveoJsSearch.js or CoveoJsSearch.Lazy.js file, as follows:

<script src="relative-path-to-the-package/js/templates/templates.js"></script>

The id or data-template-id that you can see on the different components or as a selectable option in the JavaScript Interface Editor references those templates.

When using the Coveo JavaScript Search Framework, you should not modify the out of the box result templates from the templates.js file. Instead, create your own templates and upload them to your search page. By uploading your custom result templates inside the ResultList component for their respective layout, they will be applied before the out of the box templates, even when the templates.js file is included in your page.

What’s Next

Learn more about Result Templates and how to use and configure them.