---
title: Box Visualforce component (Deprecated)
slug: '1103'
canonical_url: https://docs.coveo.com/en/1103/
collection: coveo-for-salesforce
source_format: adoc
---
# Box Visualforce component (Deprecated)
> **Deprecated**
>
> This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

The Box Visualforce component takes care of wrapping the [JsSearch Visualforce component](https://docs.coveo.com/en/1285/) and includes the correct script and different resource references.

This is the component that you must reference to create a Coveo Box in the Salesforce console (see [Creating a custom Coveo Box inside the Salesforce console](https://docs.coveo.com/en/1068/)).

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

## Usage

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

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

## Resources included with this component

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

* Since it wraps the [JsSearch Visualforce component](https://docs.coveo.com/en/1285/), all the resources described in that page are included.
* The CSS for the different Box components.
* The JavaScript resources for the Box component.
* The Apex console integration toolkit resources, allowing you to open results directly inside the Salesforce console (see [Introducing the Salesforce Console Integration Toolkit](https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/)).

## JavaScript code included and executed with this component

* Since it wraps the [JsSearch Visualforce component](https://docs.coveo.com/en/1285/), all the code described in that page is executed.

This includes the creation of the [Search Endpoint](https://coveo.github.io/search-ui/classes/searchendpoint.html), with the [search token](https://docs.coveo.com/en/56/) and its renewal mechanism.

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

**Example**

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

```javascript
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 ...]
}
```

> **Note**
>
> The `Coveo.Salesforce` variable is used by the [Box component](https://docs.coveo.com/en/1282/) to create the query and show related items.
> You can access this variable to use any field available on the record, in JavaScript.
* The `.coveo('init')` call to initialize the box interface (see [jQuery extension](https://docs.coveo.com/en/364/)).

## Options

This component has the same options as the JsSearch Visualforce components (see [JsSearch Visualforce component](https://docs.coveo.com/en/1285/)).

You can also use the following options.

### recordId

(Mandatory) The id of the current record.

```xml
<Coveo:Box recordId="{!record.id}"/>
```

### name

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

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

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

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

### fields

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

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

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