Quickview (Search Engine)

This is for:

Developer

Example Implementation

quickview.fn.tsx

import {buildQuickview, Result} from '@coveo/headless';
import {useEffect, useState, useContext, FunctionComponent} from 'react';
import {AppContext} from '../../context/engine';
 
interface QuickviewProps {
  result: Result;
}
 
export const Quickview: FunctionComponent<QuickviewProps> = (props) => {
  const {result} = props;
  const {engine} = useContext(AppContext);
 
  const controller = buildQuickview(engine!, {options: {result}});
 
  const [state, setState] = useState(controller.state);
  const [isModalOpen, toggleModal] = useState(false);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  const openModal = () => {
    controller.fetchResultContent();
    toggleModal(true);
  };
 
  const closeModal = () => toggleModal(false);
 
  if (!state.resultHasPreview) {
    return null;
  }
 
  if (isModalOpen) {
    return (
      <div>
        <button onClick={() => closeModal()}>X</button>
        <iframe srcDoc={state.content}></iframe>
      </div>
    );
  }
 
  return <button onClick={() => openModal()}>view</button>;
};
 
// usage
 
/**
 * ```tsx
 * <Quickview result={result} />;
 * ```
 */

Methods

fetchResultContent

Retrieves the preview content for the configured result. If options.onlyContentURL is true this will update the contentURL state property rather than content.

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state for the Quickview controller.

Properties

  • content: string

    The result preview HTML content.

  • isLoading: boolean

    true if content is being fetched, and false otherwise.

  • resultHasPreview: boolean

    true if the configured result has a preview, and false otherwise.

  • contentURL?: string

    The src path to use if rendering the quickview in an iframe.

Initialize

buildQuickview

Creates a Quickview controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

  • props: QuickviewProps

    The configurable Quickview properties.

Returns Quickview

QuickviewProps

The configurable Quickview properties.

Properties

QuickviewOptions

The options for the Quickview controller.

Properties

  • result: Result

    The result to retrieve a quickview for.

  • maximumPreviewSize?: number

    The maximum preview size to retrieve, in bytes. By default, the full preview is retrieved.

  • onlyContentURL?: boolean

    Whether to only update the contentURL attribute when using fetchResultContent rather than updating content. Use this if you’re using an iframe with state.contentURL as the source url.

HighlightKeyword

Properties

  • length: number

    The length of the offset.

  • offset: number

    The 0 based offset inside the string where the highlight should start.

Raw

Properties

  • [key: string]: unknown

    Custom keys that depend on the documents in the index.

Result

Properties

  • absentTerms: string[]

    The basic query expression terms which this query result item does not match. Note: This property is populated by terms from the query pipeline-processed q value (not from the original q value).

  • clickUri: string

    The hyperlinkable item URI. Notes: Use the clickUri value when you want to create hyperlinks to the item, rather than the uri or printableUri value.

  • excerpt: string

    The contextual excerpt generated for the item (see the excerptLength query parameter).

  • excerptHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item excerpt string.

  • firstSentences: string

    The first sentences retrieved from the item (see the retrieveFirstSentences query parameter).

  • firstSentencesHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item firstSentences string.

  • flags: string

    The flags that are set on the item by the index. Distinct values are separated by semicolons.

  • hasHtmlVersion: boolean

    Whether the index contains an HTML version of this item.

  • isRecommendation: boolean

    Whether the item score was boosted as a Coveo ML recommendation.

  • isTopResult: boolean

    Whether the item score was boosted by a featured result rule in the query pipeline.

  • percentScore: number

    The item ranking score expressed as a percentage (see the sortCriteria and rankingFunctions query parameters).

  • printableUri: string

    The human readable item URI. Note: Avoid using the printableUri value to create hyperlinks to the item. Use the clickUri value instead.

  • printableUriHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item printableUri string.

  • rankingInfo: string | null

    The raw debug information generated by the index to detail how the item was ranked. This property is null unless the debug query parameter is set to true.

  • raw: Raw

    The values of the fields which were retrieved for this item (see the fieldsToInclude and fieldsToExclude query parameters).

  • score: number

    The total ranking score computed for the item (see the sortCriteria and rankingFunctions query parameters).

  • summary: null

    The item summary (see the summaryLength query parameter).

  • summaryHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item summary string.

  • title: string

    Contains the title of the item.

  • titleHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item title string.

  • uniqueId: string

    The unique item identifier. You should consider the uniqueId value as an opaque string.

  • uri: string

    The item URI. Notes: Avoid using the uri value to create hyperlinks to the item. Use the clickUri value instead.

  • rankingModifier?: string

    If applicable, represents the type of ranking modification that was applied to this result.

Unsubscribe

Call signatures

  • (): void