Coveo Quickview Component (CoveoQuickview)

The Quickview component renders a button/link which the end user can click to open a modal box containing certain information about a result. Most of the time, this component references a QuickviewDocument in its contentTemplate.


  • Quickview is not meant to replace a ResultLink to access an item; it has certain limitations (e.g., custom styles and embedded images/links may not work as expected in a Quickview).
  • You can change the appearance of the Quickview link/button by adding elements in the inner HTML of its div.
  • You can change the content of the Quickview modal box link by specifying a template id or CSS selector (see the contentTemplate option).
  • When using Coveo for Salesforce 3.16, in an environment compliant with LockerService, ensure you use CoveoSalesforceQuickview (see Changing the Default Quick View in Coveo for Salesforce).


[ ... ]

<script class='result-template' type='text/underscore' id='myContentTemplateId'>
    <span>This content will be displayed when then end user opens the quickview modal box. It could also include other Coveo component, and use core helpers.</span>
    <table class="CoveoFieldTable">
      <tr data-field="@liboardshorttitle" data-caption="Board" />
      <tr data-field="@licategoryshorttitle" data-caption="Category" />
      <tr data-field="@sysauthor" data-caption="Author" />

[ ... ]

<div class='CoveoResultList'>
  <script class='result-template' type='text/underscore' id='myResultTemplateId'>

  [ ... ]

    <!-- The `myContentTemplateId` template applies when displaying content in the quickview modal box. -->
      <div class='CoveoQuickview' data-template-id='myContentTemplateId'>
        <!-- This changes the appearance of the Quickview button itself in the results -->
        <span>Click here for a quickview</span>

  [ ... ]

<!-- Note that simply including `<div class='CoveoQuickview'></div>` in the markup will be enough most of the time, since the component includes a default template and a default button appearance. -->

This component is a result template component (see Result Templates).




  • close(): void


  • debugInfo(): any


  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void


  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void



  • open(): Promise<void>

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.


    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent



Allows the component to bind events and execute them only when it is enabled.




componentOptionsModel: ComponentOptionsModel

Contains the state of options for different components. Mainly used by ResultLink.


componentStateModel: ComponentStateModel

Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers component state event when modified. Each component can listen to those events.


disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.




logger: Logger

Allows component to log in the dev console.


queryController: QueryController

Contains the singleton that allows to trigger queries.


queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.


root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).


searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton



Component Options


alwaysShow: boolean

Specifies whether to always show the Quickview button/link, even when the index body of an item is empty.

In such cases, the contentTemplate defines what appears in the Quickview modal box. Consequently, if there is no quickview for the item, you MUST specify a custom contentTemplate, otherwise the component will throw an error when opened.

Default value is false.

Markup configuration example(s) :


contentTemplate: Template

Specifies a custom template to use when displaying content in the Quickview modal box.


You can use CoreHelpers methods in your content template.

You can specify a previously registered template to use either by referring to its HTML id attribute or to a CSS selector (see TemplateCache).


  • Specifying a previously registered template by referring to its HTML id attribute:
<div class="CoveoQuickview" data-template-id="myContentTemplateId"></div>
  • Specifying a previously registered template by referring to a CSS selector:
<div class='CoveoQuickview' data-template-selector=".myContentTemplateSelector"></div>

If you do not specify a custom content template, the component uses its default template.


enableLoadingAnimation: boolean

Specifies whether to enable the loading animation.

See also [loadingAnimation]{Quickview.options.loadingAnimation}.

Default value is true.

Markup configuration example(s) :


loadingAnimation: HTMLElement | Promise<HTMLElement>

If enableLoadingAnimation is true, specifies a custom animation to display while the content of the quickview modal window is loading. You can either specify the CSS selector of the HTML element you wish to display, or the id of a previously registered template (see TemplateCache).

See Branding Customization - Customizing the Quickview Loading Animation.


  • Specifying the CSS selector of the HTML element to display:
<div class="CoveoQuickview" data-loading-animation-selector=".my-loading-animation"></div>
  • Specifying the id of a previously registered template:
<div class="CoveoQuickview" data-loading-animation-template-id="my-loading-animation-template"></div>

By default, the loading animation is a Coveo animation, which you can customize with CSS (see Branding Customization - Customizing the Default Loading Animation.


showDate: boolean

Specifies whether to display the item date in the Quickview modal box header.

Default value is true.

Markup configuration example(s) :


title: string

Specifies the title that should appear in the Quickview modal box header.

Default value is undefined, which is equivalent to the empty string.

Markup configuration example(s) :


tooltipPlacement: "auto" | "auto-start" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"

Specifies the emplacement of the tooltip in relation to the Quickview HTML element.


Setting this option to top-start will make the tooltip appear on top of the Quickview button, aligned to the left.

Default value is bottom.



  • Creates a new Quickview component.


    • element: HTMLElement

      The HTMLElement on which to instantiate the component.

    • Optional options: IQuickviewOptions

      The options for the Quickview component.

    • Optional bindings: IResultsComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    • Optional result: IQueryResult

      The result to associate the component with.

    • Default value ModalBox: any = ModalBoxModule

      The quickview modal box.

    Returns Quickview