Coveo for Salesforce (V3.33) JavaScript Search component reference
Coveo for Salesforce (V3.33) JavaScript Search component reference
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>
Properties
Property (type) |
Description |
---|---|
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |
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>
Properties
Property (type) |
Description |
---|---|
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Allows to get and set the different breakpoints for mobile and tablet devices. This is useful, amongst other, for Facet, Tab and ResultList |
|
The static ID that each component need to be identified. |
|
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. |
|
The button to use when creating a ModalBox |
|
Content of a ModalBox |
|
The availables buttons (Ok, Apply, Cancel, etc.) |
|
The function that can be called to close the modal box. Note that this is also called by validation button such as APPLY, YES, etc. |
|
The content itself |
|
The modalBox container itself |
|
The overlay added on the body, which can be clicked to close the modalbox |
|
The wrapper of the content |
|
Possible options when creating a ModalBox |
|
Specify the content that you wish to put inside the modal box |
|
The button you wish to create (Using BUTTON enum |
|
Specify that you wish to add a prefix to the class name of the modal box container, to not clash with existing css in the page |
|
Specify if you wish to open the modal box full screen. Default is |
|
Specify if you wish to close the modal box when the overlay (black background) is clicked. Default is |
|
The size for the modal box |
|
Specify the title of the modal box |
|
Specify that you wish the modal box to close when the user click on the title. Default is |
|
Specify a validation function, which receives the button that was pressed. |
BoxBody Component
Component HTML element class:CoveoBoxBody
The BoxBody component takes care of appending a ResultList Component and ensuring the correct CSS styles are applied so that infinite scrolling works properly. By default, the ResultList component is initialized with the following option:
enableInfiniteScroll: true;
When you wish to modify other options on the ResultList component, when initializing the framework, add the following code.
Remember to change #MyBox
with the id of your CoveoBoxBody
component, and 20
with the page size you wish to modify.
$('#MyBox').coveo('initBox', {
BoxBody : {
infiniteScrollPageSize : 20
}
})
Use this component on your page this way:
<div class='CoveoBoxBody'></div>
Properties
Property (type) |
Description |
---|---|
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |
BoxCreateArticle Component
Component HTML element class:CoveoBoxCreateArticle
The BoxCreateArticle component allows the use of the Create Article button in the Coveo Insight Panel (see Adding a Create Article Button to the Insight Panel).
Use this component inside the coveo-box-settings
div.
<div class="coveo-box-settings">
<a class="CoveoBoxCreateArticle" target="_blank">
</a>
...
</div>
Properties
Property (type) |
Description |
---|---|
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |
BoxCurrentSort Component
Component HTML element class:CoveoBoxCurrentSort
The BoxCurrentSort component is only meant as a utility to set the title on its BoxPopup Component container. Whenever the current sort changes, for instance when a user clicks on a new Sort Component, this component takes care of setting a new title on the BoxPopup Component. This component must be included inside a BoxPopup component.
<div class='CoveoBoxPopup'>
<div class='CoveoBoxCurrentSort'></div>
<div class="coveo-sort-section">
[[sorts]]
</div>
</div>
Properties
Property (type) |
Description |
---|---|
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |
BoxCurrentTab Component
Component HTML element class:CoveoBoxCurrentTab
The BoxCurrentTab component is only meant as a utility to set the title on its BoxPopup Component container. Whenever the current tab changes, for instance when a user clicks on a new Tab Component, this component takes care of setting a new title on the BoxPopup Component. This component must be included inside a BoxPopup component.
<div class='CoveoBoxPopup'>
<div class='CoveoBoxCurrentTab'></div>
<div class="coveo-tab-section">
[[sorts]]
</div>
</div>
Properties
Property (type) |
Description |
---|---|
|
Allows the component to bind events and execute them only when it is enabled. |
|
Contains the state of options for different components. Mainly used by ResultLink. |
|
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. |
|
A disabled component will not participate in the query, or listen to ComponentEvents. |
|
Allows component to log in the dev console. |
|
Contains the singleton that allows to trigger queries. |
|
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events. |
|
A reference to the root HTMLElement (the SearchInterface). |
|
A reference to the root of every component, the SearchInterface. |
|
A reference to the Analytics.client. |
|
The static ID that each component need to be identified. |
|
Create a new Component. Resolve all IComponentBindings if not provided. |