Coveo JavaScript Search Framework (V2.4382.10) - API Reference

The Coveo JavaScript Search Framework allows to easily create feature rich search interfaces (see JavaScript Search Framework Home).

This article provides the API reference for framework components, classes, interfaces, and type aliases.

Components

Components are the building blocks of the Coveo JavaScript Search Framework (see Components ).

AdvancedSearch Component

Component HTML element class: CoveoAdvancedSearch

The AdvancedSearch component is meant to render a section in the Settings menu to allow the end user to easily create complex queries to send to the index.

You can write custom code to add new sections in the Advanced Search modal box generated by this component by attaching a handler to the buildingAdvancedSearch event.

Options

Option

(type)

Description
includeDate

(boolean)

Specifies whether to include the built-in Date section. Default value is true.

includeDocument

(boolean)

Specifies whether to include the built-in Document section. Default value is true.

includeKeywords

(boolean)

Specifies whether to include the built-in Keywords section. Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new AdvancedSearch component. Triggers the buildingAdvancedSearch event.

Aggregate Component

Component HTML element class: CoveoAggregate

The Aggregate component allows to display the result on an aggregate operation on the index. It hooks itself to the query to add a new IGroupByRequest, then displays the result.

Options

Option

(type)

Description
field

(IFieldOption)

Specifies the field on which to do the aggregate operation. This parameter is mandatory.

format

(string)

Specifies how to format the value. The available formats are defined in the Globalize library (see Globalize.

The most commonly used formats are:

  • c0 - Formats the value as a currency.
  • n0 - Formats the value as an integer.
  • n2 - Formats the value as a floating point with 2 decimal digits.

Default value is c0.

operation

(string)

Specifies the aggregate operation to perform. The possible values are:

  • sum - Computes the sum of the computed field values.
  • average - Computes the average of the computed field values.
  • minimum - Finds the minimum value of the computed field values.
  • maximum - Finds the maximum value of the computed field values.

Default value is sum.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Aggregate component.

Analytics Component

Component HTML element class: CoveoAnalytics

The Analytics component can log user actions performed in the search interface and send them to a REST web service exposed through the Coveo Cloud Platform. You can use analytics data to evaluate how users are interacting with your search interface, improve relevance and produce analytics dashboards within the Coveo Cloud Platform.

See Step 7 - Usage Analytics of the Getting Started with the JavaScript Search Framework V1 tutorial for an introduction to usage analytics.

See also Sending Custom Analytics Events for more advanced use cases.

Options

Option

(type)

Description
anonymous

(boolean)

Specifies whether to convert search user identities to unique hash when logging analytics data, so that analytics reviewers and managers will not be able to clearly identify which user is performing which query. When you set this option to true, the Coveo Usage Analytics service can still properly differentiate sessions made by anonymous users from sessions made by users authenticated in some way on the site containing the search page.

Default value is false.

endpoint

(string)

Specifies the URL of the Usage Analytics service. You do not have to specify a value for this option, unless the location of the service you use differs from the default Coveo Cloud Usage Analytics endpoint. Default value is https://usageanalytics.coveo.com.

organization

(string)

Specifies the organization bound to the access token. This is necessary when using an access token, because a single access token can be associated to more than one organization. Default value is undefined, and the value of this parameter will fallback to the organization used for the search endpoint.

searchHub

(string)

Sets the Search Hub dimension on the search events. The Search Hub dimension is typically a name that refers to a specific search page. For example, you could use the CommunitySite value to refer to a search page on a public community site.

If you wish to use the search hub dimension for security reasons (e.g., to provide different query suggestions for internal and external users), you should specify the search hub when generating the search token for the end user (in safe, server-side code), rather than setting it with this option (see Search Token Authentication).

Default value is default.

splitTestRunName

(string)

Specifies the name of the split test run that the search page is part of. You can use this dimension to perform A/B testing using different search page layouts and features inside the Coveo Query pipeline.

Default value is undefined and no split test run name is reported to the Coveo Usage Analytics service.

splitTestRunVersion

(string)

Specifies the version name for the page when a split test run is active. When reporting on A/B testing analytics data, this value specifies the test run version name that was presented to the user.

Default value is undefined

token

(string)

Specifies the token to use to access the usage analytics endpoint. Default value is undefined, and the component uses the search token.

user

(string)

Specifies the name of the user for the usage analytics logs. Default value is undefined

userDisplayName

(string)

Specifies the user display name for the usage analytics logs. Default value is undefined

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

client

(IAnalyticsClient)

A reference to the AnalyticsClient, which performs the heavy duty part of sending the usage analytics events to the Coveo Usage Analytics service.

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Analytics component. Creates the AnalyticsClient.

AnalyticsSuggestions Component

Component HTML element class: CoveoAnalyticsSuggestions

The AnalyticsSuggestion component provides query suggestions based on the queries that a Coveo Analytics service most commonly logs. This component orders possible query suggestions by their respective number of successful item views, thus prioritizing the most relevant query suggestions. Consequently, when better options are available, this component does not suggest queries resulting in no clicks from users or requiring refinements.

The query suggestions appear in the Omnibox Component. The AnalyticsSuggestion component strongly relates to the Analytics component. While a user is typing in a query box, the AnalyticsSuggestion component allows them to see and select the most commonly used and relevant queries.

Options

Option

(type)

Description
headerTitle

(string)

Specifies the title of the query suggestions group in the Omnibox component. This option is not available when using the default Lightning Friendly Theme (see Lightning Friendly Theme). Default value is the localized string for "Suggested Queries".

numberOfSuggestions

(number)

Specifies the number of query suggestions to request and display in the Omnibox component. Default value is 5 and minimum value is 1.

omniboxZIndex

(number)

Specifies the z-index position at which the query suggestions render themselves in the Omnibox component. Higher values are placed first. Default value is 52 and minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new AnalyticsSuggestions component. Also binds event handlers so that when a user selects a suggestion, an omniboxFromLink usage analytics event is logged if the suggestion comes from a standalone search box, or an omniboxAnalytics usage analytics event is logged otherwise.

AuthenticationProvider Component

Component HTML element class: CoveoAuthenticationProvider

The AuthenticationProvider component makes it possible to execute queries with an identity that the end user can obtain using an authentication provider configured on the Coveo REST Search API (see Claims Authentication). When necessary, this component handles redirecting the browser to the address that starts the authentication process.

You can use the data-tab attribute to enable the AuthenticationProvider component only for the tabs of your search interface that require authentication (see the Tab component).

Options

Option

(type)

Description
caption

(string)

Specifies the display name of the authentication provider. This is the name that you want to appear in the user interface when the end user is logging in. Default value is the name option value.

name

(string)

Specifies the name of the authentication provider. See SAML Authentication.

showIFrame

(boolean)

If the useIFrame option is true, specifies whether to make the authentication <iframe> visible to the user (inside a popup). When the underlying authentication provider requires no user interaction (for example, when a user authenticates using Windows authentication along with SharePoint claims), setting this option to false reduces the visual impact of the authentication process.

Default value is true.

useIFrame

(boolean)

Specifies whether to use an <iframe> to host the chain of redirection that make up the authentication process. Using an <iframe> prevents leaving the search page as part of the authentication process. However, some login providers refuse to load in an <iframe>.

Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new AuthenticationProvider component.

Backdrop Component

Component HTML element class: CoveoBackdrop

The Backdrop component renders an image URL (either passed as a direct URL or contained in a result field) as a background image. It is useful for displaying information in front of a dynamic background image. The Backdrop component will automatically initialize components embedded within itself:

  <div class="CoveoBackdrop" data-image-field="ytthumbnailurl">
    <div class="CoveoFieldValue" data-field="somefield"></div>
  </div>

Options

Option

(type)

Description
imageField

(IFieldOption)

Specifies the field from which the background image will be pulled. If Backdrop.options.imageUrl is specified, it will override this option.

imageUrl

(string)

Specifies a direct URL from which the background image will be sourced. Has priority over Backdrop.options.imageField.

overlayColor

(string)

Specifies the color that will be overlaid on top of the background image. This option needs to be declared as a CSS color. Be sure to use RGBA with an alpha value lower than 1 in order to be able to see the image behind the overlay color. Example value : "rgba(101, 123, 76, 0.5)"

overlayGradient

(boolean)

Specifies whether the overlay color should be instead be rendered as a top-to-bottom gradient from Backdrop.options.overlayColor to transparent. Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Backdrop component.

Badge Component

Component HTML element class: CoveoBadge

The Badge component outputs a field value with customizable colors and an icon preceding it. This component is a result template component (see Result Templates). It extends the FieldValue component. Therefore all FieldValue options are also available for a Badge component.

Options

Option

(type)

Description
colors

(IBadgeColors)

Specifies the colors for the Badge component. You must specify the colors in a JSON format similar to what follows:

{
  "values":{
    "foo":{
      "icon":"blue",
      "text":"#222"
    },
    "bar":{
      "icon":"green",
      "text":"lightgreen"
    }
  },
  "icon":"red",
  "text":"#9ab52b"
}

This format allows you to customize both the icon and text colors for each field value as well as the default values.

Colors can be specified in HTML or hexadecimal format.

PromotedResultscaptionForFeatured

(string)

Specifies the caption that should be used for "Featured Results". Default value is the localized string for Featured.

PromotedResultscaptionForRecommended

(string)

Specifies the caption that should be used for "Recommended Results". Default value is the localized string for Recommended.

PromotedResultscolorForFeaturedResults

(string)

Specifies the color that should be used for "Featured Results". This can be specified using:

  • a hexadecimal value (e.g., #f58020)
  • an RGB value (e.g., rgb(125,10,36))
  • a CSS color name (e.g., red)

Default value is undefined, and is controlled through the default stylesheet of the framework.

PromotedResultscolorForRecommendedResults

(string)

Specifies the color that should be used for "Recommended Results". This can be specified using:

  • a hexadecimal value (e.g., #f58020)
  • an RGB value (e.g., rgb(125,10,36))
  • a CSS color name (e.g., red)

Default value is undefined, and is controlled through the default stylesheet of the framework.

PromotedResultsshowBadgeForFeaturedResults

(boolean)

Specifies if a badge should be added to "Featured Results" configured through a Coveo Query Pipeline. Default value is true.

PromotedResultsshowBadgeForRecommendedResults

(boolean)

Specifies if a badge should be added to "Recommended Results" returned by a Coveo Machine Learning algorithm. Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Badge component.

PromotedResultsbind

(ComponentEvents)

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

PromotedResultscomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

PromotedResultscomponentStateModel

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

PromotedResultsdisabled

(boolean)

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

PromotedResultslogger

(Logger)

Allows component to log in the dev console.

PromotedResultsqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

PromotedResultsqueryStateModel

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

PromotedResultsroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

PromotedResultssearchInterface

(SearchInterface)

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

PromotedResultsusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

PromotedResultsID

(string)

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

PromotedResultsconstructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

Component HTML element class: CoveoBreadcrumb

The Breadcrumb component displays a summary of the currently active query filters. For example, when the user selects a Facet value, the breadcrumbs display this value.

The active filters are obtained by the component by firing an event in the Breadcrumb component.

All other components having an active state can react to this event by providing custom bits of HTML to display inside the breadcrumbs.

Thus, it is possible to easily extend the Breadcrumb component using custom code to display information about custom states and filters.

See BreadcrumbEvents for the list of events and parameters sent when a Breadcrumb component is populated.

Property

(type)

Description

(ComponentEvents)

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

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

(Logger)

Allows component to log in the dev console.

(QueryController)

Contains the singleton that allows to trigger queries.

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

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

(SearchInterface)

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

(IAnalyticsClient)

A reference to the Analytics.client.

(string)

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

Creates a new Breadcrumb component. Binds event on QueryEvents.deferredQuerySuccess to draw the breadcrumbs.

CardActionBar Component

Component HTML element class: CoveoCardActionBar

The CardActionBar component displays an action bar at the bottom of a card result (see Result Layouts). It is a simple container for buttons or complementary information. You should place this component at the bottom of a card result template (i.e., as the last child of the surrounding coveo-result-frame div).

See Result Layouts - Using the CardActionBar Component

Options

Option

(type)

Description
hidden

(boolean)

Whether to hide the component by default and append a visual indicator to its parent query result. If this option is set to true, the component will show itself when the user clicks its parent query result.

Default value is true.

openOnMouseOver

(boolean)

Whether to open the CardActionBar when the cursor hovers over it. This option is only meaningful when hidden is set to true.

Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new CardActionBar component.

CardOverlay Component

Component HTML element class: CoveoCardOverlay

The CardOverlay component displays a button that the user can click to toggle the visibility of an overlay on top of an IQueryResult. While this component typically populates a CardActionBar component, it is actually possible to place a CardOverlay component anywhere in any result. The primary purpose of the CardOverlay component is to display additional information about a result in a format that fits well within a card result layout (see Result Layouts).

When initialized, this component creates a <div class="coveo-card-overlay"> element as the last child of its parent IQueryResult, and displays a button which toggles the visibility of the overlay.

Options

Option

(type)

Description
icon

(string)

Specifies the icon to use for the overlay icon and for the button icon. The name of the icon to use should be specified in dashed case. ie: facet-expand

title

(string)

Specifies the string to use for the overlay title and for the button text. Setting a value for this option is required for this component to work.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new CardOverlay component.

DidYouMean Component

Component HTML element class: CoveoDidYouMean

The DidYouMean component is responsible for displaying query corrections. If this component is in the page and the query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.

Options

Option

(type)

Description
enableAutoCorrection

(boolean)

Specifies whether the DidYouMean component automatically triggers a new query when a query returns no result and a possible correction is available. Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new DidYouMean component.

DistanceResources Component

Component HTML element class: CoveoDistanceResources

The DistanceResources component defines a field that computes the distance according to the current position of the end user. Components relying on the current distance should be disabled until this component successfully provides a distance.

See also DistanceEvents.

Options

Option

(type)

Description
cancelQueryUntilPositionResolved

(boolean)

Whether to cancel all the queries until the DistanceResources component successfully resolves a position. Default value is true

disabledDistanceCssClass

(string)

The CSS class for components that need to be re-enabled when the DistanceResources component successfully provides a distance. Default value is coveo-distance-disabled.

distanceField

(IFieldOption)

Specifies the name of the field in which to store the distance value. Specifying a value for this option is required for the DistanceResources component to work.

googleApiKey

(string)

The API key to use to request the Google API geolocation service. If you do not specify a value for this option, the DistanceResources component does not try to request the service.

latitudeField

(IFieldOption)

Specifies the name of the field that contains the latitude value.

The field you specify for this option must be an existing numerical field in your index (see Fields - Page. Otherwise, your query responses will contain a QueryExceptionInvalidQueryFunctionField or QueryExceptionInvalidQueryFunctionFieldType` exception, and the DistanceResources component will be unable to evaluate distances.

Specifying a value for this option is required for the DistanceResources component to work.

latitudeValue

(number)

The latitude to use if no other position was provided.

You must also specify a longitudeValue if you specify a latitudeValue.

longitudeField

(IFieldOption)

Specifies the name of the field that contains the longitude value.

The field you specify for this option must be an existing numerical field in your index (see Fields - Page. Otherwise, your query responses will contain a QueryExceptionInvalidQueryFunctionField or QueryExceptionInvalidQueryFunctionFieldType` exception, and the DistanceResources component will be unable to evaluate distances.

Specifying a value for this option is required for the DistanceResources component to work.

longitudeValue

(number)

The longitude to use if no other position was provided.

You must also specify a latitudeValue if you specify a longitudeValue.

triggerNewQueryOnNewPosition

(boolean)

Whether to execute a new query when the DistanceResources component successfully provides a new position. Default value is false.

unitConversionFactor

(number)

The conversion factor to apply to the base distance unit (meter).

  • If you want to convert distances to kilometers, you should set the unitConversionFactor to 1000.
  • If you want to convert distance to miles, you should set the unitConversionFactor to 1610 (one mile is approximately equal to 1610 meters).

Default value is 1000.

useNavigator

(boolean)

Whether to request the geolocation service of the web browser. If not defined, will not try to request the service.

Recent web browsers typically require a site to be in HTTPS to enable their geolocation service.

If you do not specify a value for this option, the DistanceResources component does not try to request the service.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new DistanceResources component.

ErrorReport Component

Component HTML element class: CoveoErrorReport

The ErrorReport component takes care of handling fatal error when doing a query on the index / Search API. For example, the ErrorReport component displays a message when the service responds with a 401 or 503 error. This component also renders a small text area with the JSON content of the error response, for debugging purposes.

Options

Option

(type)

Description
showDetailedError

(boolean)

Specifies whether to display a detailed error message as a JSON in a text content area. Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ErrorReport component.

Excerpt Component

Component HTML element class: CoveoExcerpt

The Excerpt component renders an excerpt of its associated result and highlights the keywords from the query using the appropriate template helpers. This component is a result template component (see Result Templates).

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Excerpt component.

ExportToExcel Component

Component HTML element class: CoveoExportToExcel

The ExportToExcel component renders an item in the Settings menu to allow the end user to export the current search results to the Microsoft Excel format (.xlsx).

Options

Option

(type)

Description
fieldsToInclude

Specifies the fields to include in the CSV output. Note that this does not affect top level properties such as the title, clickUri, printableUri and sysUri, for example.

Default value is undefined, meaning all fields will be exported.

numberOfResults

(number)

Specifies the number of results to include in the resulting Excel file. Generating and downloading the Excel file should take a reasonably short amount of time when using the default value. However, this amount of time will increase exponentially as you set the value higher.

Consequently, you should avoid setting this value above the default index limit of 1000 search results.

Default value is 100. Minimum value is 1.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ExportToExcel component.

Facet Component

Component HTML element class: CoveoFacet

The Facet component displays a facet of the results for the current query. A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences). The list of values is obtained using a GroupByRequest operation performed at the same time as the main query.

The Facet component allows the end user to drill down inside a result set by restricting the result to certain field values. It also allows filtering out values from the facet itself, and can provide a search box to look for specific values inside larger sets.

This is probably the most complex component in the Coveo JavaScript Search Framework and as such, it allows for many configuration options.

See also the FacetRange and HierarchicalFacet components (which extend this component), and the FacetSlider component (which does not properly extend this component, but is very similar).

Options

Option

(type)

Description
additionalFilter

(string)

Specifies an additional query expression (query override) to add to each GroupByRequest that this facet performs. Example: @date>=2014/01/01

allowedValues

Specifies an explicit list of allowedValues in the GroupByRequest. If you specify a list of values for this option, the facet uses only these values (if they are available in the current result set).

Example:

The following facet only uses the Contact, Account, and File values of the @objecttype field. Even if the current result set contains other @objecttype values, such as Message, or Product, the facet does not use those other values.


<div class="CoveoFacet" data-field="@objecttype" data-title="Object Type" data-tab="All" data-allowed-values="Contact,Account,File"></div>

Default value is undefined, and the facet uses all available values for its field in the current result set.

availableSorts

If the enableSettings option is true, specifies the sort criteria options to display in the facet Settings menu. Possible values are:

  • "occurrences"
  • "score"
  • "alphaAscending"
  • alphaDescending
  • "computedfieldascending"
  • "computedfielddescending"
  • "custom"

See IGroupByRequest.sortCriteria for a description of each possible value.

  • The FacetRange component does not support this option.
  • Using value captions will disable alphabetical sorts (see the valueCaption option).

Default value is occurrences,score,alphaAscending,alphaDescending.

computedField

(IFieldOption)

Specifies the name of a field on which to execute an aggregate operation for all distinct values of the facet field. The facet displays the result of the operation along with the number of occurrences for each value.

You can use this option to compute the sum of a field (like a money amount) for each listed facet value.

Works in conjunction with the computedFieldOperation, computedFieldFormat, and computedFieldCaption options.

computedFieldCaption

(string)

Specifies what the caption of the computedField should be in the facet Settings menu for sorting. For example, setting this option to "Money" will display "Money Ascending" for computed field ascending.

The FacetRange component does not support this option.

Default value is the localized string for ComputedField.

computedFieldFormat

(string)

Specifies how to format the values resulting from a computedFieldOperation. The Globalize library defines all available formats (see Globalize).

The most commonly used formats are:

  • c0 - Formats the value as a currency.
  • n0 - Formats the value as an integer.
  • n2 - Formats the value as a floating point with 2 decimal digits.

Default value is "c0".

computedFieldOperation

(string)

Specifies the type of aggregate operation to perform on the computedField. The possible values are:

  • sum - Computes the sum of the computed field values.
  • average - Computes the average of the computed field values.
  • minimum - Finds the minimum value of the computed field values.
  • maximum - Finds the maximum value of the computed field values.

Default value is sum.

customSort

Specifies a custom order by which to sort the facet values.

Example:

You could use this option to specify a logical order for support tickets, such as:

<div class="CoveoFacet" data-field="@ticketstatus" data-title="Ticket Status" data-tab="All" data-custom-sort="New,Opened,Feedback,Resolved"></div>

The FacetRange component does not support this option.

dependsOn

(string)

Specifies whether this facet only appears when a value is selected in its "parent" facet. To specify the parent facet, use its id.

Remember that by default, a facet id value is the same as its field option value.

Examples:

First case: the "parent" facet has no custom id:

<!-- "Parent" Facet: -->
<div class='CoveoFacet' data-field='@myfield' data-title='My Parent Facet'></div>
<!-- The "dependent" Facet must refer to the default `id` of its "parent" Facet, which is the name of its field. -->
<div class='CoveoFacet' data-field='@myotherfield' data-title='My Dependent Facet' data-depends-on='@myfield'></div>

Second case: the "parent" facet has a custom id:

<!-- "Parent" Facet: -->
<div class='CoveoFacet' data-field='@myfield' data-title='My Parent Facet' data-id='myParentCustomId'></div>
<!-- The "dependent" Facet must refer to the custom `id` of its "parent" Facet, which is 'myParentCustomId'. -->
<div class='CoveoFacet' data-field='@myotherfield data-title='My Dependent Facet' data-depends-on='myParentCustomId'></div>

Default value is undefined

dropdownHeaderLabel

(string)

If the enableResponsiveMode option is true for all facets and FacetSlider.options.enableResponsiveMode is also true for all sliders, specifies the label of the dropdown button that allows to display the facets when in responsive mode. If more than one Facet or FacetSlider component in the search interface specifies a value for this option, the framework uses the first occurrence of the option.

Default value is Filters.

enableCollapse

(boolean)

If the enableSettings option is true, specifies whether the Collapse \ Expand menu option is available in the facet Settings menu.

The FacetRange component does not support this option.

Default value is true.

enableFacetSearch

(boolean)

Specifies whether to display a search box at the bottom of the facet for searching among the available facet field values. See also the facetSearchDelay, facetSearchIgnoreAccents, and numberOfValuesInFacetSearch options.

The FacetRange component does not support this option.

Default value is true.

enableMoreLess

(boolean)

Specifies whether to enable the More and Less buttons in the Facet. See also the pageSize option.

The FacetRange component does not support this option.

Default value is true.

enableResponsiveMode

(boolean)

Specifies whether to enable responsive mode for facets. Setting this options to false on any Facet, or FacetSlider component in a search interface disables responsive mode for all other facets in the search interface. Responsive mode displays all facets under a single dropdown button whenever the width of the HTML element which the search interface is bound to reaches or falls behind a certain threshold (see SearchInterface.responsiveComponents).

See also the dropdownHeaderLabel option.

Default value is true.

enableSettings

(boolean)

Specifies whether to display the facet Settings menu. See also the enableSettingsFacetState, availableSorts, and enableCollapse options.

The FacetRange component does not support this option.

Default value is true.

enableSettingsFacetState

(boolean)

If the enableSettings option is true, specifies whether the Save state menu option is available in the facet Settings menu.

The FacetRange component does not support this option.

Default value is false.

enableTogglingOperator

(boolean)

Specifies whether to allow the user to toggle between the OR and AND modes in the facet. Setting this option to true displays an icon in the top right corner of the facet. The user can click this icon to toggle between between the two modes.

Default value is false.

facetSearchDelay

(number)

If the enableFacetSearch option is true, specifies the delay (in milliseconds) before sending a search request to the server when the user starts typing in the facet search box. Specifying a smaller value makes results appear faster. However, chances of having to cancel many requests sent to the server increase as the user keeps on typing new characters.

The FacetRange component does not support this option.

Default value is 100. Minimum value is 0.

facetSearchIgnoreAccents

(boolean)

If the enableFacetSearch option is true, specifies whether to ignore accents in the facet search box.

The FacetRange component does not support this option.

Default value is false.

field

(IFieldOption)

Specifies the index field whose values the facet should use. This requires the given field to be configured correctly in the index as a Facet field (see Adding Fields to a Source).

Specifying a value for this option is required for the Facet component to work.

id

(string)

Specifies a unique identifier for the facet. Among other things, this identifier serves the purpose of saving the facet state in the URL hash. If you have two facets with the same field on the same page, you should specify an id value for at least one of those two facets. This id must be unique among the facets.

Default value is the field option value.

includeInBreadcrumb

(boolean)

Specifies whether the facet should push data to the Breadcrumb component. See also the numberOfValuesInBreadcrumb option.

Default value is true.

includeInOmnibox

(boolean)

Specifies whether the Facet should push data to the Omnibox component. See also Facet.options.numberOfValuesInOmnibox.

Default value is false.

injectionDepth

(number)

Specifies the injection depth to use for the GroupByRequest operation. The injection depth determines how many results to scan in the index to ensure that the facet lists all potential facet values. Increasing this value enhances the accuracy of the listed values at the cost of performance.

Default value is 1000. Minimum value is 0.

isMultiValueField

(boolean)

Specifies whether the facet field is configured in the index as a multi-value field (semicolon separated values such as abc;def;ghi). Default value is false.

lookupField

(IFieldOption)

Specifies the field whose values the Facet should display.

numberOfValues

(number)

Specifies the maximum number of field values to display by default in the facet before the user clicks the arrow to show more. See also the enableMoreLess option.

numberOfValuesInBreadcrumb

(number)

If the includeInBreadcrumb option is true, specifies the maximum number of values that the facet should display in the Breadcrumb before outputting a more... button. Default value is 5 on a desktop computer and 3 on a mobile device. Minimum value is 0.

numberOfValuesInFacetSearch

(number)

If the enableFacetSearch option is true, specifies the number of v alues to display in the facet search results popup.

The FacetRange component does not support this option.

Default value is 15. Minimum value is 1.

numberOfValuesInOmnibox

(number)

When Facet.options.includeInOmnibox is true, specifies the number of values to populate the Breadcrumb with. Default value is 5 on desktop computer and 3 on a mobile device. Minimum value is 0.

paddingContainer

(HTMLElement)

Specifies the parent container of the facets. Used by the preservePosition option.

Default value is element.parentElement.

pageSize

(number)

If the enableMoreLess option is true, specifies the number of additional results to fetch when clicking the More button.

The FacetRange component does not support this option.

Default value is 10. Minimum value is 1.

preservePosition

(boolean)

Specifies whether the facet should remain stable in its current position in the viewport while the mouse cursor is over it. Whenever the value selection changes in a facet, the search interface automatically performs a query. This new query might cause other elements in the page to resize themselves (typically, other facets above or below the one the user is interacting with).

This option is responsible for adding the <div class='coveo-topSpace'> and <div class='coveo-bottomSpace'> around the Facet container. The Facet adjusts the scroll amount of the page to ensure that it does not move relatively to the mouse when the results are updated.

In some cases, the facet also adds margins to the scrollContainer, if scrolling alone is not enough to preserve position.

See also the paddingContainer, and scrollContainer options.

Default value is true.

scrollContainer

(HTMLElement)

Specifies the HTML element (through a CSS selector) whose scroll amount the facet should adjust to preserve its position when results are updated. Used by the preservePosition option.

Default value is document.body.

sortCriteria

(string)

Specifies the criteria to use to sort the facet values. See IGroupByRequest.sortCriteria for the list and description of possible values.

Default value is the first sort criteria specified in the availableSorts option, or occurrences if no sort criteria is specified.

title

(string)

Specifies the title to display at the top of the facet. Default value is the localized string for NoTitle.

useAnd

(boolean)

Specifies whether to use the AND operator in the resulting filter when multiple values are selected in the facet. Setting this option to true means that items must have all of the selected values to match the resulting query.

Default value is false, which means that the filter uses the OR operator. Thus, by default, items must have at least one of the selected values to match the query.

useWildcardsInFacetSearch

(boolean)

Specifies whether wildcards are used as the allowedValuesPatternType in the groupBy for the facet search. Enabling this option returns results that end with the entered value. For example, searching for veo would match with Coveo.

If you are experiencing slow facet search and/or timeouts when this option is set to true, consider enabling the Use cache for nested queries option on your facet field in the Coveo Cloud Admninistration Console (see Add/Edit a Field)">https://onlinehelp.coveo.com/en/cloud/add_edit_fields.htm})</a>.

valueCaption

(IStringMap)

Specifies a JSON object describing a mapping of facet values to their desired captions. See Normalizing Facet Value Captions.

Examples:

You can set the option in the 'init' call:

var myValueCaptions = {
  "txt" : "Text files",
  "html" : "Web page",
  [ ... ]
};
Coveo.init(document.querySelector("#search"), {
  Facet : {
    valueCaption : myValueCaptions
  }
});

Or before the init call, using the 'options' top-level function:

Coveo.options(document.querySelector("#search"), {
  Facet : {
    valueCaption : myValueCaptions
  }
});

Or directly in the markup:

<!-- Ensure that the double quotes are properly handled in data-value-caption. -->
<div class='CoveoFacet' data-field='@myotherfield' data-value-caption='{"txt":"Text files","html":"Web page"}'></div>

Using value captions will disable alphabetical sorts (see the availableSorts option).

HierarchicaldelimitingCharacter

(string)

The character that allows to specify the hierarchical dependency.

Example:

If your field has the following values:

@field: c; c>folder2; c>folder2>folder3;

The delimiting character is >.

Default value is |.

HierarchicallevelEnd

(number)

Specifies at which level (0-based index) of the hierarchy the HierarchicalFacet should stop displaying its values. Default value is undefined, which means the HierarchicalFacet component renders all hierarchical levels. Minimum value is 0.

HierarchicallevelStart

(number)

Specifies at which level (0-based index) of the hierarchy the HierarchicalFacet should start displaying its values.

Example:

If you have the following files indexed on a file system:

c:\
   folder1\
       text1.txt
   folder2\
     folder3\
       text2.txt

Setting levelStart to 1 displays folder1 and folder2 in the HierarchicalFacet, but omits c:.

Default (and minimum) value is 0.

HierarchicalmarginByLevel

(number)

Specifies the margin (in pixels) to display between each hierarchical level when expanding. Default value is 10.

Timespanfield

(IFieldOption)

Specifies the index field whose values the facet should use. Default value is the field @date

Timespanid

(string)

Specifies a unique identifier for the facet. Among other things, this identifier serves the purpose of saving the facet state in the URL hash. If you have two facets with the same field on the same page, you should specify an id value for at least one of those two facets. This id must be unique in the page.

Default value is the field option value.

Timespantitle

(string)

Specifies the title to display at the top of the facet. Default value is the localized string for Last updated.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

facetSearch

(FacetSearch)

Renders and handles the facet Search part of the component.

facetSettings

(FacetSettings)

Renders and handles the facet Settings part of the component

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Facet component. Binds multiple query events as well.

Hierarchicalbind

(ComponentEvents)

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

HierarchicalcomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

HierarchicalcomponentStateModel

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

Hierarchicaldisabled

(boolean)

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

HierarchicalfacetSearch

(FacetSearch)

Renders and handles the facet Search part of the component.

HierarchicalfacetSettings

(FacetSettings)

Renders and handles the facet Settings part of the component

Hierarchicallogger

(Logger)

Allows component to log in the dev console.

HierarchicalqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

HierarchicalqueryStateModel

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

Hierarchicalroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

HierarchicalsearchInterface

(SearchInterface)

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

HierarchicalusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

HierarchicalID

(string)

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

Hierarchicalconstructor

Creates a new HierarchicalFacet component.

Timespanbind

(ComponentEvents)

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

TimespancomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

TimespancomponentStateModel

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

Timespandisabled

(boolean)

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

Timespanlogger

(Logger)

Allows component to log in the dev console.

TimespanqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

TimespanqueryStateModel

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

Timespanroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

TimespansearchInterface

(SearchInterface)

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

TimespanusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

TimespanID

(string)

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

Timespanfacet

Returns the underlying FacetRange component associated to the Timespan Facet.

Timespanranges

Sets a new range for the component. Returns the current range the facet uses to query the index

Timespanconstructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

FacetRange Component

Component HTML element class: CoveoFacetRange

The FacetRange component displays a Facet whose values are expressed as ranges. These ranges are computed from the results of the current query. This component inherits from the Facet component. This implies that you must specify a valid field value for this component to work.

Most of the options available for a Facet component are also available for a FacetRange component. There are some exceptions, however.

Here is the list of Facet options which the FacetRange component does not support.

Moreover, while the numberOfValues option still allows you to specify the maximum number of values to display in a FacetRange component, it is not possible for the end to display additional values, since the component does not support the More button.

Options

Option

(type)

Description
dateField

(boolean)

Specifies whether the field for which you require ranges is a date field. This allows the component to correctly build the outgoing IGroupByRequest.

Default value is false.

ranges

Specifies an array of IRangeValue to use as Facet values.

Examples:

You can set the option in the 'init' call:

var myRanges = [
  {
     start: 0,
     end: 100,
     label: "0 - 100",
     endInclusive: false
   },
   {
     start: 100,
     end: 200,
     label: "100 - 200",
     endInclusive: false
   },
   {
     start: 200,
     end: 300,
     label: "200 - 300",
     endInclusive: false
   }
]
Coveo.init(document.querySelector('#search'), {
   FacetRange : {
       ranges : myRanges
   }
})

Or directly in the markup:

<!-- Ensure that the double quotes are properly handled in data-ranges. -->
<div class='CoveoFacetRange' data-field='@myotherfield' data-ranges='[{"start": 0, "end": 100, "label": "0 - 100", "endInclusive": false}, {"start": 100, "end": 200, "label": "100 - 200", "endInclusive": false}]'></div>

Ranges can overlap.

By default, the index automatically generates the ranges. However, the index cannot automatically generate the ranges if the field you specify for the FacetRange component is generated by a query function (see Query Function). When this is the case, you must specify the ranges at query time.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

facetSearch

(FacetSearch)

Renders and handles the facet Search part of the component.

facetSettings

(FacetSettings)

Renders and handles the facet Settings part of the component

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FacetRange component.

FacetSlider Component

Component HTML element class: CoveoFacetSlider

The FacetSlider component creates a facet which contains a slider widget that allows the end user to filter results based on a range of numerical values (e.g., a date range, a price range, etc.).

This component does not inherit from the Facet component. Consequently, it does not offer the same configuration options. Moreover, some of the FacetSlider options (see getSteps and valueCaption) cannot be configured as data- attributes in the markup. If you wish to configure those options, you must either do so in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).

Options

Option

(type)

Description
dateField

(boolean)

Specifies whether the field for which you are requesting a range is a date field. This allows the FacetSlider to correctly build the outgoing GroupByRequest and render itself properly. Default value is false.

dateFormat

(string)

Specifies the format to use when displaying date values. See also the dateField option.

Default value is MMM dd, yyyy.

displayAsPercent

(any)

Specifies the percentage caption options to use when displaying the field values. Available options are:

  • enable (data-display-as-percent-enable): boolean; specifies whether to display the caption as a percentage. Default value is false. separator (data-display-as-percent-separator): string; specifies the character(s) to use as a separator in the caption. Default value is "-".
displayAsValue

(any)

Specifies the caption options to use when displaying the field values. Available options are:

  • enable (data-display-as-value-enable): boolean; specifies whether to display the caption as a value. Default value is true.
  • unitSign (data-display-as-value-unit-sign): string; specifies the unit sign for this value (e.g., $). Default value is undefined.
  • separator (data-display-as-value-separator): string; specifies the character(s) to use as a separator in the caption. Default value is "-".
dropdownHeaderLabel

(string)

Specifies the label of the button which the end user can click to display the facets when in responsive mode. If this option is configured more than once, the button uses the first occurrence of the option as its label. Default value is "Filters".

enableResponsiveMode

(boolean)

Specifies whether to enable responsive mode for facets. Setting this options to false on any Facet or FacetSlider in a search interface disables responsive mode for all other facets in the search interface. Responsive mode displays all facets under a single dropdown button whenever the width of the HTML element which the search interface is bound to reaches or falls behind a certain threshold (see SearchInterface.responsiveComponents).

See also the FacetSlider dropdownHeaderLabel option.

Default value is true.

end

(string)

Specifies the ending boundary of the slider. Date values are rounded to the nearest year when you set the dateField option to true.

Default value is the highest available field value in the index.

excludeOuterBounds

(boolean)

Specifies whether to exclude the outer bounds of the slider in the generated query when they are not active. Default value is false.

field

(IFieldOption)

Specifies the index field whose values the FacetSlider should use. The field must be configured correctly as a Facet field in the index (see Adding Fields to a Source).

Specifying a value for this option is required for the FacetSlider component to work.

getSteps

Specifies a function to generate the FacetSlider steps (see the steps option). This function receives the FacetSlider boundaries (see the start and end options), and must return an array of numbers (the steps).

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).


var myGetStepsFunction = function(start, end) {
  var result = [];
  for (i = start; i < end; i += 2) {
    result.push(i);
  }
  return result;
}
// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
   FacetSlider: {
     getSteps: myGetStepsFunction
   }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector("#search"), {
//   FacetSlider : {
//     valueCaption : myGetStepsFunction
//   }
// });
graph

(any)

Specifies whether to display a small graph on top of the slider. Available options are:

  • steps (data-graph-steps): number; specifies the number of steps/columns to display in your graph. Default value is 10. Minimum value is 2.
id

(string)

Specifies a unique identifier for the FacetSlider. Among other things, this identifier serves the purpose of saving the facet state in the URL hash. If you have two facets with the same field in the same page, you should specify a unique id value for at least one of those two facets. This id must be unique in the page.

Default value is the field option value.

queryOverride

(string)

Specifies a query to filter automatic minimum and maximum values for the slider range. This is especially useful in the case of date ranges since the index may contain values which are not set, and thus return values from the year 1400 (the earliest date from the boost C++ library).

Example:

The query override in the following markup filters out any @date value anterior to January 1st 2000.

<div class="CoveoFacetSlider" data-field="@date" data-date-field="true" data-query-override="@date>2000/01/01"></div>
rangeSlider

(boolean)

Specifies whether you want a slider with two buttons instead of a slider with a single button. By default, only one button appears in the slider.

rounded

(number)

Specifies the number of decimal places to round the displayed numerical values to. Default (and minimum) value is 0.

start

(string)

Specifies the starting boundary of the slider. Date values are rounded to the nearest year when you set the dateField option to true.

Default value is the lowest available field value in the index.

steps

(number)

Specifies the number of steps to split the slider into. For example, if your range is [ 0 , 100 ] and you specify 10 steps, then the end user can move the slider only to the values [ 0, 10, 20, 30 ... , 100 ].

For performance reasons, the maximum value for this option is 100

Default value is undefined, and the slider allows up to 100 steps. Minimum value is 2.

title

(string)

Specifies the title to display on top of the FacetSlider. Default value is the localized string for NoTitle.

valueCaption

Specifies a function to generate the value caption for the FacetSlider. This function receives the current slider values (number[]), and must return the caption (string).

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).


var myValueCaptionFunction = function(values) {
  return "From " + values[0] + " to " + values[1];
}
// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
  FacetSlider: {
    valueCaption: myValueCaptionFunction
  }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector("#search"), {
//   FacetSlider : {
//     valueCaption : myValueCaptionFunction
//   }
// });

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FacetSlider component. Binds multiple query events as well.

FacetValueSuggestions Component

Component HTML element class: CoveoFacetValueSuggestions

The FieldValueSuggestions component provides query suggestions based on a particular field values. For example, if you use a @category field, this component will provide suggestions for categories that returns results for the given keywords.

The query suggestions provided by this component appear in the Omnibox component.

Options

Option

(type)

Description
displayEstimateNumberOfResults

(boolean)

Specifies whether to display the number of results in each of the suggestions. Default value is false.

Note: The number of results is an estimate.

On a Standalone Search Interface, if you are redirecting on a Search Interface that has different filters, the number of results on the Standalone Search Interface will be inaccurate.

Setting this option has no effect when the templateHelper options is set.

field

(IFieldOption)

Specifies the facet field from which to provide suggestions. Specifying a value for this option is required for the FieldValueSuggestions component to work.

numberOfSuggestions

(number)

Specifies the number of suggestions to render in the Omnibox. Default value is 5. Minimum value is 1.

templateHelper

Specifies the helper function to execute when generating suggestions shown to the end user in the Omnibox. If not specified, a default template will be used.

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).


var suggestionTemplate = function(row, omnibox) {
  return "Searching for " + row.keyword + " in category " + row.value;
};
// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
   FacetValueSuggestions : {
     templateHelper : suggestionTemplate
   }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector("#search"), {
//   FacetValueSuggestions : {
//     templateHelper : suggestionTemplate
//   }
// });
useQuerySuggestions

(boolean)

Specifies whether to use query suggestions as keywords to get facet values suggestions. Default value is true.

Note: This option requires that the enableQuerySuggestAddon is set to true in the Omnibox component.

useValueFromSearchbox

(boolean)

Specifies whether to use the current value from the search box to get facet values suggestions. Default value is true if useQuerySuggestions is disabled, false otherwise.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FieldSuggestions component.

FieldSuggestions Component

Component HTML element class: CoveoFieldSuggestions

The FieldSuggestions component provides query suggestions based on a particular facet field. For example, you could use this component to provide auto-complete suggestions while the end user is typing the title of an item. The query suggestions provided by this component appear in the Omnibox component.

Options

Option

(type)

Description
field

(IFieldOption)

Specifies the facet field from which to provide suggestions. Specifying a value for this option is required for the FieldSuggestions component to work.

headerTitle

(string)

Specifies the title of the result suggestions group in the Omnibox component. If not provided, the component will simply not output any title. Default value is null.

numberOfSuggestions

(number)

Specifies the number of suggestions to render in the Omnibox. Default value is 5. Minimum value is 1.

omniboxZIndex

(number)

Specifies the z-index position at which the suggestions render themselves in the Omnibox. When there are multiple suggestion providers, components with higher omniboxZIndex values render themselves first.

Default value is 51. Minimum value is 0.

onSelect

(ISuggestionForOmniboxOptionsOnSelect)

Specifies the event handler function to execute when the end user selects a suggested value in the Omnibox. By default, the query box text is replaced by what the end user selected and a new query is executed. You can, however, replace this default behavior by providing a callback function to execute when the value is selected.

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).


var myOnSelectFunction = function(selectedValue, populateOmniboxEventArgs) {
  // Close the suggestion list when the user clicks a suggestion.
  populateOmniboxEventArgs.closeOmnibox();
  // Search for matching title results in the default endpoint.
  Coveo.SearchEndpoint.endpoints["default"].search({
    q: "@title=='" + selectedValue + "'"
  }).done(function(results) {
    // If more than one result is found, select a result that matches the selected title.
    var foundResult = Coveo._.find(results.results, function(result) {
      return selectedValue == result.raw.title;
    });
    // Open the found result in the current window, or log an error.
    if (foundResult) {
      window.location = foundResult.clickUri;
    }
    else {
      new Coveo.Logger.warn("Selected suggested result '" + selectedValue + "' not found.");
    }
  });
};
// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
   FieldSuggestions : {
     onSelect : myOnSelectFunction
   }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector("#search"), {
//   FieldSuggestions : {
//     onSelect : myOnSelectFunction
//   }
// });
queryOverride

(string)

Specifies a query override to apply when retrieving suggestions. You can use any valid query expression (see Coveo Query Syntax Reference). Default value is the empty string, and the component applies no query override.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FieldSuggestions component.

FieldTable Component

Component HTML element class: CoveoFieldTable

The FieldTable component displays a set of FieldValue components in a table that can optionally be expandable and minimizable. This component automatically takes care of not displaying empty field values. This component is a result template component (see Result Templates).

// This is the FieldTable component itself, which holds a list of table rows.
// Each row is a FieldValue component.
<table class='CoveoFieldTable'>
   // Items
   <tr data-field='@sysdate' data-caption='Date' data-helper='dateTime' />
   <tr data-field='@sysauthor' data-caption='Author' />
   <tr data-field='@clickuri' data-html-value='true' data-caption='URL' data-helper='anchor' data-helper-options='{text: \"<%= raw.syssource %>\" , target:\"_blank\"}'>
</table>

Options

Option

(type)

Description
allowMinimization

(boolean)

Specifies whether to allow the minimization (collapsing) of the FieldTable. If you set this option to false, the component will not create the Minimize / Expand toggle links.

See also FieldTable.options.expandedTitle, FieldTable.options.minimizedTitle and FieldTable.options.minimizedByDefault.

Default value is true.

expandedTitle

(string)

If FieldTable.options.allowMinimization is true, specifies the caption to show on the Minimize link (the link that appears when the FieldTable is expanded). Default value is "Details".

minimizedByDefault

(boolean)

If FieldTable.options.allowMinimization is true, specifies whether to minimize the table by default. Default value is undefined, and the FieldTable will collapse by default if the result it is associated with has a non-empty excerpt.

minimizedTitle

(string)

If FieldTable.options.allowMinimization is true, specifies the caption to show on the Expand link (the link that appears when the FieldTable is minimized). Default value is "Details".

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FieldTable.

FieldValue Component

Component HTML element class: CoveoFieldValue

The FieldValue component displays the value of a field associated to its parent search result. It is normally usable within a FieldTable. This component is a result template component (see Result Templates).

A common use of this component is to display a specific field value which also happens to be an existing Facet.options.field. When the user clicks on the FieldValue component, it activates the corresponding Facet.

Options

Option

(type)

Description
displaySeparator

(string)

If FieldValue.options.splitValues is true, specifies the string to use when displaying multi-value fields in the UI. The component will insert this string between each value it displays from a multi-value field.

See also FieldValue.options.separator.

Default value is ", ".

facet

(string)

Specifies the Facet component to toggle when the end user clicks the FieldValue. Default value is the value of FieldValue.options.field.

If the target Facet.options.id is is not the same as its Facet.options.field), you must specify this option manually in order to link to the correct Facet.

field

(IFieldOption)

Specifies the field that the FieldValue should display. Specifying a value for this parameter is required in order for the FieldValue component to work.

helper

(string)

Specifies the helper that the FieldValue should use to display its content. While several helpers exist by default (see ICoreHelpers), it is also possible for you to create your own custom helpers (see TemplateHelpers).

helperOptions

(any)

Specifies the options to call on the specified helper.

htmlValue

(boolean)

Specifies whether the content to display is an HTML element. Default value is false.

separator

(string)

If FieldValue.options.splitValues is true, specifies the separator string which separates multi-value fields in the index. See FieldValue.options.displaySeparator.

Default value is ";".

splitValues

(boolean)

Specifies whether to split the FieldValue at each FieldValue.options.separator. This is useful for splitting groups using a Facet.options.field.

When this option is true, the displayed values are split by the FieldValue.options.displaySeparator.

Default value is false.

textCaption

(string)

Specifies a caption to display before the value. Default value is undefined.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FieldValue.

IIndexcomputedFieldResults

The optional computedFieldResults, if requested in the IGroupByRequest

IIndexlookupValue

(string)

The optional lookupValue, if requested in the IGroupByRequest

IIndexnumberOfResults

(number)

The number of results in the index which have this value

IIndexvalue

(string)

The value

Folding Component

Component HTML element class: CoveoFolding

The Folding component makes it possible to render hierarchic representations of search results sharing a common field. This component has no visual impact on its own. It simply folds certain search results so that the ResultFolding and ResultAttachments components can then nicely render them within result templates (see Result Templates).

A typical use case of the Folding component is to fold email conversations and message board threads results in a result set in order to display them in a convenient format. Messages belonging to a single conversation typically have a unique conversation ID. By indexing this ID on a field, you can use it to fold search results (see Folding Results).

There can only be one Folding component per Tab component.

Options

Option

(type)

Description
child

(IFieldOption)

Specifies the field that determines whether a certain result is a child of another top result.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingchild.

childField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.parent option.

enableExpand

(boolean)

Specifies whether to add a callback function on the top result, allowing to make an additional query to load all of its child results (e.g., to load all conversations of a given thread). Concretely, the ResultFolding component uses this for its Show More link.

See also the expandExpression and maximumExpandedResults options.

Default value is true.

expandExpression

(string)

If the enableExpand option is true, specifies a custom constant expression to send when querying the expanded results. Default value is undefined.

field

(IFieldOption)

Specifies the name of the field on which to do the folding. Specifying a value for this option is required for this component to work.

In an Elasticsearch index, the corresponding field must be configured as a Facet field (see Add/Edit a Field: [FieldName] - Panel ). This limitation does not apply to Coveo indexes.

Default value is @foldingcollection.

getMoreResults

Specifies the function that manages the folding of all results. Default value is:

Coveo.Folding.defaultGetMoreResults = function(results) {
   // The results are flat, just do the folding.
   return Coveo.Folding.foldWithParent(results);
}
getResult

Specifies the function that manages the individual folding of each result. Default value is:

var results = result.childResults || [];
// Add the top result at the top of the list.
results.unshift(result);
// Empty childResults just to clean it.
result.childResults = [];
// Fold those results.
results = Coveo.Folding.foldWithParent(results);
// The first result is the top one.
var topResult = results.shift();
// All other results are childResults.
topResult.childResults = results;
return topResult;

You can pre-process all the result with this option in the init call of your search interface:

Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})
maximumExpandedResults

(number)

If the enableExpand option is true, specifies the maximum number of results to load when expanding. Default value is 100. Minimum value is 1.

parent

(IFieldOption)

Specifies the field that determines whether a certain result is a top result containing other child results.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingparent.

parentField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.child option.

range

(number)

Specifies the maximum number of child results to fold.

For an email thread with a total of 20 messages, using the default value of 2 means that the component loads up to a maximum of 2 child messages under the original message, unless the end user expands the entire conversation using the Show More link (see the enableExpand option).

Default value is 2. Minimum value is 0.

rearrange

(SortCriteria)

Specifies the sort criteria to apply to the top result and its child results (e.g., date ascending, @myfield descending, etc.). See Query Parameters - sortCriteria. This option works from the results returned by the index. This means that if only the three most relevant folded results are returned by the index and you choose to rearrange the folded results by date, then the three most relevant results will be rearranged by date, meaning that the first folded result is not necessarily the oldest or newest item.

However, since clicking on the Show More button triggers a new query, you would receive new results based on the sort criteria of this option.

If you are folding email results by conversation and you specify date descending as the rearrange value of the Folding component, the component re-arranges email conversations so that the newest email is always the top result. Specifying date ascending instead always makes the original email the top result, as it is also necessarily the oldest.

By default, the component displays the results in the order that the index returns them.

options

(object)

The options for the component

options.child

(IFieldOption)

Specifies the field that determines whether a certain result is a child of another top result.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingchild.

options.childField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.parent option.

options.enableExpand

(boolean)

Specifies whether to add a callback function on the top result, allowing to make an additional query to load all of its child results (e.g., to load all conversations of a given thread). Concretely, the ResultFolding component uses this for its Show More link.

See also the expandExpression and maximumExpandedResults options.

Default value is true.

options.expandExpression

(string)

If the enableExpand option is true, specifies a custom constant expression to send when querying the expanded results. Default value is undefined.

options.field

(IFieldOption)

Specifies the name of the field on which to do the folding. Specifying a value for this option is required for this component to work.

In an Elasticsearch index, the corresponding field must be configured as a Facet field (see Add/Edit a Field: [FieldName] - Panel ). This limitation does not apply to Coveo indexes.

Default value is @foldingcollection.

options.getMoreResults

Specifies the function that manages the folding of all results. Default value is:

Coveo.Folding.defaultGetMoreResults = function(results) {
   // The results are flat, just do the folding.
   return Coveo.Folding.foldWithParent(results);
}
options.getResult

Specifies the function that manages the individual folding of each result. Default value is:

var results = result.childResults || [];
// Add the top result at the top of the list.
results.unshift(result);
// Empty childResults just to clean it.
result.childResults = [];
// Fold those results.
results = Coveo.Folding.foldWithParent(results);
// The first result is the top one.
var topResult = results.shift();
// All other results are childResults.
topResult.childResults = results;
return topResult;

You can pre-process all the result with this option in the init call of your search interface:

Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})
options.maximumExpandedResults

(number)

If the enableExpand option is true, specifies the maximum number of results to load when expanding. Default value is 100. Minimum value is 1.

options.parent

(IFieldOption)

Specifies the field that determines whether a certain result is a top result containing other child results.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingparent.

options.parentField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.child option.

options.range

(number)

Specifies the maximum number of child results to fold.

For an email thread with a total of 20 messages, using the default value of 2 means that the component loads up to a maximum of 2 child messages under the original message, unless the end user expands the entire conversation using the Show More link (see the enableExpand option).

Default value is 2. Minimum value is 0.

options.rearrange

(SortCriteria)

Specifies the sort criteria to apply to the top result and its child results (e.g., date ascending, @myfield descending, etc.). See Query Parameters - sortCriteria. This option works from the results returned by the index. This means that if only the three most relevant folded results are returned by the index and you choose to rearrange the folded results by date, then the three most relevant results will be rearranged by date, meaning that the first folded result is not necessarily the oldest or newest item.

However, since clicking on the Show More button triggers a new query, you would receive new results based on the sort criteria of this option.

If you are folding email results by conversation and you specify date descending as the rearrange value of the Folding component, the component re-arranges email conversations so that the newest email is always the top result. Specifying date ascending instead always makes the original email the top result, as it is also necessarily the oldest.

By default, the component displays the results in the order that the index returns them.

ResultexpandedCaption

(string)

Specifies the caption to display at the top of the child results when the folding result set is expanded. Default value is undefined, which displays no caption.

ResultlessCaption

(string)

Specifies the caption to display on the link to shrink the loaded folding result set back to only the top result. Default value is the localized string for ShowLess.

ResultmoreCaption

(string)

Specifies the caption to display on the link to expand / show child results. Default value is the localized string for ShowMore.

ResultnormalCaption

(string)

Specifies the caption to display at the top of the child results when the folding result set is not expanded. Default value is undefined, which displays no caption.

ResultoneResultCaption

(string)

Specifies the caption to display when there is only one result in a folding result set. Default value is the localized string for DisplayingTheOnlyMessage

ResultresultTemplate

(Template)

Specifies the template to use to render each of the child results for a top result. 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:

<span class="CoveoResultFolding" data-result-template-id="Foo"></span>

Specifying a previously registered template by referring to a CSS selector:

<span class='CoveoResultFolding' data-result-template-selector="#Foo"></span>

If you do not specify a custom folding template, the component uses the default result folding template.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Folding component.

Resultbind

(ComponentEvents)

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

ResultcomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

ResultcomponentStateModel

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

Resultdisabled

(boolean)

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

Resultlogger

(Logger)

Allows component to log in the dev console.

ResultqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

ResultqueryStateModel

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

Resultroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

ResultsearchInterface

(SearchInterface)

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

ResultusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ResultID

(string)

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

Resultconstructor

Creates a new ResultFolding component.

FollowItem Component

Component HTML element class: CoveoFollowItem

The FollowItem component renders a widget that the end user can click to follow a particular item. A user following an item receives email notifications when the item changes.

A SearchAlerts component must be present in the page for this component to work. It is also necessary to meet certain requirements to be able to use this component (see Deploying Search Alerts on a Coveo JS Search Page).

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

Options

Option

(type)

Description
modifiedDateField

(string)

Specifies the ISubscriptionItemRequest.modifiedDateField to use when sending the ISubscriptionItemRequest. Default value is undefined.

watchedFields

Specifies the ISubscriptionItemRequest.watchedFields to use when sending the ISubscriptionItemRequest. Default value is undefined.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FollowItem component.

HiddenQuery Component

Component HTML element class: CoveoHiddenQuery

The HiddenQuery component handles a "hidden" query parameter (hq) and its description (hd). Concretely, this means that if a HiddenQuery component is present in your page and you load your search interface with hq=foo&hd=bar in the URL hash, the component adds foo as an expression to the query (hq is the hidden query) and renders bar in the Breadcrumb (hd is the hidden query description).

Options

Option

(type)

Description
maximumDescriptionLength

(number)

Specifies the maximum number of characters from the hidden query description (hd) to display in the Breadcrumb. Beyond this length, the HiddenQuery component slices the rest of the description and replaces it by ....

Default value is 100. Minimum value is 0.

title

(string)

Specifies the title that should appear in the Breadcrumb when the HiddenQuery populates it. Default value is the localized string f or "Additional filters:"

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new HiddenQuery component, which binds multiple events (QueryEvents.buildingQuery, BreadcrumbEvents.populateBreadcrumb and BreadcrumbEvents.clearBreadcrumb).

Icon Component

Component HTML element class: CoveoIcon

The Icon component outputs the corresponding icon for a given file type. The component searches for a suitable icon from those available in the Coveo JavaScript Search Framework. If the component finds no suitable icon, it instead outputs a generic icon. This component is a result template component (see Result Templates).

Options

Option

(type)

Description
labelValue

(string)

Specifies what text to display as the icon caption/label. Default value is undefined, which means that the Coveo JavaScript Search Framework determines what text the icon needs to display depending on the result file type.

small

(boolean)

Specifies whether the Icon component should output the smaller version of the icon instead of the regular one. Default value is undefined.

value

(string)

Specifies the value that the Icon component should output as its CSS class instead of the auto-selected value. Default value is undefined, which means that the Coveo JavaScript Search Framework outputs a suitable icon depending on the result file type.

withLabel

(boolean)

Specifies whether the Icon component should force the output icon to display its caption/label.

Due to limited screen real estate, setting this option to true has no effect on icons used inside Coveo for Salesforce Insight Panels.

Default value is undefined, which means that the Coveo JavaScript Search Framework determines whether the icon needs to display a caption/label depending on the result file type.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Icon component.

Logo Component

Component HTML element class: CoveoLogo

The Logo component adds a clickable Coveo logo in the search interface.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Logo component.

Matrix Component

Component HTML element class: CoveoMatrix

The Matrix component uses the values of two fields (row and column) to display the results of the specified computed field in a table. The user specifies the values to use for the columns. An IGroupByRequest operation performed at the same time as the main query retrieves the values to use for the rows.

In a way that is similar to the Facet component, selecting a Matrix cell allows the end user to drill down inside the results by restricting the row field and the column field to match the values of the selected cell.

Options

Option

(type)

Description
cellFontSize

(string)

Specifies the font-size to use for displaying text inside the cells. This option is mainly useful to prevent a Matrix containing many columns from cropping some of its values.

However, instead of using this option to solve this kind of issue, you could also remove some of the less important columns from your Matrix or modify the CSS of your page to allow the Matrix to occupy a larger space.

Default value is ''.

columnField

(IFieldOption)

Specifies the field to use for the columns. Specifying a value for this options is required for this component to work.

columnFieldValues

Specifies the field values to use for each column. See also Matrix.options.columnLabels.

Default value is [], which means that the Matrix will not generate any column (except the Total column, if Matrix.options.enableRowTotals is true).

columnHeader

(string)

Specifies the label for the first column on the left as a description of the Matrix.options.columnField. Default value is undefined.

columnLabels

Specifies the label values to use for each column. Default value is []. The array set for this options should match the Matrix.options.columnFieldValues.

computedField

(IFieldOption)

Specifies the field whose computed values you want to display in the cells. Specifying a value for this options is required for this component to work.

computedFieldFormat

(string)

Specifies how to format the values resulting from a Matrix.options.computedFieldOperation. The Globalize library defines all available formats (see Globalize).

The most commonly used formats are:

  • c0 - Formats the value as a currency.
  • n0 - Formats the value as an integer.
  • n2 - Formats the value as a floating point with 2 decimal digits.

Default value is c0.

computedFieldOperation

(string)

Specifies the type of aggregate operation to perform on the Matrix.options.computedField. The possible values are:

  • sum - Computes the sum of the computed field values.
  • average - Computes the average of the computed field values.
  • minimum - Finds the minimum value of the computed field values.
  • maximum - Finds the maximum value of the computed field values.

Default value is sum.

enableColumnTotals

(boolean)

Specifies whether to add a Total row containing the total of each column. Default value is true

enableHoverPreview

(boolean)

Specifies whether to show a preview popup of cell results when hovering over a cell. See also Matrix.options.previewSortCriteria, Matrix.options.previewMaxWidth, Matrix.options.previewMinWidth, Matrix.options.previewDelay and Matrix.options.previewTemplate.

Default value is true.

enableRowTotals

(boolean)

Specifies whether to display a Total column containing the sum of each row. Default value is true.

maximumNumberOfRows

(number)

Specifies the maximum number of rows to display in the Matrix. Default value is 10. Minimum value is 0.

maximumNumberOfValuesInGroupBy

(number)

Specifies the maximum number of results to include in the IGroupByRequest for the columns. This value should always be greater than the Matrix.options.maximumNumberOfRows. If it is too small, some of the results will not be displayed in the Matrix.

Default value is 100. Minimum value is 0.

previewDelay

(number)

If Matrix.options.enableHoverPreview is true, specifies the delay (in milliseconds) before sending the query to get the preview results. Default value is 500.

previewMaxWidth

(string)

If Matrix.options.enableHoverPreview is true, specifies the maximum width (in pixels) of the preview popup. Default value is 500px.

previewMinWidth

(string)

If Matrix.options.enableHoverPreview is true, specifies the minimum width (in pixels) of the preview popup. Default value is 0.

previewSortCriteria

(string)

If Matrix.options.enableHoverPreview is true, specifies the criteria to use for sorting the results of the hover preview. The available sort criteria values are the same as those of the IQuery.

The possible values are:

  • relevancy: Uses all configured ranking weights and any specified ranking expressions to sort the results.
  • dateascending / datedescending: Sorts the results using the @date field value, which is typically the last modification date of an item in the index.
  • qre: Sorts the results using only the weights applied by ranking expressions. Using qre is much like using relevancy, except that qre does not compute automatic weights, such as weights based on keyword proximity.
  • nosort: Does not sort the results. Using nosort returns the items in an essentially random order.
  • fieldascending / fielddescending: Sorts the results using the value of a custom field.
  • fieldascending / fielddescending: Sorts the results using the value of a custom field.

See also Matrix.options.previewSortField.

Default value is FieldDescending.

previewSortField

(IFieldOption)

If Matrix.options.previewSortCriteria is fieldascending or fielddescending, specifies the field to use for sorting the results of the hover preview. Default value is the value of Matrix.options.computedField.

previewTemplate

(Template)

If Matrix.options.enableHoverPreview is true, specifies the template ID or CSS selector of the template to use to render the results of the hover preview. You must use either data-template-id or data-template-selector in the markup to specify a value for this option.

Examples:

Specifying what template to use by referring to its template ID:

<div class='CoveoMatrix' data-template-id='TemplateId'></div>

Specifying what template to use by referring to its CSS selector:

<div class='CoveoMatrix' data-template-selector='.templateSelector'></div>
rowField

(IFieldOption)

Specifies the field to use for the rows. Specifying a value for this options is required for this component to work.

sortCriteria

(string)

Specifies the criteria to use for sorting the rows. See IGroupByRequest.sortCriteria for the list of possible values.

Default value is ComputedFieldDescending.

title

(string)

Specifies the text to display at the top of the Matrix.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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.

data

Holds the data for the Matrix.

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.

selectedColumnValue

(any)

The currently selected column value, or undefined if nothing is selected.

selectedRowValue

(string)

The currently selected row value, or undefined if nothing is selected.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Matrix. Also verifies whether options are valid and coherent. Binds query events.

Omnibox Component

Component HTML element class: CoveoOmnibox

The Omnibox component extends the Querybox, and thus provides the same basic options and behaviors. Furthermore, the Omnibox adds a type-ahead capability to the search input. You can configure the type-ahead feature by enabling or disabling certain addons, which the Coveo JavaScript Search Framework provides out-of-the-box (see the enableFieldAddon, enableQueryExtension, and enableQuerySuggestAddon options).

Custom components and external code can also extend or customize the type-ahead feature and the query completion suggestions it provides by attaching their own handlers to the populateOmniboxSuggestions component, which can automatically instantiate an Omnibox along with an optional SearchButton.

Options

Option

(type)

Description
enableFieldAddon

(boolean)

The field addon makes the Omnibox highlight and complete field syntax. Setting this option to true automatically sets the enableQuerySyntax option to true as a side effect.

Suppose you want to search for PDF files. You start typing @f in the search box. The Omnibox provides you with several matching fields. You select the @filetype field. Then, you start typing =p in the input. This time, the Omnibox provides you with several matching values for the @filetype field. You select the pdf suggestion, and submit your search request. Since the enableQuerySyntax option is set to true, the Coveo Search API interprets the basic expression as query syntax and returns the items whose @filetype field matches the pdf value.

Default value is false.

enableQueryExtensionAddon

(boolean)

If Querybox.options.enableQuerySyntax is true, specifies whether to enable the query extension addon. The query extension addon allows the Omnibox to complete the syntax for query extensions.

Default value is false.

enableQuerySuggestAddon

(boolean)

Whether to display Coveo Machine Learning (Coveo ML) query suggestions in the Omnibox. The corresponding Coveo ML model must be properly configured in your Coveo Cloud organization, otherwise this option has no effect (see Managing Machine Learning Query Suggestions in a Query Pipeline).

When you set this option and the enableSearchAsYouType option to true, the query suggestion feature returns the auto-completion of the currently typed keyword as its first query suggestion.

Default value is true.

enableQuerySyntax

(boolean)

Specifies whether the Coveo Platform should try to interpret special query syntax such as field references in the query that the user enters in the Querybox (see Coveo Query Syntax Reference). Setting this option to true also causes the query syntax in the Querybox to highlight.

Default value is false.

enableSearchAsYouType

(boolean)

Whether to automatically trigger a new query whenever the end user types additional text in the search box input. See also the searchAsYouTypeDelay option.

If you set this option and the enableQuerySuggestAddon option to true, the query suggestion feature returns the auto-completion of the currently typed keyword as its first suggestion.

Default value is false.

inline

(boolean)

Specifies whether query completion suggestions appearing in the Omnibox should push the result list and facets down, rather than rendering themselves over them (and partially hiding them). Set this option as well as Omnibox.options.enableSearchAsYouType and Omnibox.options.enableQuerySuggestAddon to true for a cool effect!

Default value is false.

omniboxTimeout

(number)

Specifies a timeout (in milliseconds) before rejecting suggestions in the Omnibox. Default value is 2000. Minimum value is 0.

placeholder

(string)

Specifies a placeholder for the input.

searchAsYouTypeDelay

(number)

If Omnibox.options.enableSearchAsYouType is true, specifies the delay (in milliseconds) before triggering a new query when the end user types in the Omnibox. Default value is 2000. Minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Omnibox component. Also enables necessary addons and binds events on various query events.

OmniboxResultList Component

Component HTML element class: CoveoOmniboxResultList

The OmniboxResultList component behaves exactly like the ResultList component (which it extends), except that it renders itself inside the Omnibox component. This component can provide a kind of search-as-you-type functionality, allowing you to easily render complex Result Templates inside the Omnibox component.

<div class="CoveoOmniboxResultList">
  <script class="result-template" type="text/x-underscore">
    <div>
      <a class='CoveoResultLink'></a>
    </div>
  </script>
</div>

Options

Option

(type)

Description
headerTitle

(string)

Specifies the title to use for this section. Default value is the localized string for Suggested Results.

omniboxZIndex

(number)

Specifies the z-index at which to render the ResultList inside the Omnibox. Default value is 51. Minimum value is 16 (Facet components are at 50 by default)

onSelect

Specifies the function to execute when the user selects a result suggestion. The default function opens the corresponding result URI in the browser.

It is only possible to specify a value for this option in the init call of your search interface. You cannot set it directly as an HTML attribute.

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   OmniboxResultList : {
       //Close the omnibox, change the selected HTMLElement background color and alert the result title.
       onSelect : function(result, resultElement, omniBoxObject) {
           omniBoxObject.close();
           resultElement.css('background-color', 'red');
           alert(result.title);
       }
    }
})
// Or you can call the init script using the jQuery extension:
$("#search").coveo("init", {
   OmniboxResultList : {
       //Close the Omnibox, change the selected HTMLElement background color and alert the result title.
       onSelect : function(result, resultElement, omniBoxObject) {
           omniBoxObject.close();
           resultElement.css('background-color', 'red');
           alert(result.title);
       }
    }
})
queryOverride

(string)

Specifies the override to use on the query sent to the OmniboxResultList component. Default value is undefined, which means no default override is specified.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

elementsToIgnore

Specifies a list a css class that should be ignored when the end user click result in the omnibox Any element that is specified here should normally be able to handle the standard click event.

Any element that does not match this css class and that is clicked will trigger a redirection by the OmniboxResultList.

constructor

Creates a new OmniboxResultList component.

Pager Component

Component HTML element class: CoveoPager

The Pager component attaches itself to a div element and renders widgets that allow the end user to navigate through the different result pages. This component takes care of triggering a query with the correct result range whenever the end user selects a page or uses the navigation buttons (Previous and Next).

Options

Option

(type)

Description
enableNavigationButton

(boolean)

Specifies whether the Previous and Next buttons should appear at each end of the pager when appropriate. The default value is true.

maxNumberOfPages

(number)

Specifies the maximum number of pages to display if enough results are available. This property is typically set when the default number of accessible results from the index has been changed from its default value of 1000 (10 results per page X 100 maxNumberOfPages). Default value is 100

maximumNumberOfResultsFromIndex

(number)

Specifies the maximum number of results that the index can return for any query. Default value is 1000 in a Coveo index.

If this value was modified in your Coveo index, you must specify the new value in this option for the Pager component to work properly

numberOfPages

(number)

Specifies how many page links to display in the pager. Default value is 5 on a desktop computers and 3 on a mobile device. Minimum value is 1.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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.

currentPage

(number)

The current page (1-based index).

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Pager. Binds multiple query events (QueryEvents.newQuery, QueryEvents.buildingQuery, QueryEvents.querySuccess, QueryEvents.queryError and QueryEvents.noResults. Renders itself on every query success.

PipelineContext Component

Component HTML element class: CoveoPipelineContext

A PipelineContext is used to add contextual information about the environment inside which the query is executed. It allows to pass arbitrary key values pairs ( think JSON ), which can then be leveraged by the Query Pipeline, or by Coveo Machine Learning.

This can be any arbitrary information that you can use to contextualize the query and help Coveo improve relevance by returning results tailored to a specific context.

This component is meant to be configured using a script tag, with a JSON content.

The values can be either a string or an array of string.

<script class='CoveoPipelineContext' type='text/context'>
  {
     "foo" : "bar",
     "foobar" : ["foo", "bar"]
  }
</script>

You can also simply use JavaScript code to pass context values, using the QueryBuilder.addContextValue method.

This means you do not necessarily need to use this component to pass context.

Coveo.$$(root).on('buildingQuery', function(args) {
    args.queryBuilder.addContextValue('foo', 'bar');
})

Using this component as opposed to JavaScript code means you will be able to leverage the interface editor.

Regardless of if you use this component or JavaScript to add context, both will add the needed data in the Query.Context parameter.

Note:

This component also ensures that the framework properly determines the context in all corner cases, including when a standalone search box (initSearchbox) is displaying query suggestions.

In most cases, if you do not use this component, the context will not be resolved and leveraged properly in the query pipeline (see What Is a Query Pipeline?).

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

PreferencesPanel Component

Component HTML element class: CoveoPreferencesPanel

The PreferencesPanel component renders a Preferences item inside the Settings component which the end user can click to access a panel from which it is possible to specify certain customization options for the search interface. These customization options are then saved in the browser local storage. This component should be used inside the Settings component.

See also the ResultsFiltersPreferences and ResultsPreferences components.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new PreferencesPanel.

PrintableUri Component

Component HTML element class: CoveoPrintableUri

The PrintableUri component inherits from the ResultLink component and supports all of its options. This component displays the URI, or path, to access a result.

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

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new PrintableUri.

PromotedResultsBadge Component

Component HTML element class: CoveoPromotedResultsBadge

The PromotedResultsBadge component adds a badge to promoted results in your interface. To be considered promoted, a result needs to either:

You can add this component anywhere in your search interface. The component will then add a badge to your results after they have been rendered.

Options

Option

(type)

Description
captionForFeatured

(string)

Specifies the caption that should be used for "Featured Results". Default value is the localized string for Featured.

captionForRecommended

(string)

Specifies the caption that should be used for "Recommended Results". Default value is the localized string for Recommended.

colorForFeaturedResults

(string)

Specifies the color that should be used for "Featured Results". This can be specified using:

  • a hexadecimal value (e.g., #f58020)
  • an RGB value (e.g., rgb(125,10,36))
  • a CSS color name (e.g., red)

Default value is undefined, and is controlled through the default stylesheet of the framework.

colorForRecommendedResults

(string)

Specifies the color that should be used for "Recommended Results". This can be specified using:

  • a hexadecimal value (e.g., #f58020)
  • an RGB value (e.g., rgb(125,10,36))
  • a CSS color name (e.g., red)

Default value is undefined, and is controlled through the default stylesheet of the framework.

showBadgeForFeaturedResults

(boolean)

Specifies if a badge should be added to "Featured Results" configured through a Coveo Query Pipeline. Default value is true.

showBadgeForRecommendedResults

(boolean)

Specifies if a badge should be added to "Recommended Results" returned by a Coveo Machine Learning algorithm. Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

QueryDuration Component

Component HTML element class: CoveoQueryDuration

The QueryDuration component displays the duration of the last query execution. When a QueryEvents.querySuccess event is triggered, the QueryDuration component becomes visible. It also displays the global duration, the index duration, and the client duration in a single tooltip.

If a QueryEvents.queryError event is triggered, the QueryDuration component becomes hidden.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new QueryDuration component. Binds handlers on the QueryEvents.querySuccess and QueryEvents.queryError events.

QuerySummary Component

Component HTML element class: CoveoQuerySummary

The QuerySummary component can display information about the currently displayed range of results (e.g., "Results 1-10 of 123"). If the query matches no item, the QuerySummary component can instead display tips to help the end user formulate a better query.

Options

Option

(type)

Description
enableSearchTips

(boolean)

Specifies whether to display the search tips to the end user when there are no search results. Default value is true.

onlyDisplaySearchTips

(boolean)

Specifies whether to hide the information about the currently displayed range of results and only display the search tips instead. Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new QuerySummary component.

Querybox Component

Component HTML element class: CoveoQuerybox

The Querybox component renders an input which the end user can interact with to enter and submit queries. When the end user submits a search request, the Querybox component triggers a query and logs the corresponding usage analytics data.

For technical reasons, it is necessary to instantiate this component on a div element rather than on an input element.

See also the Searchbox component, which can automatically instantiate a Querybox along with an optional SearchButton component.

Options

Option

(type)

Description
enableLowercaseOperators

(boolean)

If the enableQuerySyntax option is true, specifies whether to interpret the AND, NOT, OR, and NEAR keywords in the Querybox as query operators in the query, even if the end user types those keywords in lowercase. This option applies to all query operators (see Coveo Query Syntax Reference).

If this option and the enableQuerySyntax option are both true, the Coveo Platform interprets the near keyword in a query such as service center near me as the NEAR query operator (not as a query term).

Otherwise, if the enableQuerySyntax option is true and this option is false, the end user has to type the NEAR keyword in uppercase for the Coveo Platform to interpret it as a query operator.

Default value is false.

enablePartialMatch

(boolean)

Whether to convert a basic expression containing at least a certain number of keywords (see the partialMatchKeywords option) to a partial match expression, so that items containing at least a certain number of those keywords (see the partialMatchThreshold option) will match the expression.

  • Only the basic expression of the query (see q) can be converted to a partial match expression.
  • When the enableQuerySyntax option is set to true, this feature has no effect on a basic expression containing query syntax (field expressions, operators, etc.).

With the following markup configuration, if a basic expression contains at least 4 keywords, items containing at least 75% of those keywords (round up) will match the query.

<div class='CoveoQuerybox' data-enable-partial-match='true' data-partial-match-keywords='4' data-partial-match-threshold='75%'></div>

For instance, if the basic expression is Coveo custom component configuration help, items containing all 5 of those keywords, or 4 of them (75% of 5 rounded up) will match the query.

Default value is false, which implies that an item must contain all of the basic expression keywords to match the query.

enableQuerySyntax

(boolean)

Specifies whether to interpret special query syntax (e.g., @objecttype=message) when the end user types a query in the Querybox (see Coveo Query Syntax Reference). Setting this option to true also causes the Querybox to highlight any query syntax. Regardless of the value of this option, the Coveo Cloud REST Search API always interprets expressions surrounded by double quotes (") as exact phrase match requests.

See also enableLowercaseOperators.

  • End user preferences can override the value you specify for this option.

If the end user selects a value other than Automatic for the Enable query syntax setting (see the enableQuerySyntax option of the ResultsPreferences component), the end user preference takes precedence over this option.

  • On-premises versions of the Coveo Search API require this option to be set to true in order to interpret expressions surrounded by double quotes (") as exact phrase match requests.

Default value is false.

enableQuestionMarks

(boolean)

If enableWildcards is true, specifies whether to expand basic expression keywords containing question mark characters (?) to the possible matching keywords in order to broaden the query (see Using Wildcards in Queries).

If you are using an on-premises version of the Coveo Search API, you also need to set the enableQuerySyntax option to true in order to be able to set enableQuestionMarks to true.

Default value is false.

enableSearchAsYouType

(boolean)

Specifies whether to enable the search-as-you-type feature. Default value is false.

enableWildcards

(boolean)

Specifies whether to expand basic expression keywords containing wildcards characters (*) to the possible matching keywords in order to broaden the query (see Using Wildcards in Queries). See also enableQuestionMarks.

Note:

If you are using an on-premises version of the Coveo Search API, you need to set the enableQuerySyntax option to true to be able to set enableWildcards to true.

Default value is false.

partialMatchKeywords

(number)

The minimum number of keywords that need to be present in a basic expression to convert it to a partial match expression. See also the partialMatchThreshold option.

  • This option has no meaning unless the enablePartialMatch option is set to true.
  • Repeated keywords in a basic expression count as a single keyword.
  • Thesaurus expansions in a basic expression count towards the partialMatchKeywords count.
  • Stemming expansions do not count towards the partialMatchKeywords count.

If the partialMatchKeywords value is 7, the basic expression will have to contain at least 7 keywords to be converted to a partial match expression.

Default value is 5.

partialMatchThreshold

(string)

An absolute or relative value indicating the minimum number (rounded up) of partial match expression keywords an item must contain to match the expression. See also the partialMatchKeywords option.

  • This option has no meaning unless the enablePartialMatch option is set to true.
  • A keyword and its stemming expansions count as a single keyword when evaluating whether an item meets the partialMatchThreshold.

If the partialMatchThreshold value is 50% and the partial match expression contains exactly 9 keywords, items will have to contain at least 5 of those keywords to match the query (50% of 9, rounded up).

With the same configuration, if the partial match expression contains exactly 12 keywords, items will have to contain at least 6 of those keywords to match the query (50% of 12).

If the partialMatchThreshold value is 2, items will always have to contain at least 2 of the partial match expression keywords to match the query, no matter how many keywords the partial match expression actually contains.

Default value is 50%.

searchAsYouTypeDelay

(number)

If the enableSearchAsYouType option is true, specifies how long to wait (in milliseconds) between each key press before triggering a new query. Default value is 50. Minimum value is 0

triggerQueryOnClear

(boolean)

Specifies whether to trigger a query when clearing the Querybox. Default value is false.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Querybox component. Creates a new Coveo.Magicbox instance and wraps the Magicbox methods (onblur, onsubmit etc.). Binds event on buildingQuery and before redirection (for standalone box).

Quickview Component

Component HTML element class: 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).
[ ... ]
<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).

Options

Option

(type)

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

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

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

(boolean)

Specifies whether to enable the loading animation. See also [loadingAnimation]{Quickview.options.loadingAnimation}.

Default value is true.

loadingAnimation

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.

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

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.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Quickview component.

QuickviewDocument Component

Component HTML element class: CoveoQuickviewDocument

The QuickviewDocument component normally exists within a Quickview component. The sole purpose of this component is to add an <iframe> which loads the correct HTML version of the current item. The default contentTemplate of the Quickview component includes the QuickviewDocument component.

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

Options

Option

(type)

Description
maximumDocumentSize

(number)

Specifies the maximum preview size that the index should return. Default value is 0, and the index returns the entire preview. Minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new QuickviewDocument component.

Recommendation Component

Component HTML element class: CoveoRecommendation

The Recommendation component is a SearchInterface that displays recommendations typically based on user history. This component usually listens to the main SearchInterface. When the main SearchInterface generates a query, the Recommendation component generates another query to get the recommendations at the same time.

To get history-based recommendations, you will likely want to include the pageview script in your page (see coveo.analytics.js). However, including this script is not mandatory. For instance, you could use the Recommendation component without the Coveo Machine Learning service to create a simple "recommended people" interface.

It is possible to include this component inside another SearchInterface, but it is also possible to instantiate it as a "standalone" search interface, without even instantiating a main SearchInterface component. In any case, a Recommendation component always acts as a full-fledged search interface. Therefore, you can include any component inside the Recommendation component (Searchbox, Facet, Sort, etc.), just as you would inside the main SearchInterface component.

Options

Option

(type)

Description
dropdownHeaderLabel

(string)

If Recommendation.options.enableResponsiveMode is true for all Recommendation components, specifies the label of the dropdown button that allows to display the Recommendation components when in responsive mode. If more than one Recommendation component in the search interface specifies a value for this option, then the framework uses the first occurrence of the option.

Default value is Recommendations.

enableResponsiveMode

(boolean)

Specifies whether to enable responsive mode for Recommendation components. Setting this options to false on any Recommendation component in a search interface disables responsive mode for all other Recommendation components in the search interface. Responsive mode displays all Recommendation components under a single dropdown button whenever the width of the HTML element which the search interface is bound to reaches or falls behind a certain threshold (see Recommendation.options.responsiveBreakpoint).

See also Recommendation.options.dropdownHeaderLabel.

Default value is true.

hideIfNoResults

(boolean)

Specifies whether to hide the Recommendations component if no result or recommendation is available. Default value is true.

id

(string)

Specifies the ID of the interface. The usage analytics use the interface ID to know which recommendation interface was selected. Default value is Recommendation for the first one and Recommendation_{number}, where {number} depends on the number of Recommendation interfaces with default IDs in the page for the others.

mainSearchInterface

(HTMLElement)

Specifies the main SearchInterface to listen to.

optionsToUse

Specifies which options from the main QueryBuilder to use in the triggered query. Possible values are:

  • expression
  • advancedExpression
  • constantExpression
  • disjunctionExpression

Example:

Adding the expression (q) and the advanced expression (aq) parts of the main query in the triggered query:

data-options-to-use="expression,advancedExpression"

Default value is expression.

responsiveBreakpoint

(number)

If Recommendation.options.enableResponsiveMode is true for all Recommendation components, specifies the width threshold (in pixels) of the search interface at which Recommendation components go in responsive mode. Recommendation components go in responsive mode when the width of the search interface is equal to or lower than this value.

The search interface corresponds to the HTML element with the class CoveoSearchInterface.

If more than one Recommendation component in the search interface specifies a value for this option, then the framework uses the last occurrence of the option.

Default value is 1000.

sendActionsHistory

(boolean)

Specifies whether to send the actions history along with the triggered query. Setting this option to false makes it impossible for this component to get Coveo Machine Learning recommendations.

However, setting this option to false can be useful to display side results in a search page.

Default value is true.

userContext

(IStringMap)

Specifies the user context to send to Coveo usage analytics. The component sends this information with the query alongside the user history to get the recommendations.

Properties

Property

(type)

Description
getComponents

Gets all the components of a given type.

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.

responsiveComponents

(ResponsiveComponents)

Allows to get and set the different breakpoints for mobile and tablet devices. This is useful, amongst other, for Facet, Tab and ResultList

ID

(string)

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

constructor

Creates a new Recommendation component.

ResultActionsMenu Component

Component HTML element class: CoveoResultActionsMenu

The ResultActionsMenu component adds a floating result action menu, meant to be used inside result templates (see Result Templates). It is designed to contain other components that can execute actions related to the result, typically the Quickview and AttachToCase components, available in the Coveo for Salesforce and Coveo for Dynamics integrations.

<script type="text/html" class="result-template" [...]
  <div class="coveo-result-frame">
    <div class="CoveoResultActionsMenu">
      <div class="CoveoQuickview"></div>
    </div>
  [...]
</script>

Options

Option

(type)

Description
openOnMouseOver

(boolean)

Specifies whether the menu should open when the user hovers over the result. When set to false, the menu opens only when clicking on the result.

Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

logger

(Logger)

Allows component to log in the dev console.

menuItems

A list containing menu items for this menu.

parentResult

(HTMLElement)

The rendered result that contains this menu.

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultActionsMenu component.

ResultAttachments Component

Component HTML element class: CoveoResultAttachments

The ResultAttachments component renders attachments in a result set, for example when displaying emails. This component is usable inside a result template when there is an active Folding component in the page. This component is a result template component (see Result Templates).

Options

Option

(type)

Description
maximumAttachmentLevel

(number)

Specifies the maximum nesting depth. Beyond this depth, the component stops rendering sub-attachments. Default value is 5. Minimum value is 0.

resultTemplate

(Template)

Specifies the template to use to render each attachment for a top result. You can specify a previously registered template to use either by referring to its HTML id attribute or to a CSS selector (see TemplateCache).

Examples:

Specifying a previously registered template by referring to its HTML id attribute:

<div class="CoveoResultAttachments" data-result-template-id="Foo"></div>

Specifying a previously registered template by referring to a CSS selector:

<div class='CoveoResultAttachments' data-result-template-selector=".Foo"></div>

If you do not specify a custom folding template, the component uses the default result attachment template.

subResultTemplate

(Template)

Specifies the template to use to render sub-attachments, which are attachments within attachments, for example when multiple files are embedded within a .zip attachment. Sub-attachments can themselves contain sub-attachments, and so on up to a certain level (see the maximumAttachmentLevel option).

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="CoveoResultAttachments" data-sub-result-template-id="Foo"></div>

Specifying a previously registered template by referring to a CSS selector:

<div class="CoveoResultAttachments" data-sub-result-template-selector=".Foo"></div>

By default, this option uses the same template you specify for the resultTemplate option.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultAttachments component.

ResultFolding Component

Component HTML element class: CoveoResultFolding

The ResultFolding component renders folded result sets. It is usable inside a result template when there is an active Folding component in the page. This component takes care of rendering the parent result and its child results in a coherent manner. This component is a result template component (see Result Templates).

See Folding Results.

Options

Option

(type)

Description
expandedCaption

(string)

Specifies the caption to display at the top of the child results when the folding result set is expanded. Default value is undefined, which displays no caption.

lessCaption

(string)

Specifies the caption to display on the link to shrink the loaded folding result set back to only the top result. Default value is the localized string for ShowLess.

moreCaption

(string)

Specifies the caption to display on the link to expand / show child results. Default value is the localized string for ShowMore.

normalCaption

(string)

Specifies the caption to display at the top of the child results when the folding result set is not expanded. Default value is undefined, which displays no caption.

oneResultCaption

(string)

Specifies the caption to display when there is only one result in a folding result set. Default value is the localized string for DisplayingTheOnlyMessage

resultTemplate

(Template)

Specifies the template to use to render each of the child results for a top result. 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:

<span class="CoveoResultFolding" data-result-template-id="Foo"></span>

Specifying a previously registered template by referring to a CSS selector:

<span class='CoveoResultFolding' data-result-template-selector="#Foo"></span>

If you do not specify a custom folding template, the component uses the default result folding template.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultFolding component.

ResultLayoutSelector Component

Component HTML element class: CoveoResultLayoutSelector

The ResultLayoutSelector component allows the end user to switch between multiple ResultList components that have different ResultList.options.layout values. This component automatically populates itself with buttons to switch between the ResultList components that have a valid layout value (see the ValidLayout type).

See also the Result Layouts documentation.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultLayoutSelector component.

Component HTML element class: CoveoResultLink

The ResultLink component automatically transform a search result title into a clickable link pointing to the original item. This component is a result template component (see Result Templates).

Option

(type)

Description

(boolean)

Specifies whether the component should open its link in a new window instead of opening it in the current context. If this option is true, clicking the ResultLink calls the openLinkInNewWindow method instead of the openLink method.

If a search page contains a ResultPreferences component whose enableOpenInNewWindow option is true, and the end user checks the Always open results in new window box, ResultLink components in this page will always open their links in a new window when the end user clicks them, no matter what the value of their alwaysOpenInNewWindow option is.

Default value is false.

(IFieldOption)

Specifies the field to use to output the component href attribute value.

Tip:

Instead of specifying a value for the field option, you can directly add an href attribute to the ResultLink HTML element. Then, you can use a custom script to generate the href value.

Examples:

  • With the following markup, the ResultLink outputs its href value using the @uri field (rather than the default field):
<a class="CoveoResultLink" field="@uri"></a>
  • In the following result template, the custom getMyKBUri() function provides the href value:
<script id="KnowledgeArticle" type="text/underscore" class="result-template">
  <div class='CoveoIcon>'></div>
  <a class="CoveoResultLink" href="<%= getMyKBUri(raw) %>"></a>
  <div class="CoveoExcerpt"></div>
</script>

See also hrefTemplate, which can override this option.

By default, the component uses the @clickUri field of the item to output the value of its href attribute.

(string)

Specifies a template literal from which to generate the ResultLink href attribute value (see Template literals). This option overrides the field option value.

The template literal can reference any number of fields from the parent result. It can also reference global scope properties.

Examples:

  • The following markup generates an href value such as http://uri.com?id=itemTitle:
<a class='CoveoResultLink' data-href-template='${clickUri}?id=${raw.title}'></a>
  • The following markup generates an href value such as localhost/fooBar:
<a class='CoveoResultLink' data-href-template='${window.location.hostname}/{Foo.Bar}'></a>

Default value is undefined.

Specifies an event handler function to execute when the user clicks the ResultLink component. The handler function takes a JavaScript Event object and an IQueryResult as its parameters.

Overriding the default behavior of the onClick event can allow you to execute specific code instead.

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).


// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
  ResultLink : {
    onClick : function(e, result) {
      e.preventDefault();
      // Custom code to execute with the item URI and title.
      openUriInASpecialTab(result.clickUri, result.title);
    }
  }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector('#search'), {
//   ResultLink : {
//     onClick : function(e, result) {
//       e.preventDefault();
//       // Custom code to execute with the item URI and title.
//       openUriInASpecialTab(result.clickUri, result.title);
//     }
//   }
// });

(boolean)

Specifies whether the component should try to open its link in Microsoft Outlook. Setting this option to true is normally useful for ResultLink instances related to Microsoft Exchange emails.

If this option is true, clicking the ResultLink calls the openLinkInOutlook method instead of the openLink method.

Default value is false.

(boolean)

Specifies whether the component should open its link in the Quickview component rather than loading through the original URL. Default value is false.

(string)

Specifies a template literal from which to generate the ResultLink display title (see Template literals). This option overrides the default ResultLink display title behavior.

The template literal can reference any number of fields from the parent result. However, if the template literal references a key whose value is undefined in the parent result fields, the ResultLink title displays the name of this key instead.

This option is ignored if the ResultLink innerHTML contains any value.

Examples:

  • The following markup generates a ResultLink display title such as Case number: 123456 if both the raw.objecttype and raw.objectnumber keys are defined in the parent result fields:
<a class="CoveoResultLink" data-title-template="${raw.objecttype} number: ${raw.objectnumber}"></a>
  • The following markup generates ${myField} as a ResultLink display title if the myField key is undefined in the parent result fields:
<a class="CoveoResultLink" data-title-template="${myField}"></a>
  • The following markup generates Foobar as a ResultLink display title, because the ResultLink innterHTML is not empty:
<a class="CoveoResultLink" data-title-template="${will} ${be} ${ignored}">Foobar</a>

Default value is undefined.

Property

(type)

Description

(ComponentEvents)

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

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

(Logger)

Allows component to log in the dev console.

(QueryController)

Contains the singleton that allows to trigger queries.

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

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

(SearchInterface)

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

(IAnalyticsClient)

A reference to the Analytics.client.

(string)

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

Creates a new ResultLink component.

ResultList Component

Component HTML element class: CoveoResultList

The ResultList component is responsible for displaying query results by applying one or several result templates (see Result Templates). It is possible to include multiple ResultList components along with a single ResultLayout component in a search page to provide different result layouts (see Result Layouts).

This component supports infinite scrolling (see the enableInfiniteScroll option).

Options

Option

(type)

Description
OmniboxheaderTitle

(string)

Specifies the title to use for this section. Default value is the localized string for Suggested Results.

OmniboxomniboxZIndex

(number)

Specifies the z-index at which to render the ResultList inside the Omnibox. Default value is 51. Minimum value is 16 (Facet components are at 50 by default)

OmniboxonSelect

Specifies the function to execute when the user selects a result suggestion. The default function opens the corresponding result URI in the browser.

It is only possible to specify a value for this option in the init call of your search interface. You cannot set it directly as an HTML attribute.

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   OmniboxResultList : {
       //Close the omnibox, change the selected HTMLElement background color and alert the result title.
       onSelect : function(result, resultElement, omniBoxObject) {
           omniBoxObject.close();
           resultElement.css('background-color', 'red');
           alert(result.title);
       }
    }
})
// Or you can call the init script using the jQuery extension:
$("#search").coveo("init", {
   OmniboxResultList : {
       //Close the Omnibox, change the selected HTMLElement background color and alert the result title.
       onSelect : function(result, resultElement, omniBoxObject) {
           omniBoxObject.close();
           resultElement.css('background-color', 'red');
           alert(result.title);
       }
    }
})
OmniboxqueryOverride

(string)

Specifies the override to use on the query sent to the OmniboxResultList component. Default value is undefined, which means no default override is specified.

autoSelectFieldsToInclude

(boolean)

Specifies whether the ResultList should scan its result templates to discover which fields it must request to be able to render all results. Setting this option to true ensures that the Coveo Search API does not return fields that are unnecessary for the UI to function.

Default value is false, which means that for each result, the Coveo Search API returns all available fields (unless you specify a list of values in the fieldsToInclude option, in which case the Coveo Search API only returns those fields, if they are available).

  • Many interfaces created with the JavaScript Search Interface Editor explicitly set this option to true.
  • You cannot set this option to true in the Coveo for Sitecore integration.
enableInfiniteScroll

(boolean)

Specifies whether to automatically retrieve an additional page of results and append it to the results that the ResultList is currently displaying when the user scrolls down to the bottom of the infiniteScrollContainer. See also the infiniteScrollPageSize and enableInfiniteScrollWaitingAnimation options.

It is important to specify the infiniteScrollContainer option manually if you want the scrolling element to be something else than the default window element. Otherwise, you might find yourself in a strange state where the framework rapidly triggers multiple successive query.

Default value is false.

enableInfiniteScrollWaitingAnimation

(boolean)

If the enableInfiniteScroll option is true, specifies whether to display the waitingAnimation while fetching additional results. Default value is true.

fieldsToInclude

Specifies a list of fields to include in the query results. If you set the autoSelectFieldsToInclude option to true, the Coveo Search API returns the fields you specify for this option (if those fields are available) in addition to the fields which the ResultList automatically requests.

Otherwise, the Coveo Search API only returns the fields you specify for this option (if those fields are available), unless you leave this option undefined, in which case the Coveo Search API returns all available fields.

infiniteScrollContainer

(HTMLElement)

If the enableInfiniteScroll option is true, specifies the element that triggers fetching additional results when the end user scrolls down to its bottom. You can change the container by specifying its selector (e.g., data-infinite-scroll-container-selector='#someCssSelector').

By default, the framework uses the first vertically scrollable parent element it finds, starting from the ResultList element itself. A vertically scrollable element is an element whose CSS overflow-y attribute is scroll.

This implies that if the framework can find no scrollable parent, it uses the window itself as a scrollable container.

This heuristic is not perfect, for technical reasons. There are always some corner case CSS combination which the framework will not be able to correctly detect as 'scrollable'.

It is highly recommended that you manually set this option if you wish something else than the window to be the scrollable element.

infiniteScrollPageSize

(number)

If the enableInfiniteScroll option is true, specifies the number of additional results to fetch when the user scrolls down to the bottom of the infiniteScrollContainer. Default value is 10. Minimum value is 1.

layout

(string)

Specifies the layout to use when displaying results in this ResultList (see Result Layouts). Specifying a value for this option automatically populates a ResultLayout component with a switcher for the layout. For example, if there are two ResultList components in the page, one with its layout set to list and the other with the same option set to card, then the ResultLayout component will render two buttons respectively entitled List and Card.

See the ValidLayout type for the list of possible values.

Default value is list.

resultContainer

(HTMLElement)

Specifies the element inside which to insert the rendered result templates. Performing a new query clears the content of this element.

You can change the container by specifying its selector (e.g., data-result-container-selector='#someCssSelector').

If you specify no value for this option, a div element will be dynamically created and appended to the result list. This element will then be used as a result container.

waitAnimation

(string)

Specifies the type of animation to display while waiting for a query to return. The possible values are:

  • fade: Fades out the current list of results while the query is executing.
  • spinner: Shows a spinning animation while the query is executing.
  • none: Use no animation during queries.

See also the waitAnimationContainer option.

Default value is none.

waitAnimationContainer

(HTMLElement)

Specifies the element inside which to display the waitAnimation. You can change this by specifying a CSS selector (e.g., data-wait-animation-container-selector='#someCssSelector').

Default value is the value of the resultContainer option.

Properties

Property

(type)

Description
Omniboxbind

(ComponentEvents)

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

OmniboxcomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

OmniboxcomponentStateModel

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

Omniboxdisabled

(boolean)

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

Omniboxlogger

(Logger)

Allows component to log in the dev console.

OmniboxqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

OmniboxqueryStateModel

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

Omniboxroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

OmniboxsearchInterface

(SearchInterface)

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

OmniboxusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

OmniboxID

(string)

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

OmniboxelementsToIgnore

Specifies a list a css class that should be ignored when the end user click result in the omnibox Any element that is specified here should normally be able to handle the standard click event.

Any element that does not match this css class and that is clicked will trigger a redirection by the OmniboxResultList.

Omniboxconstructor

Creates a new OmniboxResultList component.

bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultList component. Binds various event related to queries (e.g., on querySuccess -> renderResults). Binds scroll event if the enableInfiniteScroll option is true.

ResultRating Component

Component HTML element class: CoveoResultRating

The ResultRating component renders a 5-star rating widget. Interactive rating is possible if the enableCollaborativeRating option of your search interface is true, and if collaborative rating is enabled on your Coveo index. This component is a result template component (see Result Templates).

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultRating component.

ResultTagging Component

Component HTML element class: CoveoResultTagging

The ResultTagging component lists the current tag field values of its associated result and renders a control that allows the end user to add values to a tag field. This component is a result template component (see Result Templates).

The ResultTagging component is not supported with Coveo Cloud V2. To implement the ResultTagging component in Coveo Cloud V1, contact Coveo Support.

Options

Option

(type)

Description
autoCompleteTimer

(number)

Specifies how much time (in milliseconds) it takes for the list of suggested items to disappear when it loses focus. Default value is 2000. Minimum value is 0.

field

(IFieldOption)

Specifies the tag field that the component will use. Specifying a value for this options is necessary for this component to work.

suggestBoxSize

(number)

Specifies the number of items to show in the list of suggested items. Default value is 5. Minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultTagging component.

ResultsFiltersPreferences Component

Component HTML element class: CoveoResultsFiltersPreferences

The ResultFiltersPreferences component allows end users to create custom filters to apply to queries. These filters are saved to local storage. Only advanced end users who understand the Coveo query syntax should use this feature (see Coveo Query Syntax Reference).

This component is normally accessible through the Settings menu. Its usual location in the DOM is inside the PreferencesPanel element.

See also the ResultsPreferences component.

Options

Option

(type)

Description
filters

(any)

Specifies the default filters which all end users can apply. End users cannot modify or delete these filters. These filters do not count as "user-made" filters, but rather as "built-in" filters created by the developer of the search page.

You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the init call of your search interface (see Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).

Filters should follow this definition:

filters : { [caption : string] : { expression : string, tab? : string[] } };

Example:

var myFilters = { "Only Google Drive Items" : { expression : "@connectortype == 'GoogleDriveCrawler'", tab : ["Tab1", "Tab2"] },

"Another Filter" : { expression : [ ... another expression ... ] },

[ ... ] };

// You can set the option in the 'init' call:
Coveo.init(document.querySelector("#search"), {
  ResultsFiltersPreferences : {
    filters : myFilters
  }
});
// Or before the 'init' call, using the 'options' top-level function:
// Coveo.options(document.querySelector("#search"), {
//   ResultsFiltersPreferences : {
       filters : myFilters
     }
// });

Default value is undefined.

includeInBreadcrumb

(boolean)

Specifies whether to display the active filter(s) in the Breadcrumb. Default value is true.

showAdvancedFilters

(boolean)

Specifies whether to show the Create button that allows the end user to create filters. If you set this option to false, only the pre-populated filters are available to the end user.

Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultsFiltersPreferences component.

ResultsPerPage Component

Component HTML element class: CoveoResultsPerPage

The ResultsPerPage component attaches itself to a div and allows the end user to choose how many results to display per page. Note: Adding a ResultPerPage component to your page overrides the value of SearchInterface.options.resultsPerPage.

Options

Option

(type)

Description
choicesDisplayed

Specifies the possible values of number of results to display per page that the end user can select from. See also ResultsPerPage.options.initialChoice.

Default value is [10, 25, 50, 100].

initialChoice

(number)

Specifies the value to select by default for the number of results to display per page. Default value is the first value of ResultsPerPage.options.choicesDisplayed.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultsPerPage. The component renders itself on every query success.

ResultsPreferences Component

Component HTML element class: CoveoResultsPreferences

The ResultsPreferences component allows the end user to select preferences related to the search results. These preferences are then saved in the local storage of the end user. This component is normally accessible through the Settings menu. Its usual location in the DOM is inside the PreferencesPanel component.

See also the ResultsFiltersPreferences component.

Options

Option

(type)

Description
enableOpenInNewWindow

(boolean)

Specifies whether to make the option to open results in a new window available. Default value is true

enableOpenInOutlook

(boolean)

Specifies whether to make the option to open results in Microsoft Outlook available. Default value is false

enableQuerySyntax

(boolean)

Specifies whether to make the option to allow end users to turn query syntax on or off available. If query syntax is enabled, the Coveo Platform tries to interpret special query syntax (e.g., @objecttype=message) when the end user types a query in the Querybox (see Coveo Query Syntax Reference). Enabling query syntax also causes the Querybox to highlight any query syntax.

Selecting On for the Enable query syntax setting enables query syntax, whereas selecting Off disables it. Selecting Automatic uses the Querybox enableQuerySyntax option value (which is false by default).

Default value is false

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ResultsPreference component.

SearchAlerts Component

Component HTML element class: CoveoSearchAlerts

The Search Alerts component renders items in the Settings menu that allow the end user to follow queries and to manage search alerts. A user following a query receives email notifications when the query results change.

It is necessary to meet certain requirements to be able to use this component (see Deploying Search Alerts on a Coveo JS Search Page).

See also the FollowItem component.

Options

Option

(type)

Description
enableFollowQuery

(boolean)

Specifies whether to add the Follow Query item in the Settings menu to allow the end user to follow the last query. Clicking the Follow Query item calls the SearchAlerts.followQuery method.

Default value is true.

enableManagePanel

(boolean)

Specifies whether to add the Manage Alerts item in the Settings menu to allow the end user to manage search alerts. Clicking the Manage Alerts item calls the SearchAlerts.openPanel method.

Default value is true.

enableMessage

(boolean)

Specifies whether to display info and error messages when performing search alerts actions. If this options is true, the SearchAlerts constructor will automatically instantiate a SearchAlertsMessage component and set it to the SearchAlerts.message attribute.

See also SearchAlerts.options.messageCloseDelay.

Default value is true.

messageCloseDelay

(number)

If SearchAlerts.options.enableMessage is true, specifies how long to display the search alert messages (in milliseconds). Default value is 2000. Minimum value is 0.

modifiedDateField

(IFieldOption)

Specifies which field to use to represent the modification date when sending the ISubscriptionQueryRequest. Default value is undefined.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

logger

(Logger)

Allows component to log in the dev console.

message

(SearchAlertsMessage)

A reference to a SearchAlertsMessage component that the SearchAlerts component uses to display messages.

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new SearchAlerts component.

SearchAlertsMessage Component

Component HTML element class: CoveoSearchAlertsMessage

The SearchAlertsMessage component allows the SearchAlerts component to display messages. You should not include this component in your page. Instead, use a SearchAlerts component, and access the SearchAlerts.message attribute.

Options

Option

(type)

Description
closeDelay

(number)

Specifies how long to display the search alerts messages (in milliseconds). Default value is 2000. Minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new SearchAlertsMessage component

SearchButton Component

Component HTML element class: CoveoSearchButton

The SearchButton component renders a search icon that the end user can click to trigger a new query. See also the Searchbox component, which can automatically instantiate a SearchButton component along with a Querybox component or an Omnibox component.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new SearchButton. Binds a click event on the element. Adds a search icon on the element.

SearchInterface Component

Component HTML element class: CoveoSearchInterface

The SearchInterface component is the root and main component of your Coveo search interface. You should place all other Coveo components inside the SearchInterface component. It is also on the HTMLElement of the SearchInterface component that you call the init function.

It is advisable to specify a unique HTML id attribute for the SearchInterface component in order to be able to reference it easily.

<head>
[ ... ]
<script>
  document.addEventListener('DOMContentLoaded', function() {
    [ ... ]
    // The init function is called on the SearchInterface element, in this case, the body of the page.
    Coveo.init(document.body);
    [ ... ]
    });
</script>
[ ... ]
</head>
<!-- Specifying a unique HTML id attribute for the SearchInterface component is good practice. -->
<body id='search' class='CoveoSearchInterface' [ ... other options ... ]>
  [ ... ]
  <!-- You should place all other Coveo components here, inside the SearchInterface component. -->
  [ ... ]
</body>

Options

Option

(type)

Description
allowQueriesWithoutKeywords

(boolean)

Specifies if the search interface should perform queries when no keywords are entered by the end user. When this option is set to true, the interface will initially only load with the search box, as long as you have a search box component in your interface.

Once the user submits a query, the full search interface loads to display the results.

When using the Coveo for Salesforce Free edition, this option is automatically set to false, and should not be changed.

This option interacts closely with the SearchInterface.options.autoTriggerQuery option, as the automatic query is not triggered when there are no keywords.

It also modifies the IQuery.allowQueriesWithoutKeywords query parameter.

Default value is true, except in Coveo for Salesforce Free edition in which it is false.

autoTriggerQuery

(boolean)

Specifies whether to trigger the first query automatically when the page finishes loading. Default value is true.

enableAutomaticResponsiveMode

(boolean)

Specifies whether to enable automatic responsive mode (i.e., automatically placing Facet and Tab components in dropdown menus under the search box when the width of the SearchInterface HTML element reaches or falls behind a certain pixel threshold). You might want to set this option to false if automatic responsive mode does not suit the specific design needs of your implementation.

If this option is true, you can also specify whether to enable responsive mode for Facet components (see Facet.options.enableResponsiveMode) and for Tab components (see Tab.options.enableResponsiveMode).

In addition, you can specify the label you wish to display on the dropdown buttons (see Facet.options.dropdownHeaderLabel and Tab.options.dropdownHeaderLabel).

Default value is true.

enableCollaborativeRating

(boolean)

Specifies whether to enable collaborative rating, which you can leverage using the ResultRating component. Setting this option to true has no effect unless collaborative rating is also enabled on your Coveo index.

Default value is false.

enableDebugInfo

(boolean)

Specifies whether to enable the feature that allows the end user to ALT + double click any result to open a debug page with detailed information about all properties and fields for that result. Enabling this feature causes no security concern; the entire debug information is always visible to the end user through the browser developer console or by calling the Coveo API directly.

Default value is true.

enableDuplicateFiltering

(boolean)

Specifies whether to filter duplicates in the search results. Setting this option to true forces duplicates to not appear in search results. However, Facet counts still include the duplicates, which can be confusing for the end user. This is a limitation of the index.

The end user narrows a query down to a single item that has a duplicate. If the enableDuplicateFiltering option is true, then only one item appears in the search results while the Facet count is still 2.

It also is possible to set this option separately for each Tab component (see Tab.options.enableDuplicateFiltering).

Default value is false.

enableHistory

(boolean)

Specifies whether to allow the end user to navigate search history using the Back and Forward buttons of the browser. If this options is true, the SearchInterface component saves the state of the current query in the hash portion of the URL when the user submits the query.

If the enableHistory option is true and the current query is foobar, the SearchInterface component saves q=foobar in the URL hash when the user submits the query.

Default value is false.

excerptLength

(number)

Specifies the number of characters to get at query time to create an excerpt of the result. This setting is global and cannot be modified on a per-result basis.

See also the Excerpt component.

Default value is 200. Minimum value is 0.

expression

(string)

Specifies an expression to add to each query. You might want to use this options to add a global filter to your entire search interface that applies for all tabs.

You should not use this option to address security concerns (it is JavaScript, after all).

It also is possible to set this option separately for each Tab component (see Tab.options.expression).

Default value is ''.

filterField

(IFieldOption)

Specifies the name of a field to use as a custom filter when executing the query (also referred to as "folding"). Setting a value for this option causes the index to return only one result having any particular value inside the filter field. Any other matching result is "folded" inside the childResults member of each JSON query result.

This feature is typically useful with threaded conversations to include only one top-level result per conversation. Thus, the field you specify for this option will typically be value unique to each thread that is shared by all items (e.g., posts, emails, etc) in the thread.

For more advanced features, see the Folding component.

Default value is the empty string ('').

firstLoadingAnimation

(HTMLElement)

Specifies the animation that you wish to display while your interface is loading. You can either specify the CSS selector of an HTML element that matches the default CSS class (coveo-first-loading-animation), or add -selector to the markup attribute of this option to specify the CSS selector of an HTML element that matches any CSS class.

See also the hideUntilFirstQuery option.

Examples:

In this first case, the SearchInterface uses the HTML element whose id attribute is MyAnimation as the loading animation only if the class attribute of this element also matches coveo-first-loading-animation. Default loading animation CSS, which you can customize as you see fit, applies to this HTML element.

<div class='CoveoSearchInterface' data-first-loading-animation='#MyAnimation'>
  <div id='MyAnimation' class='coveo-first-loading-animation'>
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

In this second case, the SearchInterface uses the HTML element whose id attribute is MyAnimation as the loading animation no matter what CSS class it matches. However, if the class attribute of the HTML element does not match coveo-first-loading-animation, no default loading animation CSS applies to this HTML element. Normally, you should only use data-first-loading-animation-selector if you want to completely override the default loading animation CSS.

<div class='CoveoSearchInterface' data-first-loading-animation-selector='#MyAnimation'>
  <div id='MyAnimation' class='my-custom-loading-animation-class'>
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

By default, the loading animation is a Coveo CSS animation (which you can customize with CSS).

hideUntilFirstQuery

(boolean)

Specifies whether to display a loading animation before the first query successfully returns.

If you do not set this options to false, the loading animation will still run until the first query successfully returns even if the autoTriggerQuery option is false.

See also the firstLoadingAnimation option.

Default value is true.

maximumAge

(number)

Specifies the maximum age (in milliseconds) that cached query results can have to still be usable as results instead of performing a new query on the index. The cache is located in the Coveo Search API (which resides between the index and the search interface). If cached results that are older than the age you specify in this option are available, the framework will not use these results; it will rather perform a new query on the index.

On high-volume public web sites, specifying a higher value for this option can greatly improve query response time at the cost of result freshness.

It also is possible to set this option separately for each Tab component (see Tab.options.maximumAge).

Default value is undefined, which means that the search interface lets the Coveo Search API determine the maximum cache age. This is typically equivalent to 30 minutes (see Query Parameters - maximumAge).

pipeline

(string)

Specifies the name of the query pipeline to use for the queries. You can specify a value for this option if your index is in a Coveo Cloud organization in which pipelines have been created (see Managing Query Pipelines).

It also is possible to set this option separately for each Tab component (see Tab.options.pipeline).

Default value is undefined, which means that the search interface uses the default pipeline.

resultsPerPage

(number)

Specifies the number of results to display on each page. For more advanced features, see the ResultsPerPage component.

When the ResultsPerPage component is present in the page, this option gets overridden and is useless.

Default value is 10. Minimum value is 0.

searchPageUri

(string)

Specifies the search page you wish to navigate to when instantiating a standalone search box interface. Default value is undefined, which means that the search interface does not redirect.

timezone

(string)

Specifies the timezone in which the search interface is loaded. This allows the index to recognize some special query syntax. This option must have a valid IANA zone info key (AKA the Olson time zone database) as its value.

Example: America/New_York.

By default, the search interface allows a library to try to detect the timezone automatically.

useLocalStorageForHistory

(boolean)

Specifies whether to save the interface state in the local storage of the browser. You might want to set this option to true for reasons specifically important for your implementation.

Default value is false.

Properties

Property

(type)

Description
getComponents

Gets all the components of a given type.

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.

responsiveComponents

(ResponsiveComponents)

Allows to get and set the different breakpoints for mobile and tablet devices. This is useful, amongst other, for Facet, Tab and ResultList

ID

(string)

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

constructor

Creates a new SearchInterface. Initialize various singletons for the interface (e.g., usage analytics, query controller, state model, etc.). Binds events related to the query.

Searchbox Component

Component HTML element class: CoveoSearchbox

The Searchbox component allows you to conveniently instantiate two components which end users frequently use to enter and submit queries. This component attaches itself to a div element and takes care of instantiating either a Querybox or an Omnibox component (see the enableOmnibox option). Optionally, the Searchbox can also instantiate a SearchButton component, and append it inside the same div (see the addSearchButton option).

Options

Option

(type)

Description
addSearchButton

(boolean)

Specifies whether to instantiate a SearchButton component. Default value is true.

enableOmnibox

(boolean)

Specifies whether to instantiate an Omnibox component. When this option is false, the Searchbox instantiates a Querybox component instead.

You can use configuration options specific to the component you choose to instantiate with the Searchbox.

Examples:

In this first case, the Searchbox instantiates a Querybox component. You can configure this Querybox instance using any of the Querybox component options, such as triggerQueryOnClear.

<div class='CoveoSearchbox' data-trigger-query-on-clear='true'></div>

In this second case, the Searchbox instantiates an Omnibox component. You can configure this Omnibox instance using any of the Omnibox component options, such as placeholder. Moreover, since the Omnibox component inherits all of the Querybox component options, the data-trigger-query-on-clear option from the previous example would also work on this Omnibox instance.

<div class='CoveoSearchbox' data-enable-omnibox='true' data-placeholder='Please enter a query'></div>

Default value is true.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

searchButton

(SearchButton)

The SearchButton component instance.

searchInterface

(SearchInterface)

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

The component instance which allows end users to input queries. Can be either a Querybox or an Omnibox component, depending on the value of enableOmnibox.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Searchbox component. Creates a new Coveo.Magicbox instance and wraps magic box methods (onblur, onsubmit, etc.). Binds event on buildingQuery and on redirection (for standalone box).

Settings Component

Component HTML element class: CoveoSettings

The Settings component renders a Settings button that the end user can click to access a popup menu from which it is possible to perform several contextual actions. The usual location of the Settings button in the page is to the right of the Searchbox. This component can reference several components to populate its popup menu:

Options

Option

(type)

Description
menuDelay

(number)

Specifies the delay (in milliseconds) before hiding the popup menu when the cursor is not hovering over it. Default value is 300. Minimum value is 0.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Settings component.

ShareQuery Component

Component HTML element class: CoveoShareQuery

The ShareQuery component populates the Settings popup menu with the Share Query menu item. When the end user clicks this item, it displays a panel containing two input boxes: one containing a shareable link and the other containing the complete current query expression.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new ShareQuery component.

SimpleFilter Component

Component HTML element class: CoveoSimpleFilter

The SimpleFilter component displays a dropdown menu containing field values which the end user can select to filter the query results. The list of available field values in the dropdown menu can either be static (defined through the values option), or dynamic (automatically obtained through a GroupByRequest operation performed at the same time as the main query).

Options

Option

(type)

Description
field

(IFieldOption)

Specifies the field whose values the SimpleFilter should output result filters from. Specifying a value for this option is required for the SimpleFilter component to work.

maximumNumberOfValues

(number)

Specifies the maximum number of field values to display in the SimpleFilter dropdown menu. Default value is 5. Minimum value is 0.

title

(string)

Specifies the title to display for the SimpleFilter. Default value is the localized string for NoTitle.

valueCaption

(any)

Specifies a JSON object describing a mapping of SimpleFilter values to their desired captions.

Examples:

  • You can set the option in the 'init' call: `javascript var myValueCaptions = { "txt" : "Text files", "html" : "Web page", [ ... ] };

Coveo.init(document.querySelector("#search"), { SimpleFilter : { valueCaption : myValueCaptions } });


* Or before the `init` call, using the ['options']{@link options} top-level function:
```javascript
Coveo.options(document.querySelector("#search"), {
  SimpleFilter : {
    valueCaption : myValueCaptions
  }
});
  • Or directly in the markup:
    <!-- Ensure that the double quotes are properly handled in `data-value-caption`. -->
    <div class='CoveoSimpleFilter' data-field='@myotherfield' data-value-caption='{"txt":"Text files","html":"Web page"}'></div>
    
values

Specifies a static list of field values to display in the SimpleFilter dropdown menu. This option is undefined by default, which means that the component generates a dynamic list of field values by performing a GroupByRequest operation at the same time as the main query.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new SimpleFilter component. Binds multiple query events as well.

Sort Component

Component HTML element class: CoveoSort

The Sort component renders a widget that the end user can interact with to select the criterion to use when sorting query results.

Options

Option

(type)

Description
caption

(string)

The caption to display on this component instance. By default, the component uses the text content of the element it is instanciated on.

sortCriteria

The sort criterion/criteria the end user can select/toggle between when interacting with this component instance. The available sort criteria are:

  • relevancy
  • date ascending/date descending
  • qre
  • @field ascending/@field descending, where you must replace field with the name of a sortable field in your index (e.g., data-sort-criteria="@size ascending").

You can specify a comma separated list of sort criteria to toggle between when interacting with this component instance (e.g., data-sort-criteria="date descending,date ascending").

You can specify multiple sort criteria to be used in the same request by separating them with a semicolon (e.g., data-sort-criteria="@size ascending;date ascending" ).

Interacting with this component instance will cycle through those criteria in the order they are listed in. Typically, you should only specify a list of sort criteria when you want the end user to be able to to toggle the direction of a date or @field sort criteria. Otherwise, you should configure a distinct Sort component instance for each sort criterion you want to make available in your search page.

You must specify a valid value for this option in order for this component instance to work correctly.

Examples:

  • data-sort-criteria="date ascending" createes a Sort component that allows to sort on date ascending, without being able to toggle the order.
  • data-sort-criteria="date ascending, date descending" creates a Sort component that allows end users to toggle between date ascending and date descending on click.
  • data-sort-criteria="@size ascending; date descending" creates a Sort component that only allows end users to sort on @size ascending. The index then applies a second sort on date descending when two items are of equal value.
  • data-sort-criteria="@size ascending; date descending, @size descending; date descending" creates a Sort component that allows end users to toggle between @size ascending and @size descending. For each value, the index applies a second sort on date descending when two items are of equal value.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Sort component instance.

Tab Component

Component HTML element class: CoveoTab

The Tab component renders a widget that allows the end user to select a specific search interface. This component attaches itself to a div element. It is in charge of adding an advanced expression to the outgoing query in order to refine the results.

The Tab component can also hide and show different parts of the UI. For each individual component in the UI, you can specify whether you wish to include or exclude that component when the user selects a certain Tab (see Using Components Only on Specific Tabs).

Setting a New Endpoint for a Tab:

A Tab can use a custom endpoint when performing a query. Of course, you need to make sure that the endpoint exists in the array of Coveo.SearchEndpoint.endpoints (see SearchEndpoint.endpoints).

Coveo.SearchEndpoint.endpoints["specialEndpoint"] = new Coveo.SearchEndpoint({
    restUri : 'https://somewhere.com/rest/search'
})
[ ... ]
<div class='CoveoTab' data-endpoint='specialEndpoint'></div>

Options

Option

(type)

Description
caption

(string)

Specifies the caption of the Tab. Specifying a value for this option is necessary for this component to work.

constant

(boolean)

Specifies whether to include the Tab.options.expression in the constant part of the query. The index specially optimizes the constant part of the query to execute faster. However, you must be careful not to include dynamic query expressions, otherwise the cache will lose its efficiency.

Default value is true.

dropdownHeaderLabel

(string)

Specifies the label of the button that allows to show the hidden tabs when in responsive mode. If more than one Tab in the search interface specifies a value for this option, then the framework uses the first occurrence of the option.

The default value is "More".

enableDuplicateFiltering

(boolean)

Specifies whether to filter duplicates in the search results when the user selects the Tab. Setting this option to true forces duplicates to not appear in the search results. However, Facet counts still include duplicates, which can be confusing for the end user. This is a limitation of the index.

The end user narrows a query down to one item that has a duplicate. If this options is true and the user selects the Tab, only one item appears in the search results while the Facet count is still 2.

It is also possible to enable duplicate filtering for the entire SearchInterface rather than for a single Tab (see SearchInterface.options.enableDuplicateFiltering).

Default value is false.

enableResponsiveMode

(boolean)

Specifies whether to enable responsive mode for tabs. Responsive mode makes overflowing tabs disappear, instead making them available using a dropdown button. Responsive tabs are enabled either when tabs overflow or when the width of the search interface becomes too small. Disabling responsive mode for one Tab also disables it for all tabs. Therefore, you only need to set this option to false on one Tab to disable responsive mode.

Default value is true.

endpoint

(SearchEndpoint)

Specifies the SearchEndpoint to point to when performing queries from within the Tab. By default, the Tab uses the "default" endpoint.

expression

(string)

Specifies an advanced expression or filter that the Tab should add to any outgoing query.

Example:

@objecttype==Message

Default value is undefined and the Tab applies no additional expression or filter to the query.

icon

(string)

Specifies an icon to use for the Tab.

id

(string)

Specifies a unique ID for the Tab. Specifying a value for this option is necessary for this component to work.

layout

(string)

Specifies the default layout to display when the user selects the Tab (see ResultList.options.layout and ResultLayout). See the ValidLayout type for the list of possible values.

If not specified, it will default to 'list'.

See also Result Layouts.

Default value is undefined and the component selects the first available layout.

maximumAge

(number)

Specifies the maximum age (in milliseconds) that cached query results can have to still be usable as results instead of performing a new query on the index from within the Tab. The cache is located in the Coveo Search API (which resides between the index and the search interface). If cached results that are older than the age you specify in this option are available, a new query will be performed on the index anyhow.

On high-volume public web sites, specifying a higher value for this option can greatly improve query response time at the cost of result freshness.

It is also possible to set a maximum cache age for the entire SearchInterface rather than for a single Tab (see SearchInterface.options.maximumAge).

Default value is undefined and the Coveo Search API determines the maximum cache age. This is typically equivalent to 30 minutes (see Query Parameters - maximumAge).

pipeline

(string)

Specifies the name of the query pipeline to use for the queries when the Tab is selected. You can specify a value for this option if your index is in a Coveo Cloud organization in which pipelines have been created (see Managing Query Pipelines).

Default value is undefined, which means that pipeline selection conditions defined in the Coveo Cloud organization apply.

sort

(string)

Specifies the default sort criteria to use when selecting the Tab. A Sort component with the same parameter needs to be present in the search interface in order for this option to function properly.

Examples:

  • data-sort='relevancy'
  • data-sort='date descending'

Default value is undefined and the normal Sort component behavior applies.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Tab. Binds on buildingQuery event as well as an event on click of the element.

TemplateLoader Component

Component HTML element class: CoveoTemplateLoader

The TemplateLoader component can load one result template into another. You should normally declare any reusable result template outside of the ResultList component. Otherwise, the framework will evaluate the data-condition of the reusable result template and possibly render it.

[ ... ]
<!-- A reusable result template. Note that it is important to declare it outside of the ResultList component. -->
<script type='text/underscore' class='result-template' id='ReusableTemplate'>
  <table class='CoveoFieldTable'>
    <tr data-field='@source' data-caption='Source'></tr>
    <tr data-field='@percentScore' data-caption='Score'></tr>
  </table>
</script>
[ ... ]
<div class="CoveoResultList" data-wait-animation="fade" data-auto-select-fields-to-include="true">
  <!-- A custom result template for Lithium messages. -->
  <script type='text/underscore' class='result-template' data-condition='raw.filetype == "lithiummessage"'>
    <div>
      <img class='CoveoIcon' data-small='true'>
      <a class='CoveoResultLink'></a>
      <div class='CoveoTemplateLoader' data-template-id='ReusableTemplate'></div>
    </div>
  </script>
  <!-- A custom result template for images. -->
  <script type='text/underscore' class='result-template' data-condition='raw.filetype == "Image"'>
    <div>
      <img class='CoveoIcon' data-small='true'></img>
        <a class='CoveoResultLink'>
          <img class='CoveoThumbnail'>
        </a>
      <div class='CoveoTemplateLoader' data-template-id='ReusableTemplate'></div>
    </div>
  </script>
</div>
[ ... ]

See Result Templates.

Options

Option

(type)

Description
condition

(string)

Specifies the boolean condition that the result must satisfy in order for the template to load.

Example:

data-condition='percentScore > 80'

template

(Template)

Specifies how to find the template. This can be either a CSS selector or an HTML id attribute.

Examples:

  • With a CSS selector: data-template-selector='.MySelector'
  • With an HTML id: data-template-id='MyId'

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new TemplateLoader.

Text Component

Component HTML element class: CoveoText

The Text component embeds itself in a result template to output a simple text value. The only purpose of this component is to make it possible to easily add different text values to result templates when using the Coveo JavaScript Search Interface Editor (see JavaScript Search Interface Editor).

If you are not designing a search interface using the Coveo JavaScript Search Interface Editor, using this component is unnecessary.

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

Options

Option

(type)

Description
color

(string)

Specifies the color of the text (set as the color CSS property).

marginBottom

(string)

Specifies the bottom margin of the text (set as the margin-bottom CSS property).

marginLeft

(string)

Specifies the left margin of the text (set as the margin-left CSS property).

marginRight

(string)

Specifies the right margin of the text (set as the margin-right CSS property).

marginTop

(string)

Specifies the top margin of the text (set as the margin-top CSS property).

paddingBottom

(string)

Specifies the bottom padding of the text (set as the padding-bottom CSS property).

paddingLeft

(string)

Specifies the left padding of the text (set as the padding-left CSS property).

paddingRight

(string)

Specifies the right padding of the text (set as the padding-right CSS property).

paddingTop

(string)

Specifies the top padding of the text (set as the padding-top CSS property).

size

(string)

Specifies the size of the text (set as the font-size CSS property).

style

(string)

Specifies the style of the text (set as the font-style CSS property).

textAlign

(string)

Specifies the alignment of the text (set as the text-align CSS property).

value

(string)

Specifies the localized string value that the component should render.

weight

(string)

Specifies the weight of the text (set as the font-weight CSS property).

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Text component.

Thumbnail Component

Component HTML element class: CoveoThumbnail

The Thumbnail component automatically fetches the thumbnail of the result object and outputs an HTML img tag with it.

Options

Option

(type)

Description
clickable

(boolean)

Specifies whether to create a clickable ResultLink around the Thumbnail. Default value is false.

If set to true, you can use the options specified on ResultLink.options

noThumbnailClass

(string)

Specifies the CSS class to use on the img tag that the Thumbnail component outputs when a result has no thumbnail in the index. Default value is coveo-no-thumbnail.

YouTubeembed

(boolean)

Specifies whether clicking on the YouTube thumbnail loads the video in a modal box. Setting this option to false causes the browser to change its current location to that of the target URL when the end user clicks the YouTube thumbnail.

Default value is true.

YouTubeheight

(string)

Specifies the height (in pixels) of the YouTube thumbnail. Default value is 112px.

YouTubewidth

(string)

Specifies the width (in pixels) of the YouTube thumbnail. Default value is 200px.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Thumbnail component.

YouTubebind

(ComponentEvents)

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

YouTubecomponentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

YouTubecomponentStateModel

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

YouTubedisabled

(boolean)

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

YouTubelogger

(Logger)

Allows component to log in the dev console.

YouTubequeryController

(QueryController)

Contains the singleton that allows to trigger queries.

YouTubequeryStateModel

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

YouTuberoot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

YouTubesearchInterface

(SearchInterface)

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

YouTubeusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

YouTubeID

(string)

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

YouTubeconstructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

TimespanFacet Component

Component HTML element class: CoveoTimespanFacet

The TimespanFacet component displays a FacetRange with prebuilt ranges. The prebuilt ranges allow you to see the items last updated in the last day, week, month, or year.

This component in a thin wrapper around the standard FacetRange component.

This component is meant to offer out of the box default ranges, so it can easily be inserted in a standard search page.

To configure different ranges than those offered by this component, use the standard FacetRange component instead.

Options

Option

(type)

Description
field

(IFieldOption)

Specifies the index field whose values the facet should use. Default value is the field @date

id

(string)

Specifies a unique identifier for the facet. Among other things, this identifier serves the purpose of saving the facet state in the URL hash. If you have two facets with the same field on the same page, you should specify an id value for at least one of those two facets. This id must be unique in the page.

Default value is the field option value.

title

(string)

Specifies the title to display at the top of the facet. Default value is the localized string for Last updated.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

facet

Returns the underlying FacetRange component associated to the Timespan Facet.

ranges

Sets a new range for the component. Returns the current range the facet uses to query the index

constructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

Triggers Component

Component HTML element class: CoveoTriggers

The Triggers component enables the use of triggers (notify, execute, query, redirect) generated by the Coveo Search API (see Trigger) in the query pipeline (see Managing the Query Pipeline).

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

(boolean)

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

logger

(Logger)

Allows component to log in the dev console.

notifications

The list of notifications returned by the Search API for the current query (via notify triggers). The Triggers component automatically renders this list visually.

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.

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new Triggers component.

YouTubeThumbnail Component

Component HTML element class: CoveoYouTubeThumbnail

The YouTubeThumbnail component automatically fetches the thumbnail of a YouTube video. This component differs from the standard Thumbnail component because the thumbnail it outputs is always clickable.

Depending on the component configuration, clicking a YouTube thumbnail can either automatically open a modal box containing the iframe from YouTube, or open the target URL in the current window (see YouTubeThumbnail.options.embed).

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

Options

Option

(type)

Description
embed

(boolean)

Specifies whether clicking on the YouTube thumbnail loads the video in a modal box. Setting this option to false causes the browser to change its current location to that of the target URL when the end user clicks the YouTube thumbnail.

Default value is true.

height

(string)

Specifies the height (in pixels) of the YouTube thumbnail. Default value is 112px.

width

(string)

Specifies the width (in pixels) of the YouTube thumbnail. Default value is 200px.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

AllowedValuesPatternType Component

Component HTML element class: CoveoAllowedValuesPatternType

The possible values for the allowedValuesPatternType property of the IGroupByRequest interface.

Properties

Property

(type)

Description
EditDistance

Applies the Edit Distance algorithm to match values that are close to the specified pattern.

Legacy

Only supports trailing wildcards in the pattern.

Phonetic

Applies a phonetic algorithm to match values that are phonetically similar to the specified pattern.

Regex

Supports regular expression as the pattern.

Wildcards

Fully supports wildcards.

Classes

AdvancedSearchEvents Class

This static class is there to contains the different string definition for all the events related to the AdvancedSearch component.

Properties

Property

(type)

Description
buildingAdvancedSearch

(string)

Triggered when the AdvancedSearch component is being built. Allows external code to add new sections in the Advanced Search panel.

All bound handlers receive IBuildingAdvancedSearchEventArgs as an argument

AnalyticsEvents Class

The AnalyticsEvents static class contains the string definitions of all events that strongly relate to usage analytics. See Events.

Properties

Property

(type)

Description
changeAnalyticsCustomData

(string)

Triggered whenever an analytics event is about to be logged. This event allows external code to modify the analytics data before it is sent to the Coveo Usage Analytics REST service.

All changeAnalyticsCustomData event handlers receive a ChangeAnalyticsCustomDataEventArgs object as an argument.

documentViewEvent

(string)

Triggered when a click analytics event is logged (e.g., when the end user clicks a ResultLink or Quickview to open a query result item). All documentViewEvent event handlers receive an AnalyticsDocumentViewEventArgs object as an argument.

BaseComponent Class

Every component in the framework ultimately inherits from this base component class.

Properties

Property

(type)

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

ID

(string)

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

This static class is there to contains the different string definition for all the events related to Breadcrumb.

Property

(type)

Description

(string)

Triggered when the user clicks the Clear All button in the breadcrumb. When this event is raised, every filter that is included in the breadcrumb should be removed. This event does not provide custom event data.

(string)

Triggered when the breadcrumb needs to update its content. External code can use this event to provide bits of HTML that should be included in the breadcrumb. All handlers bound to this event will receive a IPopulateBreadcrumbEventArgs as an argument.

CardOverlayEvents Class

The CardOverlayEvents class contains string definitions for all events related to the CardOverlay component.

Properties

Property

(type)

Description
closeCardOverlay

(string)

Closing a CardOverlay component triggers this event (see CardOverlay.closeOverlay).

openCardOverlay

(string)

Opening a CardOverlay component triggers this event (see CardOverlay.openOverlay).

Cell Class

Represent a single cell of data in the Matrix component.

Checkbox Class

A checkbox widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new Checkbox.

Component Class

The base class for every component in the framework.

Properties

Property

(type)

Description
Basedisabled

(boolean)

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

Baselogger

(Logger)

Allows component to log in the dev console.

BaseID

(string)

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

bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component. Attach the component to the SearchInterface.

ComponentEvents Class

The ComponentEvents class is used by the various Coveo Component to trigger events and bind event handlers. It adds logic to execute handlers or triggers only when a component is "enabled", which serves as a way to avoid executing handlers on components that are invisible and inactive in the query. Typically, a component is disabled when it is not active in the current Tab. It can also be disabled by external code, however.

To manually enable or disable a component, simply use its enable or disable method.

Properties

Property

(type)

Description
constructor

Creates a new ComponentEvents instance for a Component.

ComponentOptions Class

The ComponentOptions static class contains methods allowing the Coveo JavaScript Search Framework to initialize component options. Typically, each Component that exposes a set of options contains a static options property.

This property "builds" each option using the ComponentOptions method corresponding to its type (e.g., buildBooleanOption, buildFieldOption, buildStringOption, etc.)

Properties

Property

(type)

Description
Ialias

Specifies an alias, or array of aliases, which can be used instead of the actual option name.

This can be useful to modify an option name without introducing a breaking change.

IattrName

(string)

Specifies a different markup name to use for an option, rather than the standard name (i.e., data- followed by the hyphened name of the option).

This should only be used for backward compatibility reasons.

IdefaultFunction

Specifies a function that should return the value the option must take when no other value is explicitly specified.

IdefaultValue

(T)

Specifies the value the option must take when no other value is explicitly specified.

Idepend

(string)

Specifies the name of a boolean component option which must be true in order for this option to function properly.

This is mostly useful for the Coveo JavaScript Interface Editor.

Ideprecated

(string)

Specifies a message that labels the option as deprecated. This message appears in the console upon initialization if the deprecated option is used in the page. Consequently, this message should explain as clearly as possible why the option is deprecated, and what now replaces it.

Deprecated options do not appear in the Coveo JavaScript Interface Editor.

IpostProcessing

(IComponentOptionsPostProcessing)

Specifies a function that should allow a component option to further modify its own value once all other options of that component have been built.

By default, the id option of the Facet component uses a post processing function to set its value to that of the field option.

Irequired

(boolean)

Specifies whether it is necessary to explicitly specify a value for the option in order for the component to function properly.

The field option of the Facet component is required, since a facet cannot function properly without a field.

Isection

(string)

Specifies a section name inside which the option should appear in the Coveo JavaScript Interface Editor.

Ivalidator

Specifies a function that should indicate whether the option value is valid.

DatePicker Class

A date picker widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new DatePicker.

DateUtils Class

The DateUtils class exposes methods to convert strings, numbers and date objects to standard ISO 8601 Date objects, using the correct culture, language and format. It also offers methods to convert date objects to strings.

DistanceEvents Class

The DistanceEvents static class contains the string definitions of all events related to distance list. See Events.

Properties

Property

(type)

Description
onPositionNotResolved

(string)

Triggered when the DistanceResources component fails to resolve the position.

You should bind a handler to this event if you want to display an error message to the end user, or hide components that cannot be used.

onPositionResolved

(string)

Triggered when the DistanceResources component successfully resolves the position. All onPositionResolved event handlers receive a PositionResolvedEventArgs object as an argument.

onResolvingPosition

(string)

Triggered when the DistanceResources component tries to resolve the position. All onResolvingPosition event handlers receive a ResolvingPositionEventArgs object as an argument.

You should bind a handler to this event if you want to register one or several new position providers.

Dom Class

This is essentially an helper class for dom manipulation.
This is intended to provide some basic functionality normally offered by jQuery.
To minimize the multiple jQuery conflict we have while integrating in various system, we implemented the very small subset that the framework needs.
See $$, which is a function that wraps this class constructor, for less verbose code.

Properties

Property

(type)

Description
constructor

Create a new Dom object with the given HTMLElement

A dropdown widget with standard styling.

Property

(type)

Description

Creates a new Dropdown.

EndpointCaller Class

This class is in charge of calling an endpoint (eg: a SearchEndpoint). This means it's only uses to execute an XMLHttpRequest (for example), massage the response and check if there are errors.

Will execute the call and return a Promise.

Call using one of those options :

  • XMLHttpRequest for recent browser that support CORS, or if the endpoint is on the same origin.
  • XDomainRequest for older IE browser that do not support CORS.
  • Jsonp if all else fails, or is explicitly enabled.

Properties

Property

(type)

Description
useJsonp

(boolean)

Set this property to true to enable Jsonp call to the endpoint.
Be aware that jsonp is "easier" to setup endpoint wise, but has a lot of drawback and limitation for the client code.
Default to false.

constructor

Create a new EndpointCaller.

ExpressionBuilder Class

An ExpressionBuilder that is mostly used by the QueryBuilder.
It is used to build a single query expression.
It allows combining multiple expression parts into a single string and provides utilities to generate common expression parts.

FacetSearch Class

Used by the Facet component to render and handle the facet search part of each facet.

FacetSettings Class

Handle the rendering of the Facet settings menu (typically the ... in the facet header).

FacetValue Class

A class which holds information and operation available on a single facet value returned by a IGroupByRequest.
This class is used extensively in the Facet component.

FoldingForThread Class

The FoldingForThread component inherits from the Folding component. It offers the same configuration options. Folding conversations and threads requires different processing. When you need to fold all child items (including their attachments) on the same level under a common ancestor item, use this component rather than the Folding component.

This component works well with Chatter and Lithium.

There can only be one FoldingForThread component per Tab component.

See Folding Results.

Options

Option

(type)

Description
child

(IFieldOption)

Specifies the field that determines whether a certain result is a child of another top result.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingchild.

childField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.parent option.

enableExpand

(boolean)

Specifies whether to add a callback function on the top result, allowing to make an additional query to load all of its child results (e.g., to load all conversations of a given thread). Concretely, the ResultFolding component uses this for its Show More link.

See also the expandExpression and maximumExpandedResults options.

Default value is true.

expandExpression

(string)

If the enableExpand option is true, specifies a custom constant expression to send when querying the expanded results. Default value is undefined.

field

(IFieldOption)

Specifies the name of the field on which to do the folding. Specifying a value for this option is required for this component to work.

In an Elasticsearch index, the corresponding field must be configured as a Facet field (see Add/Edit a Field: [FieldName] - Panel ). This limitation does not apply to Coveo indexes.

Default value is @foldingcollection.

getMoreResults

Specifies the function that manages the folding of all results. Default value is:

Coveo.Folding.defaultGetMoreResults = function(results) {
   // The results are flat, just do the folding.
   return Coveo.Folding.foldWithParent(results);
}
getResult

Specifies the function that manages the individual folding of each result. Default value is:

var results = result.childResults || [];
// Add the top result at the top of the list.
results.unshift(result);
// Empty childResults just to clean it.
result.childResults = [];
// Fold those results.
results = Coveo.Folding.foldWithParent(results);
// The first result is the top one.
var topResult = results.shift();
// All other results are childResults.
topResult.childResults = results;
return topResult;

You can pre-process all the result with this option in the init call of your search interface:

Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})
maximumExpandedResults

(number)

If the enableExpand option is true, specifies the maximum number of results to load when expanding. Default value is 100. Minimum value is 1.

parent

(IFieldOption)

Specifies the field that determines whether a certain result is a top result containing other child results.

In the index, the values of the corresponding field must:

  • Contain alphanumerical characters only.
  • Contain no more than 60 characters.

Default value is @foldingparent.

parentField

(IFieldOption)

This option is deprecated. Instead, use the Folding.options.child option.

range

(number)

Specifies the maximum number of child results to fold.

For an email thread with a total of 20 messages, using the default value of 2 means that the component loads up to a maximum of 2 child messages under the original message, unless the end user expands the entire conversation using the Show More link (see the enableExpand option).

Default value is 2. Minimum value is 0.

rearrange

(SortCriteria)

Specifies the sort criteria to apply to the top result and its child results (e.g., date ascending, @myfield descending, etc.). See Query Parameters - sortCriteria. This option works from the results returned by the index. This means that if only the three most relevant folded results are returned by the index and you choose to rearrange the folded results by date, then the three most relevant results will be rearranged by date, meaning that the first folded result is not necessarily the oldest or newest item.

However, since clicking on the Show More button triggers a new query, you would receive new results based on the sort criteria of this option.

If you are folding email results by conversation and you specify date descending as the rearrange value of the Folding component, the component re-arranges email conversations so that the newest email is always the top result. Specifying date ascending instead always makes the original email the top result, as it is also necessarily the oldest.

By default, the component displays the results in the order that the index returns them.

Properties

Property

(type)

Description
bind

(ComponentEvents)

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

componentOptionsModel

(ComponentOptionsModel)

Contains the state of options for differents component. Mainly used by ResultLink.

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

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

ID

(string)

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

constructor

Creates a new FoldingForThread component

FormGroup Class

A simple fieldset HTMLElement containing multiple form widgets.

Properties

Property

(type)

Description
constructor

Creates a new FormGroup.

GoogleApiPositionProvider Class

The GoogleApiPositionProvider class uses the [Google Maps Geolocation API]{https://developers.google.com/maps/documentation/geolocation/intro} to provide the position of the end user to a DistanceResources component whose googleApiKey option is set to a valid Google Maps Geolocation API key.

HistoryController Class

This component is instantiated automatically by the framework on the root if the SearchInterface.
When the SearchInterface.options.enableHistory option is set to true, this component is instantiated.
It's only job is to apply changes in the QueryStateModel to the hash in the URL, and vice versa.
This component does not hold the state of the interface, it only represent it in the URL.

Properties

Property

(type)

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

ID

(string)

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

constructor

Create a new HistoryController

LocalStoragedisabled

(boolean)

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

LocalStoragelogger

(Logger)

Allows component to log in the dev console.

LocalStorageID

(string)

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

LocalStorageconstructor

Create a new LocalStorageHistoryController instance

Initialization Class

The main purpose of this class is to initialize the framework (a.k.a the code executed when calling Coveo.init).
It's also in charge or registering the available components, as well as the method that we expost to the global Coveo scope.
For example, the Coveo.executeQuery function will be registed in this class by the QueryController.

InitializationEvents Class

This static class is there to contain the different string definitions for all the events related to initialization. Note that these events will only be triggered when the init function is called.

This means these events are normally called only once when the search interface is initialized.

Properties

Property

(type)

Description
afterComponentsInitialization

(string)

Triggered after the components are initialized (eg: After the constructor of each component is executed) but before their state is set from the hash portion of the URL (e.g., http://mysearchinterface#q=myQuery). This is also before the first query is launched (if the SearchInterface.options.autoTriggerQuery is true).

The string value is afterComponentsInitialization.

afterInitialization

(string)

Triggered right after the UI is fully initialized. Concretely this means that the constructor of each component has been executed, and that the state coming for the URL (e.g., http://mysearchinterface#q=myquery) has been applied.

It is triggered before the first query is launched, and if the SearchInterface.options.autoTriggerQuery is true.

The string value is afterInitialization.

beforeInitialization

(string)

This event is triggered right before each components inside the search interface get initialized (eg: Before the constructor of each component is executed). The string value is beforeInitialization.

nuke

(string)

This is triggered when the UI needs to be dynamically removed so that components can unbind any internal handlers they might have set globally on the window or the document. After this event has been executed, the search interface can be dynamically removed and all handlers can be considered cleanly removed.

The string value is nuke.

restoreHistoryState

(string)

Triggered right before the state from the URL (e.g., http://mysearchinterface#q=myQuery) gets applied in the interface. This will typically only be useful if the SearchInterface.options.enableHistory is set to true.

The string value is restoreHistoryState.

LocalStorageHistoryController Class

This component acts like the HistoryController excepts that is saves the QueryStateModel in the local storage.
This will not allow 'back' and 'forward' navigation in the history, like the standard HistoryController allows. Instead, it load the query state only on page load.
To enable this component, you should set the SearchInterface.options.useLocalStorageForHistory as well as the SearchInterface.options.enableHistory options to true.

Properties

Property

(type)

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

ID

(string)

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

constructor

Create a new LocalStorageHistoryController instance

Model Class

A model is a key-value store that triggers various JavaScript events when any value associated to one of its key changes.
This class is meant to be extended, one of the most important extension being the QueryStateModel class.
Components set values in this key-value store and listen to triggered events in order to update themselves accordingly.

Properties

Property

(type)

Description
attributes

(IStringMap)

The attributes contained in this model.</br> Normally, you should not set attributes directly on this property, as this would prevent required events from being triggered.

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.

ID

(string)

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

eventTypes

(object)

The event types that can be triggered:
ÔÇó preprocess: triggered before a value is set on an attribute. This allows the value to be modified before it is set.
ÔÇó changeOne: triggered when a single value changes.</br> ÔÇó change: triggered when one or many values change.</br> ÔÇó reset: triggered when all attributes are reset to their default values. </br> ÔÇó all: triggered after the change event.</br>

QueryStateattributes

(IStringMap)

The attributes contained in this model.</br> Normally, you should not set attributes directly on this property, as this would prevent required events from being triggered.

QueryStatedisabled

(boolean)

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

QueryStatelogger

(Logger)

Allows component to log in the dev console.

QueryStateID

(string)

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

QueryStateeventTypes

(object)

The event types that can be triggered:
ÔÇó preprocess: triggered before a value is set on an attribute. This allows the value to be modified before it is set.
ÔÇó changeOne: triggered when a single value changes.</br> ÔÇó change: triggered when one or many values change.</br> ÔÇó reset: triggered when all attributes are reset to their default values. </br> ÔÇó all: triggered after the change event.</br>

QueryStateconstructor

Creates a new QueryStateModel instance.

MultiSelect Class

A multi select widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new MultiSelect.

The NavigatorPositionProvider class uses the current web browser to provide the position of the end user to a DistanceResources component whose [useNavigator]{DistanceResources.options.useNavigator} option is set to true.

Recent web browsers typically require a site to be in HTTPS to enable their geolocation service.

NumericSpinner Class

A numeric spinner widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new NumericSpinner.

OmniboxEvents Class

The OmniboxEvents static class contains the string definitions of all events that strongly relate to the Omnibox component.

Properties

Property

(type)

Description
populateOmniboxSuggestions

(string)

Triggered by the Omnibox component before query completion suggestions are rendered. The out-of-the-box Coveo JavaScript Search Framework query completion suggestion addons (see the enableFieldAddon, enableQueryExtensionAddon, and enableQuerySuggestAddon options of the Omnibox) push their respective suggestions in the argument object which is passed along with this event.

All populateOmniboxSuggestions event handlers receive a PopulateOmniboxSuggestionsEventArgs object as an argument.

PublicPathUtils Class

Set of utilities to determine where to load the lazy chunks from. You should add the coveo-script class on the script tag that includes the Coveo framework to make sure the framework can always auto-detect the path to load the lazy chunks from. More details here">https://docs.coveo.com/en/295/javascript-search-framework/lazy-versus-eager-component-loading#fixing-code-chunks-loading-path-issues}</a>

QueryBuilder Class

The QueryBuilder is used to build a IQuery that will be able to be executed using the Search API. The class exposes several members and methods that help components and external code to build up the final query that is sent to the Search API.

Properties

Property

(type)

Description
actionsHistory

(string)

The actions history represents the past actions a user made and is used by the Coveo Machine Learning service to suggest recommendations. It is generated by the page view script (https://github.com/coveo/coveo.analytics.js).

advancedExpression

(ExpressionBuilder)

Used to build the advanced part of the query expression. This part is typically formed of filter expressions generated by components such as facets, external code, etc.

allowQueriesWithoutKeywords

(boolean)

Specifies if the Search API should perform queries even when no keywords were entered by the end user. End user keywords are present in either the IQuery.q or IQuery.lq part of the query.

This parameter is normally controlled by SearchInterface.options.allowEmptyQuery option.

categoryFacets

Specifies an array of request for the CategoryFacet component.

childField

(string)

Specifies the childField when doing parent-child loading (See : Folding).

constantExpression

(ExpressionBuilder)

Used to build the advanced part of the query expression. This part is similar to advancedExpression, but its content is interpreted as a constant expression by the index and it takes advantage of special caching features.

context

The custom context information to send along with the query. Each value should be a string or an array of strings. Custom context information can influence the output of Coveo Machine Learning models and can also be used in query pipeline conditions.

disjunctionExpression

(ExpressionBuilder)

Used to build the disjunctive part of the query expression. When present, this part is evaluated separately from the other expressions and the matching results are merged to those matching expressions, advancedExpression and constantExpression.

The final boolean expression for the query is thus (basic advanced constant) OR (disjunction).

enableCollaborativeRating

(boolean)

Whether the index should take collaborative rating in account when ranking result (see : ResultRating).

enableDebug

(boolean)

Whether to enable debug info on the query. This will return additional information on the resulting JSON response from the Search API.

Mostly: execution report (a detailed breakdown of the parsed and executed query).

enableDidYouMean

(boolean)

Whether to enable query corrections on this query (see DidYouMean).

enableLowercaseOperators

(boolean)

Whether to interpret the AND, NOT, OR, and NEAR keywords in the basic expression as query operators, even if those keywords are in lowercase. Setting this attribute to true has no effect unless enableQuerySyntax is also true.

Normally, the enableLowercaseOperators option of the Querybox component determines the value of this attribute during the initialization of the search page.

enablePartialMatch

(boolean)

Whether to automatically convert the basic expression to a partial match expression if it contains at least a certain number of keywords (see partialMatchKeywords), so that items containing at least a certain subset of those keywords (see partialMatchThreshold) will match the query.

Normally, the enablePartialMatch option of the Querybox component determines the value of this attribute during the initialization of the search page.

enableQuerySyntax

(boolean)

Whether to interpret special query syntax (e.g., @objecttype=message) in the basic expression (see Coveo Query Syntax Reference). See also enableLowercaseOperators.

Normally, the enableQuerySyntax option of the Querybox component determines the value of this attribute during the initialization of the search page. End user preferences can also modify the value of this attribute.

Default value is false

enableQuestionMarks

(boolean)

Whether to interpret question mark characters (?) in the basic expression keywords (see Using Wildcards in Queries. Setting this attribute to true has no effect unless enableWildcards is also true.

Normally, the enableQuestionMarks option of the Querybox component determines the value of this attribute during the initialization of the search page.

enableWildcards

(boolean)

Whether to interpret wildcard characters (*) in the basic expression keywords. Setting this attribute to true enables the wildcards features of the index, effectively expanding keywords containing wildcard characters (*) to the possible matching keywords in order to broaden the query (see Using Wildcards in Queries).

See also enableQuestionMarks.

Normally, the enableWildcards option of the Querybox component determines the value of this attribute during the initialization of the search page.

excerptLength

(number)

Specifies the length (in number of characters) of the excerpts generated by the indexer based on the keywords present in the query. The index includes the top most interesting sentences (in the order they appear in the item) that fit in the specified number of characters.

When not specified, the default value is 200.

expression

(ExpressionBuilder)

Used to build the basic part of the query expression. This part typically consists of user-entered content such as query keywords, etc.

filterField

(string)

Specifies a field on which Folding should be performed. Folding is a kind of duplicate filtering where only the first result with any given value of the field is included in the result set.

It's typically used to return only one result in a conversation, for example when forum posts in a thread are indexed as separate items.

filterFieldRange

(number)

Number of results that should be folded, using the IQuery.filterField.

firstResult

(number)

This is the 0-based index of the first result to return. If not specified, this parameter defaults to 0.

groupByRequests

Specifies an array of Group By operations that can be performed on the query results to extract facets.

longQueryExpression

(ExpressionBuilder)

The contextual text. This is the contextual text part of the query. It uses the Coveo Machine Learning service to pick key keywords from the text and add them to the basic expression. This field is mainly used to pass context such a case description, long textual query or any other form of text that might help in refining the query.

maximumAge

(number)

The maximum age for cached query results, in milliseconds. If results for the exact same request (including user identities) are available in the in-memory cache, they will be used if they are not older than the specified value.

Otherwise, the query will be sent to the index.

numberOfResults

(number)

This is the number of results to return, starting from IQuery.firstResult. If not specified, this parameter defaults to 10.

parentField

(string)

Specifies the parentField when doing parent-child loading (See : Folding).

partialMatchKeywords

(number)

The minimum number of keywords that need to be present in the basic expression to convert it to a partial match expression. The value of this attribute has no meaning unless enablePartialMatch is true.

See also partialMatchThreshold.

Normally, the partialMatchKeywords option of the Querybox component determines the value of this attribute during the initialization of the search page.

partialMatchThreshold

(string)

An absolute or relative (percentage) value indicating the minimum number of partial match expression keywords an item must contain to match the query. The value of this attribute has no meaning unless enablePartialMatch is true.

See also partialMatchKeywords.

Normally, the partialMatchThreshold option of the Querybox component determines the value of this attribute during the initialization of the search page.

pipeline

(string)

Name of the query pipeline to use. Specifies the name of the query pipeline to use for the query. If not specified, the default value is default, which means the default query pipeline will be used.

queryFunctions

Specifies an array of Query Function operation that will be executed on the results.

rankingFunctions

Specifies an array of Ranking Function operations that will be executed on the results.

recommendation

(string)

This is the ID of the recommendation interface that generated the query.

searchHub

(string)

The hub value set from the Analytics component. Used for analytics reporting in the Coveo platform.

sortCriteria

(string)

Specifies the sort criterion(s) to use to sort results. If not specified, this parameter defaults to relevancy. Possible values are :
-- relevancy : This uses all the configured ranking weights as well as any specified ranking expressions to rank results.
-- dateascending / datedescending Sort using the value of the @date field, which is typically the last modification date of an item in the index.
-- qre : Sort using only the weights applied through ranking expressions. This is much like using relevancy except that automatic weights based on keyword proximity etc, are not computed.
-- nosort : Do not sort the results. The order in which items are returned is essentially random.
-- @field ascending / @field descending Sort using the value of a custom field.

tab

(string)

The tab value set from the Tab component.

QueryController Class

This class is automatically instantiated and bound to the root of your search interface when you initialize the framework.
It is essentially a singleton that wraps the access to the SearchEndpoint endpoint to execute query, and is in charge of triggering the different query events.
This is what every component of the framework uses internally to execute query or access the endpoint.
When calling Coveo.executeQuery this class is used.

Properties

Property

(type)

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

ID

(string)

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

constructor

Create a new query controller

QueryEvents Class

This static class is there to contains the different string definition for all the events related to query. Note that these events will only be triggered when the QueryController.executeQuery method is used, either directly or by using executeQuery

Properties

Property

(type)

Description
buildingQuery

(string)

Triggered when the query is being built. This is typically where all components will contribute their part to the IQuery using the QueryBuilder.

All bound handlers will receive IBuildingQueryEventArgs as an argument.

The string value is buildingQuery.

deferredQuerySuccess

(string)

Triggered after the main query success event has finished executing. This is typically where facets will process the IGroupByResult and render themselves.

All bound handlers will receive IQuerySuccessEventArgs as an argument.

The string value is deferredQuerySuccess.

doneBuildingQuery

(string)

Triggered when the query is done being built. This is typically where the facet will add it's IGroupByRequest to the IQuery.

All bound handlers will receive IDoneBuildingQueryEventArgs as an argument.

The string value is doneBuildingQuery.

duringFetchMoreQuery

(string)

Triggered when more results are being fetched on the Search API (think : infinite scrolling, or pager). All bound handlers will receive IDuringQueryEventArgs as an argument.

The string value is duringFetchMoreQuery.

duringQuery

(string)

Triggered when the query is being executed on the Search API. All bound handlers will receive IDuringQueryEventArgs as an argument.

The string value is duringQuery.

fetchMoreSuccess

(string)

Triggered when a more results were successfully returned from the Search API. (think : infinite scrolling, or pager). All bound handlers will receive IFetchMoreSuccessEventArgs as an argument.

The string value is fetchMoreSuccess.

newQuery

(string)

Triggered when a new query is launched. All bound handlers will receive INewQueryEventArgs as an argument.

The string value is newQuery.

noResults

(string)

Triggered when there is no result for a particular query. All bound handlers will receive INoResultsEventArgs as an argument.

The string value is noResults.

preprocessMoreResults

(string)

Triggered before the QueryEvents.fetchMoreSuccess event. This allows external code to modify the results before rendering them.

For example, the Folding component might use this event to construct a coherent parent child relationship between query results.

All bound handlers will receive IPreprocessResultsEventArgs as an argument.

The string value is preprocessMoreResults.

preprocessResults

(string)

Triggered before the QueryEvents.querySuccess event. This allows external code to modify the results before rendering them.

For example, the Folding component might use this event to construct a coherent parent child relationship between query results.

All bound handlers will receive IPreprocessResultsEventArgs as an argument.

The string value is preprocessResults.

queryError

(string)

Triggered when there was an error executing a query on the Search API. All bound handlers will receive IQueryErrorEventArgs as an argument.

The string value is queryError.

querySuccess

(string)

Triggered when a query successfully returns from the Search API. All bound handlers will receive IQuerySuccessEventArgs as an argument.

The string value is querySuccess.

QueryStateModel Class

The QueryStateModel class is a key-value store which contains the current state of the components that can affect the query (see State). This class inherits from the Model class. Optionally, it is possible to persist the state in the query string in order to enable browser history management (see the HistoryController class). Components set values in the QueryStateModel instance to reflect their current state. The QueryStateModel triggers state events (see eventTypes) whenever one of its values is modified. Components listen to triggered state events to update themselves when appropriate.

For instance, when a query is triggered, the Searchbox component sets the q attribute (the basic query expression), while the Pager component sets the first attribute (the index of the first result to display in the result list), and so on.

The user modifies the content of the Searchbox and submits a query. This triggers the following state events:

  • state:change:q (because the value of q has changed).
  • state:change (because at least one value has changed in the QueryStateModel).

Components or external code can attach handlers to those events:

Coveo.$$(document).on('state:change:q', function() {
  [ ... ]
});

Normally, you should interact with the QueryStateModel instance using the Coveo.state top-level function.

Properties

Property

(type)

Description
attributes

(IStringMap)

The attributes contained in this model.</br> Normally, you should not set attributes directly on this property, as this would prevent required events from being triggered.

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.

ID

(string)

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

eventTypes

(object)

The event types that can be triggered:
ÔÇó preprocess: triggered before a value is set on an attribute. This allows the value to be modified before it is set.
ÔÇó changeOne: triggered when a single value changes.</br> ÔÇó change: triggered when one or many values change.</br> ÔÇó reset: triggered when all attributes are reset to their default values. </br> ÔÇó all: triggered after the change event.</br>

constructor

Creates a new QueryStateModel instance.

QuerySummaryEvents Class

This static class is there to contains the different string definition for all the events related to the AdvancedSearch component.

Properties

Property

(type)

Description
cancelLastAction

(string)

Triggered when the last action is being cancelled by the query summary component Allows external code to revert their last action.

QuickviewEvents Class

The QuickviewEvents static class contains the string definitions of all events that strongly relate to the Quickview component.

Properties

Property

(type)

Description
openQuickview

(string)

Triggered by the QuickviewDocument component when the end user has just clicked the Quickview button/link to open the quickview modal window. This event allows external code to modify the terms to highlight before the content of the quickview modal window is rendered.

All openQuickview event handlers receive an OpenQuickviewEventArgs object as an argument.

quickviewLoaded

(string)

Triggered by the QuickviewDocument component when the content to display in the quickview modal window has just finished downloading. The Quickview component listens to this event to know when to remove its loading animation.

All quickviewLoaded event handlers receive a QuickviewLoadedEventArgs object as an argument.

RadioButton Class

A radio button widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new RadioButton.

ResponsiveComponents Class

This class serves as a way to get and set the different screen size breakpoints for the interface. By setting those, you can impact, amongst others, the Facet's, Tab's or the ResultList's behaviour.

For example, the Facet components of your interface will switch to a dropdown menu when the screen size reaches 800px or less.

You could modify this value using this calls

Normally, you would interact with this class using the instance bound to SearchInterface.responsiveComponents

ResultListEvents Class

The ResultListEvents static class contains the string definitions of all events that strongly relate to the result list. See Events.

Properties

Property

(type)

Description
changeLayout

(string)

Triggered by the ResultLayout component whenever the current result layout changes (see Result Layouts). All changeLayout event handlers receive a ChangeLayoutEventArgs object as an argument.

newResultDisplayed

(string)

Triggered each time the result list has just finished rendering a single result. All newResultDisplayed event handlers receive a DisplayedNewResultEventArgs object as an argument.

newResultsDisplayed

(string)

Triggered when the result list has just finished rendering the current page of results.

openQuickview

(string)

Triggered by the ResultLink result template component when its openQuickview option is set to true and the end user clicks the result link. The Quickview component listens to this event to be able to open the quickview modal window in reaction. See also the openQuickview event (which is identical to this one, except that it is triggered by the [QuickviewDocument] result template component instead).

All openQuickview event handlers receive an OpenQuickviewEventArgs object as an argument

SearchEndpoint Class

The SearchEndpoint class allows you to execute various actions against the Coveo Search API and a Coveo index (e.g., searching, listing field values, getting the quickview content of an item, etc.). This class does trigger any query events directly. Consequently, executing an action with this class does not trigger a full query cycle for the Coveo components.

If you wish to have all Coveo components "react" to a query, (and trigger the corresponding query events), use the QueryController class instead.

Properties

Property

(type)

Description
endpoints

Contains a map of all initialized SearchEndpoint instances.

Coveo.SearchEndpoint.endpoints['default'] returns the default endpoint that was created at initialization.

constructor

Creates a new SearchEndpoint instance. Uses a set of adequate default options, and merges these with the options parameter. Also creates an EndpointCaller instance and uses it to communicate with the endpoint internally.

StaticPositionProvider Class

The StaticPositionProvider class provides a static end user position to a DistanceResources component.

TemplateCache Class

Holds a reference to all template available in the framework

TemplateHelpers Class

Allow to register and return template helpers (essentially: Utility functions that can be executed in the context of a template to render complex elements).

TextInput Class

A text input widget with standard styling.

Properties

Property

(type)

Description
constructor

Creates a new TextInput.

Interfaces

IAdvancedSearchSection Interface

Describe a section in the AdvancedSearch component

Properties

Property

(type)

Description
inputs

The array of inputs to populate. External code should only push inputs that match the type BaseFormTypes.

name

(string)

The name of the section.

IAnalyticsActionCause Interface

The IAnalyticsActionCause interface describes the cause of an event for the analytics service. See the Analytics component

Properties

Property

(type)

Description
name

(string)

Specifies the name of the event. While you can actually set this property to any arbitrary string value, its value should uniquely identify the precise action that triggers the event. Thus, each individual event should have its own unique name value. Example: searchBoxSubmit, resultSort, etc.

type

(string)

Specifies the type of the event. While you can actually set this property to any arbitrary string value, it should describe the general category of the event. Thus, more than one event can have the same type value, which makes it possible to group events with identical types when doing reporting. Example: All search box related events could have searchbox as their type value.

IAnalyticsClient Interface

The IAnalyticsClient interface describes an analytics client that can log events to, or return information from the usage analytics service. See also the Analytics component.

IAnalyticsDocumentViewEventArgs Interface

The IAnalyticsDocumentViewEventArgs interface describes the object that all documentViewEvent handlers receive as an argument.

Properties

Property

(type)

Description
documentViewEvent

(IAPIDocumentViewEvent)

The data to send in the request body of the Usage Analytics Write REST API call that logs the click event.

IAnalyticsDocumentViewMeta Interface

The IAnalyticsDocumentViewMeta interface describes the expected metadata when logging a click event / item view. See also the Analytics component, and more specifically its logClickEvent method.

Properties

Property

(type)

Description
author

(string)

The author of the clicked item.

documentTitle

(string)

The title of the clicked item.

documentURL

(string)

The URL of the clicked item.

IAnchorUtilsOptions Interface

Options for building an <a> tag.

Properties

Property

(type)

Description
class

(string)

The CSS class(es) of the tag.

target

(string)

The target (href attribute).

text

(string)

The tag's text content.

IBadgeColors Interface

Badge Colors

IBreadcrumbItem Interface

Represent an item to insert in the breadcrumb

Properties

Property

(type)

Description
element

(HTMLElement)

The HTMLElement to insert in the breadcrumb

IBuildingAdvancedSearchEventArgs Interface

Argument sent to all handlers bound on AdvancedSearchEvents.buildingAdvancedSearch

Properties

Property

(type)

Description
executeQuery

An easy way to execute a new query.

sections

Sections which external code can populate by pushing into this array.

IBuildingQueryEventArgs Interface

Argument sent to all handlers bound on QueryEvents.buildingQuery

Properties

Property

(type)

Description
cancel

(boolean)

If this property is set to true by any handlers, the query will not be executed.

queryBuilder

(QueryBuilder)

Allow handlers to modify the query by using the QueryBuilder

searchAsYouType

(boolean)

Determine if the query is a "search as you type"

IChangeAnalyticsCustomDataEventArgs Interface

The IChangeAnalyticsCustomDataEventArgs interface describes the object that all changeAnalyticsCustomData event handlers receive as an argument. This interface extends the IChangeableAnalyticsDataObject interface.

  • External code can only modify the attributes described by the IChangeableAnalyticsDataObject interface.
  • When the analytics event being logged is a ClickEvent, the ChangeAnalyticsCustomDataEventArgs object also contains a resultData attribute, which describes the QueryResult that was clicked. External code cannot modify this object.

Properties

Property

(type)

Description
actionCause

(string)

The cause of the usage analytics event. For instance, triggering a query using the search box logs a usage analytics event with searchBoxSubmit as its actionCause, whereas triggering a query by selecting a facet value logs a usage analytics event with facetSelect as its actionCause.

External code cannot modify the value of this attribute.

actionType

(string)

The generic action type of the usage analytics event. All analytics events that strongly relate to a certain feature or component usually share the same actionType.

For instance, all usage analytics events relating to the Facet component have facet as their actionType, whereas all usage analytics events relating to the Breadcrumb component have breadcrumb as their actionType.

External code cannot modify the value of this attribute.

language

(string)

The language of the search interface from which the usage analytics event originates. By default, the framework populates this attribute with the currently loaded localization and culture file of the search interface from which the usage analytics event originates.

External code can modify the value of this attribute.

metaObject

(IChangeableAnalyticsMetaObject)

The metadata to send along with the usage analytics event.

External code can modify existing values, or add new key-value pairs in this attribute.

originLevel1

(string)

The high-level origin of the usage analytics event. For instance, this could be the name of the search hub, or a name that can uniquely identify the search page from which the usage analytics event originates.

Default value is default.

External code can modify the value of this attribute.

originLevel2

(string)

The mid-level origin of the usage analytics event. By default, the framework populates this attribute with the data-id of the currently selected tab in the search interface from which the usage analytics event originates.

External code can modify the value of this attribute.

originLevel3

(string)

The low-level origin of the usage analytics event. For instance, this could be the HTTP identifier of the page from which the usage analytics event originates.

Default value is the empty string.

External code can modify the value of this attribute.

type

The type of the usage analytics event.

External code cannot modify the value of this attribute.

IChangeLayoutEventArgs Interface

The IChangeLayoutEventArgs interface describes the object that all ChangeLayout event handlers receive as an argument.

Properties

Property

(type)

Description
layout

(ValidLayout)

The name of the new layout.

results

(IQueryResults)

The current page of results.

IChangeableAnalyticsDataObject Interface

The IChangeableAnalyticsDataObject interface describes the modifiable part of the object that all changeAnalyticsCustomData event handlers receive as an argument.

Properties

Property

(type)

Description
language

(string)

The language of the search interface from which the usage analytics event originates. By default, the framework populates this attribute with the currently loaded localization and culture file of the search interface from which the usage analytics event originates.

External code can modify the value of this attribute.

metaObject

(IChangeableAnalyticsMetaObject)

The metadata to send along with the usage analytics event.

External code can modify existing values, or add new key-value pairs in this attribute.

originLevel1

(string)

The high-level origin of the usage analytics event. For instance, this could be the name of the search hub, or a name that can uniquely identify the search page from which the usage analytics event originates.

Default value is default.

External code can modify the value of this attribute.

originLevel2

(string)

The mid-level origin of the usage analytics event. By default, the framework populates this attribute with the data-id of the currently selected tab in the search interface from which the usage analytics event originates.

External code can modify the value of this attribute.

originLevel3

(string)

The low-level origin of the usage analytics event. For instance, this could be the HTTP identifier of the page from which the usage analytics event originates.

Default value is the empty string.

External code can modify the value of this attribute.

IChangeableAnalyticsMetaObject Interface

The IChangeableAnalyticsMetaObject interface describes the metadata which can be sent along with any usage analytics event.

IComponentBindings Interface

The bindings, or environment in which each component exists.

Properties

Property

(type)

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

queryController

(QueryController)

Contains the singleton that allows to trigger queries.

queryStateModel

(QueryStateModel)

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

root

(HTMLElement)

The root HTMLElement of the SearchInterface in which the component exists.

searchInterface

(SearchInterface)

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

usageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

IComponentDefinition Interface

Definition for a Component.

Properties

Property

(type)

Description
ID

(string)

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

className

(string)

The generated className for this component.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton

doExport

Function that can be called to export one or multiple module in the global scope.

fields

The optional index fields that the component possess or display.

parent

(IComponentDefinition)

The optional parent of the component, which will be a component itself.

constructor

Constructor for each component