BoxPopup component

This is for:

Developer System Administrator
In this article

Deprecated

Since the Box component is designed to be included in the Salesforce console sidebar with a limited amount of space, it might be useful to add sections that can be hidden or shown when the user clicks them.

This component is only a container inside of which you can drop any other content or components.

Options

title

Specifies the static title that should be displayed.

The default value is Click here to open.

Important
Important

Since this component exposes methods to set its title, it’s possible that other components contained inside this container dynamically set it.

 
<div data-title='<YOUR_STATIC_TITLE>'></div>

Where you can replace <YOUR_STATIC_TITLE> by the static title that should be displayed.

withAnimation

Specifies if the popup should open with an animation.

The animation is completely CSS based. To modify the animation itself, modify the CSS rules that apply to the relevant elements.

The default value is true.

<div data-with-animation='true'></div>

fullWidth

Specifies if the popup should open with the fully available width of the page.

The default value is false.

<div data-full-width='false'></div>

fullHeight

Specifies if the popup should open with the fully available height of the page.

The default value is false.

<div data-full-height='false'></div>

Methods

setTitle

Sets the title displayed in the popup container.

$('.CoveoBoxPopup').coveo('setTitle', '<TITLE>');

Where you replace <TITLE> by the title to be displayed in the popup container.

open

Opens the popup.

$('.CoveoBoxPopup').coveo('open')

close

Closes the popup.

$('.CoveoBoxPopup').coveo('close')

toggle

Opens or close the popup depending on its current state.

$('.CoveoBoxPopup').coveo('toggle')

Usage

The HTML content inside the BoxPopup div will be used to determine what’s shown or hidden when the panel is opened and closed.

<div class='CoveoBoxPopup'>
    <div class='coveo-facet-column'>
        <div class='CoveoFacet' data-field='@<FACET1>'></div>
        <div class='CoveoFacet' data-field='@<FACET2>'></div>
        <div class='CoveoFacet' data-field='@<FACET3>'></div>
    </div>
</div>

Where you replace <FACET1>, <FACET2>, and <FACET3> by respectively the name of the first, second, and third facet you want to show. You can add as many facets as you want.