Create Insight Panel result templates

This is for:

In this article

HTML
JavaScript

Result templates are HTML files that determine the format of the individual result items 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. 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.

exampleInsightPanel/
├── resultTemplates/
│   ├── exampleResultTemplate.html
├── exampleInsightPanel.html
├── exampleInsightPanel.js
├── exampleInsightPanel.js-meta.xml

HTML

While optional, we recommend using the QuanticResultTemplate component. This component helps you create responsive, stylistically cohesive templates by providing a recommended display structure that uses predefined LWC slots.

The following is an example of a result template for YouTube videos. You can see more result template examples in the Quantic project repository.

<template>
  <c-quantic-result-template 
    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> 
    <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> 
    </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> 
    </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>

	Wrap your template in the `QuanticResultTemplate` component.
	As an example, this line leverages the `QuanticColoredResultBadge` component with the `label` slot. To instantiate this component, you don’t need to specify the engine ID, but you do need to pass the result item.
	In the `date` slot, pass the result’s `raw.date` field to the Lightning Formatted Date Time component.
	The `QuanticResult` component exposes a `videoThumbnail` attribute which you can use to display the video thumbnail.

For additional details, see Use the ResultTemplate component.

JavaScript

In your LWC JavaScript file, connect your result templates with your main HTML file using conditions.

The following sample is abbreviated for clarity in the specifics of result templates. For the full sample, see exampleInsightPanel.js in the Quantic project repository.

// @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'; 

  // ...

  handleResultTemplateRegistration(event) { 
    const headless = getHeadlessBundle(this.engineId);
    event.stopPropagation(); 
    const resultTemplatesManager = event.detail; 

    const isYouTube = headless.ResultTemplatesHelpers.fieldMustMatch( 
      'filetype',
      ['YouTubeVideo']
    );
    // ...
    resultTemplatesManager.registerTemplates( 
      // ...
      {
        content: youtubeTemplate, 
        conditions: [isYouTube],
        priority: 1, 
        fields: ['ytvideoid', 'ytvideoduration'], 
      },
      {
        content: defaultTemplate,
        conditions: [],
      }
    );
  }
}

	The unique identifier for your Headless engine.
	This function is attached to the `onquantic__registerresulttemplates` event in your HTML file. As its name suggests, it lets you register your result templates.
	Since you caught the event, stop its propagation.
	The `detail` property contains a result template manager, which you’ll store in a variable.
	Create conditions to determine which result template to use for each result item.
	Register the result templates on the result template manager.
	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.
	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.
	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 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.