# 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

- close
- debugInfo
- disable
- enable
- getBindings
- open
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- alwaysShow
- contentTemplate
- enableLoadingAnimation
- loadingAnimation
- showDate
- title
- tooltipPlacement

### Constructors

- constructor

## Methods

### close

- close(): void

- - Defined in ui/Quickview/Quickview.ts :385

  Closes the `Quickview` modal box.

  #### Returns void

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

  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

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  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

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### open

- open(): Promise<void>

- - Defined in ui/Quickview/Quickview.ts :362

  Opens the `Quickview` modal box.

  #### Returns Promise<void>

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  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

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

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

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

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

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

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

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

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

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

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

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

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

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

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

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### alwaysShow

alwaysShow: boolean

- Defined in ui/Quickview/Quickview.ts :138

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

- Defined in ui/Quickview/Quickview.ts :188

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

- Defined in ui/Quickview/Quickview.ts :161

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>

- Defined in ui/Quickview/Quickview.ts :218

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 Customizing the Quickview Loading Animation.

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 Customizing the Default Loading Animation.

### showDate

showDate: boolean

- Defined in ui/Quickview/Quickview.ts :152

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

- Defined in ui/Quickview/Quickview.ts :145

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"

- Defined in ui/Quickview/Quickview.ts :250

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

- new Quickview(element: HTMLElement, options?: IQuickviewOptions, bindings?: IResultsComponentBindings, result?: IQueryResult, ModalBox?: ModalBox): Quickview

- Overwrites Component.constructor

  - Defined in ui/Quickview/Quickview.ts :257

  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