Box Visualforce component

The Box Visualforce component takes care of wrapping the JsSearch Visualforce component and includes the correct script and different resource references.

This is the component that you need to reference to create a Coveo Box in the Salesforce console (see Creating a custom Coveo Box inside the Salesforce console).

Including this component in a Visualforce page lets you create a fully working page using the Interface Editor.


Reference it in your Visualforce page, as you would for any other Apex component, using the namespace prefix of the Coveo package.

<apex:page standardController="Case" docType="html-5.0">
    <CoveoV2:Box recordId="{!id}" />

Resources included with this component

This component includes the following resources in the header of your page:

JavaScript code included and executed with this component

  • Since it wraps the JsSearch Visualforce component, all the code described in that page is executed.

    This includes the creation of the Search Endpoint, with the search token and its renewal mechanism.

  • All the properties and fields of the current Salesforce record, in a JavaScript variable defined in Coveo.Salesforce.


If you were currently viewing a Case, you would get a JSON variable similar to this:

Coveo.Salesforce.record = {
    "assetid": null,
    "lastmodifiedbyid": "005i0000001PxLvAAK",
    "user__userid": "005i0000001PxLvAAK",
    "suppliedname": null,
    "user__lastname": "Doe",
    "engineeringreqnumber__c": "765876",
    "casenumber": "00001000",
    "lastvieweddate": "2014-12-08T18:40:29.000Z",
    "ownerid": "005i0000001PxLvAAK",
    "createddate": "2013-10-28T14:33:44.000Z",
    "user__usertype": "Standard",
    "product__c": "GC5040",
    "origin": "Phone",
    "user__firstname": "John",
    "hascommentsunreadbyowner": false,
    "suppliedphone": null,
    "description": "foobar",
    [... etc, for all the fields on the case ...]

The Coveo.Salesforce variable is used by the Box component to create the query and show related items. You can access this variable if you need to use any field available on the record, in JavaScript.

  • The .coveo('init') call to initialize the box interface (see jQuery extension).


This component has the same options as the JsSearch Visualforce components (see JsSearch Visualforce component).

You can also use the following options.


(Mandatory) The id of the current record.

<Coveo:Box recordId="{!}"/>


(Optional) The name of the Box and the name of the <apex:Component> that are created. By default, this option is the name of your Visualforce page.


The Interface Editor creates and saves the content of your interface in an Apex component. This property allows you to set the name of the component that’s being created.

<CoveoV2:Box name="<MY_CUSTOM_BOX>"/>

Where you replace <MY_CUSTOM_BOX> by the name you want for the <apex:Component> that’s created.


(Optional) Specifies a list of fields that should be retrieved on the current record. This allows you to allowlist the fields that should be included in the Coveo.Salesforce object and that will be queried in SOQL.

This should be a semicolon ( ; ) separated list. You should use the Salesforce API name of each field. An easy way to see those is to go to Setup > (Object name — for example, Case) > Fields inside Salesforce.

<CoveoV2:Box fields="<FIELD1>;<FIELD2>;<FIELD3>"/>

Where you replace <FIELD1>, <FIELD2>, and <FIELD3> by respectively the name of the first, second, and third field you want to include in the Coveo.Salesforce object. You can add as many fields as you want.


The default field value is *, meaning all the fields on the object.

Most of the time, you won’t have to modify this option.

This is meant as a way to circumvent some extreme cases where you would hit the SOQL query limit in Salesforce of ~20k characters if the object is complex.