{{ page.name escape }} (v{{ page.version }}) JavaScript Components - Generated From Code

In this article

Coveo for Salesforce comes with a set of JavaScript search user interface components. This article provides component API reference documentation that’s automatically generated from the source code.

Components

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

AttachToCase Component

Component HTML element class: CoveoAttachToCase

The AttachToCase component is a Result Templates component that allows you to link a result to a Salesforce case.

When wanting to attach Knowledge articles, ensure that the sfkbid, sfkbversionnumber (legacy), sfversionnumber (express), and sflanguage fields are properly populated on the article (see Add/Edit Mapping for Cloud V2 and Managing Fields for a Source for Cloud V1).

<div class="CoveoAttachToCase"></div>

Options

Option

(type)

Description
displayText

(boolean)

Specifies if the component should include the Attach/Detach text. Default value is false.

<div data-display-text='true'/>
displayTooltip

(boolean)

Specifies if the component should include the Attach/Detach tooltip. Default value is false.

<div data-display-tooltip='true'/>
readonly

(boolean)

Specifies if the component should be in read only mode. When in read only mode, you cannot Attach or Detach results. The default value is false.

<div data-readonly='true'/>
recordType

Specified the current record type.

BoxdisplayText

(boolean)

Specifies if the component should include the Attach/Detach text. Default value is false.

<div data-display-text='true'/>
BoxdisplayTooltip

(boolean)

Specifies if the component should include the Attach/Detach tooltip. Default value is false.

<div data-display-tooltip='true'/>
Boxreadonly

(boolean)

Specifies if the component should be in read only mode. When in read only mode, you cannot Attach or Detach results. The default value is false.

<div data-readonly='true'/>
BoxrecordType

Specified the current record type.

Boxoptions

(object)

The possible options for AttachToCase

Boxoptions.displayText

(boolean)

Specifies if the component should include the Attach/Detach text. Default value is false.

<div data-display-text='true'/>
Boxoptions.displayTooltip

(boolean)

Specifies if the component should include the Attach/Detach tooltip. Default value is false.

<div data-display-tooltip='true'/>
Boxoptions.readonly

(boolean)

Specifies if the component should be in read only mode. When in read only mode, you cannot Attach or Detach results. The default value is false.

<div data-readonly='true'/>
Boxoptions.recordType

Specified the current record 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 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.

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.

Boxbind

(ComponentEvents)

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

BoxcomponentOptionsModel

(ComponentOptionsModel)

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

BoxcomponentStateModel

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

Boxdisabled

(boolean)

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

Boxlogger

(Logger)

Allows component to log in the dev console.

BoxqueryController

(QueryController)

Contains the singleton that allows to trigger queries.

BoxqueryStateModel

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

Boxroot

(HTMLElement)

A reference to the root HTMLElement (the SearchInterface).

BoxsearchInterface

(SearchInterface)

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

BoxusageAnalytics

(IAnalyticsClient)

A reference to the Analytics.client.

BoxID

(string)

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

Boxconstructor

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

Box Component

Component HTML element class: CoveoBox

The Box component represents the container that includes all the other box components. It inherits from a SearchInterface Component and supports all of its options.

<div class='CoveoBox'></div>

Options

Option

(type)

Description
enableAutomaticResponsiveMode

(boolean)

Whether the component should automatically adapt to the screen size. Default value is true.

<div data-enable-automatic-reponsive-mode="true"></div>
enableBoxStateHistory

(boolean)

Specifies if you wish to save and reload the Box state when the page is closed and reopened. This saves the current state of the current tab that is selected.

If set to false, the tab reverts to the default one on each page load.

If set to true, each time you reload the page, the last tab that you selected will be automatically selected.

Default value is true.

<div data-enable-box-state-history="true"></div>
excerptLength

(number)

Specifies the length (in characters) of the result text (excerpt) to display. Default value is 80.

Minimum value is 0.

<div data-excerpt-length="80"></div>
resultsPerPage

(number)

Specifies the number of results you want per page. Default value is 20.

Minimum value is 0.

<div data-results-per-page="20"></div>