BoxBody component (Deprecated)

This is for:

Developer System Administrator
In this article
Deprecated

This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version 5.2.

This component appends a ResultList component and ensures the correct CSS styles are applied so infinite scrolling works correctly.

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

enableInfiniteScroll: true;

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

$('#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.

<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:

  1. 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
     <div class="CoveoBoxBody">
     <script class='result-template' type="text/x-underscore-template">
        <%= clickUri %>
     </script>
 </div>

  2. 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:

     $('#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 and result template helpers.

Methods

getHeight

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

$('#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.

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

Usage

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