---
title: Create Insight Panel result templates
slug: latest-custom-ip-result-templates
canonical_url: https://docs.coveo.com/en/quantic/latest/usage/custom-ip-result-templates/
collection: quantic
source_format: adoc
---
# Create Insight Panel result templates

[Result templates](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/) are HTML files that determine the format of the individual result [items](https://docs.coveo.com/en/210/) in an Insight Panel.
Quantic provides a default result template, but you can create your own to customize the display of result items in your Insight Panel.

Build result templates by assembling SLDS elements and [Quantic result template components](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/).
Within a result template, you can invoke the `result` variable, which the result template manager passes and which holds various attributes of the result item.

Typically, you'll define your result templates in a folder that's a sibling of your other Insight Panel files.
You'll connect them using conditions in your [JavaScript file](#javascript).

[listing]
```
exampleInsightPanel/
├── resultTemplates/
│   ├── exampleResultTemplate.html
├── exampleInsightPanel.html
├── exampleInsightPanel.js
├── exampleInsightPanel.js-meta.xml
```

## HTML

While optional, use the [`QuanticResultTemplate`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-template/) component.
This component helps you create responsive, stylistically cohesive templates by providing a recommended display structure that uses predefined [LWC slots](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/).

The following is an example of a result template for YouTube videos.
You can see more result template examples in the [Quantic project repository](https://github.com/coveo/ui-kit/tree/main/packages/quantic/force-app/solutionExamples/main/lwc/exampleInsightPanel/resultTemplates).

```html
<template>
  <c-quantic-result-template <1>
    is-any-preview-open={isAnyPreviewOpen}
    result-preview-should-not-be-accessible={resultPreviewShouldNotBeAccessible}
  >
    <c-quantic-colored-result-badge slot="label" label={result.raw.documenttype}></c-quantic-colored-result-badge> <2>
    <div slot="badges" class="slds-grid slds-grid_vertical-align-center">
      <div class="slds-m-right_xx-small">
        <c-quantic-result-tag variant="recommended" result={result}></c-quantic-result-tag>
      </div>
      <c-quantic-result-tag variant="featured" result={result}></c-quantic-result-tag>
    </div>
    <p slot="date" class="slds-size_xx-small">
      <lightning-formatted-date-time value={result.raw.date}></lightning-formatted-date-time> <3>
    </p>
    <div slot="title" class="slds-truncate">
      <c-quantic-result-link result={result} engine-id={engineId}></c-quantic-result-link>
    </div>
    <div slot="visual" class="slds-size_1-of-1 slds-medium-size_1-of-4 slds-large-size_1-of-4 slds-p-right_x-small slds-m-top_xx-small slds-m-bottom_x-small">
      <img loading="lazy" style="border-radius: 4px; border: none;" src={videoThumbnail}></img> <4>
    </div>
    <div slot="excerpt">
      {result.Excerpt}
    </div>
    <div slot="bottom-metadata" class="slds-text-align_left slds-m-top_xx-small slds-grid slds-grid_vertical-align-center" style="font-size: 10px">
      <lightning-icon icon-name="utility:clock" size="xx-small"></lightning-icon>
      <span class="slds-m-left_xxx-small">{videoTimeSpan}</span>
    </div>
  </c-quantic-result-template>
</template>
```
<1> Wrap your template in the `QuanticResultTemplate` component.
<2> As an example, this line leverages the [`QuanticColoredResultBadge`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-colored-result-badge/) component with the [`label`](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage#label-section) slot.
To instantiate this component, don't specify the engine ID, but pass the result item.
<3> In the [`date`](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage#date-section) slot, pass the result's `raw.date` [field](https://docs.coveo.com/en/200/) to the [Lightning Formatted Date Time](https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-date-time/example) component.
<4> The [`QuanticResult`](https://github.com/coveo/ui-kit/blob/master/packages/quantic/force-app/main/default/lwc/quanticResult/quanticResult.js) component exposes a `videoThumbnail` attribute which you can use to display the video thumbnail.

For additional details, see [Use the ResultTemplate component](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/).

## JavaScript

In your LWC JavaScript file, connect your [result templates](https://docs.coveo.com/en/quantic/latest/usage/custom-ip-result-templates/) with your main [HTML file](#html) using conditions.

The following sample is abbreviated for clarity in the specifics of result templates.
For the full sample, see [exampleInsightPanel.js](https://github.com/coveo/ui-kit/blob/master/packages/quantic/force-app/solutionExamples/main/lwc/exampleInsightPanel/exampleInsightPanel.js) in the Quantic project repository.

```javascript
// @ts-ignore
import {
  getHeadlessBundle,
  // ...
} from 'c/quanticHeadlessLoader';
// ...
// @ts-ignore
import youtubeTemplate from './resultTemplates/youtubeResultTemplate.html';

export default class ExampleInsightPanel extends LightningElement {
  /** @type {string} */
  @api engineId = 'example-insight-panel'; <1>

  // ...

  handleResultTemplateRegistration(event) { <2>
    const headless = getHeadlessBundle(this.engineId);
    event.stopPropagation(); <3>
    const resultTemplatesManager = event.detail; <4>

    const isYouTube = headless.ResultTemplatesHelpers.fieldMustMatch( <5>
      'filetype',
      ['YouTubeVideo']
    );
    // ...
    resultTemplatesManager.registerTemplates( <6>
      // ...
      {
        content: youtubeTemplate, <7>
        conditions: [isYouTube],
        priority: 1, <8>
        fields: ['ytvideoid', 'ytvideoduration'], <9>
      },
      {
        content: defaultTemplate,
        conditions: [],
      }
    );
  }
}
```
<1> The unique identifier for your Headless engine.
<2> This function is attached to the `onquantic__registerresulttemplates` event in your HTML file.
As its name suggests, it lets you register your result templates.
<3> Since you caught the event, stop its propagation.
<4> The `detail` property contains a result template manager, which you'll store in a variable.
<5> Create conditions to determine which result template to use for each result item.
<6> Register the result templates on the result template manager.
<7> This line and the next make your `youtubeTemplate` only apply to result items that fulfill the `isYouTube` condition.
If a result item doesn't match the conditions of any of your result templates, then the default Quantic one applies.
<8> This property sets the result template priority.
If the conditions of multiple templates are satisfied by a given result, the template with the highest priority is selected.
If multiple templates have equal priority, the first template registered is selected.
<9> Specify the fields to include in the search requests made by Quantic, if any.
In this case, request `ytvideoid` and `ytvideoduration` for your `youtubeTemplate`.
By default, the Coveo [index](https://docs.coveo.com/en/204/) doesn't return all possible item field values, so you must specify any non-default fields that you want to use in your result templates.