---
title: BoxBody component (Deprecated)
slug: '1231'
canonical_url: https://docs.coveo.com/en/1231/
collection: coveo-for-salesforce
source_format: adoc
---
# BoxBody 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).

This component appends a [ResultList component](https://coveo.github.io/search-ui/components/resultlist.html) and ensures the correct CSS styles are applied so infinite scrolling works correctly.

By default, the `ResultList` component is initialized with the following option:

```javascript
enableInfiniteScroll: true;
```

To modify other options on the `ResultList` component, initialize the framework as follows:

```javascript
$('#MyBox').coveo('initBox', {
    BoxBody : {
        infiniteScrollPageSize : 20
    }
})
```

## Options

### enableInfiniteScroll

Specifies whether the component should automatically load more results when the user has reached the bottom of the result list.

The default value is `true`.

```xml
<div class="CoveoBoxBody" data-enable-infinite-scroll="true"></div>
```

### resultTemplate

> **Note**
>
> If you created your Box component using the Interface Editor and the HTML template editor that's provided with that product, then you will most likely not have to handle the templates manually.
> 
> The following documentation is provided only if you **manually created** the markup of your page.
> 
> This is **not relevant** for you if you're using the Interface Editor.

This option specifies a result template that the body should use.

There are many ways to specify a result template:

. Put a `script` tag with the class `result-template` and the correct mime-type as a child of the component in your `HTML` markup.

**Example**

```html
 <div class="CoveoBoxBody">
     <script class='result-template' type="text/x-underscore-template">
        <%= clickUri %>
     </script>
 </div>
```
. Assign the result template to the `BoxBody` Component itself when you initialize the framework.

**Example**

Assuming you have a `script` tag with the id `MyBoxTemplate`, your tag should look like this:

```javascript
 $('#MyBox').coveo('initBox', {
     BoxBody : {
         resultTemplate : new Coveo.Ui.UnderscoreTemplate($('#MyBoxTemplate').get(0))
     }
 });

 [...]
 <script id="MyBoxTemplate" type="text/x-underscore-template">
    <%= clickUri %>
 </script>
```

> **Note**
>
> You can read more about [result templates](https://docs.coveo.com/en/413/) and [result template helpers](https://docs.coveo.com/en/413#result-template-helpers).

## Methods

### getHeight

Returns the height of the component.
It's used mostly for the `resize` method.

```javascript
$('#myBoxBody').coveo('getHeight')
```

### resize

Calculates the current required height for the body so that infinite scrolling works correctly.

It's called once when the component is first initialized and after every query, but you might need to call it again if you have something in your box that changes the header or footer height.

```javascript
$('#myBoxBody').coveo('resize')
```

## Usage

```xml
<div class='CoveoBoxBody'></div>
```