Support Menu

Coveo component Quickview

Coveo Quickview Component (CoveoQuickview)

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

Note:

  • You can change the appearance of the Quickview link / button by adding HTML inside the body of its div.
  • You can change the content of the Quickview modal box link by specifying a template ID or selector (see the contentTemplate option).

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 this is all optional. Simply including `<div class='CoveoQuickview'></div>` in the markup suffices most of the time and includes a default template, and default button appearance. -->

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

Index

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.

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.

showDate

showDate: boolean

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

Default value is 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.

Markup configuration example(s) :
data-title='foo'

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). Component 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(): 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

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 differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger 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.

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

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

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: any = ModalBoxModule

      The quickview modal box.

    Returns Quickview