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.

Notes:

  • 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).

Example:

[ ... ]

<script class='result-template' type='text/underscore' id='myContentTemplateId'>
  <div>
    <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" />
    </table>
  </div>
</script>

[ ... ]

<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>
      </div>
  </script>

  [ ... ]

<!-- 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).

Index

Methods

Properties

Accessors

Component Options

Constructors

Methods

close

  • close(): void

debugInfo

  • debugInfo(): any

disable

  • disable(): void

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

    Returns void

enable

  • 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

getBindings

open

  • 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.

    Parameters

    • 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

Properties

bind

bind: ComponentEvents

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

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

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

componentStateModel

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

disabled: boolean

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

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

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

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

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

Static ID

ID: string

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

Accessors

usageAnalytics

Component Options

alwaysShow

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.

Default

false

Available since

September 2015 Release (v1.0.59)

Markup configuration example(s) :
data-always-show='true'
data-always-show='false'

contentTemplate

contentTemplate: Template

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

Note:

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).

Example:

  • 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

enableLoadingAnimation: boolean

Specifies whether to enable the loading animation.

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

Default value is true.

Default

true

Markup configuration example(s) :
data-enable-loading-animation='true'
data-enable-loading-animation='false'

loadingAnimation

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).

Examples:

  • 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 Styling the Coveo JavaScript Search Framework).

showDate

showDate: boolean

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

Default value is true.

Default

true

Markup configuration example(s) :
data-show-date='true'
data-show-date='false'

title

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) :
data-title='foo'

tooltipPlacement

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.

Example:

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

Default

bottom

Available since

January 2019 Release (v2.5395.12)

Constructors

constructor

  • Creates a new Quickview component.

    Parameters

    • 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: ModalBox = ModalBoxModule

      The quickview modal box.

    Returns Quickview