Support Menu

Coveo component Folding

Coveo Folding Component (CoveoFolding)

The Folding component makes it possible to render hierarchic representations of search results sharing a common field.

This component has no visual impact on its own. It simply folds certain search results so that the ResultFolding and ResultAttachments components can then nicely render them within result templates (see Result Templates).

A typical use case of the Folding component is to fold email conversations and message board threads results in a result set in order to display them in a convenient format. Messages belonging to a single conversation typically have a unique conversation ID. By indexing this ID on a field, you can use it to fold search results (see Folding Results).

Note:

There can only be one Folding component per Tab component.

Index

Component Options

childField

childField: IFieldOption

Specifies the field that determines whether a certain result is a child of another top result.

Default value is @topparentid.

Markup configuration example(s) :
data-child-field='@foo'

enableExpand

enableExpand: boolean

Specifies whether to add a callback function on the top result, allowing to make an additional query to load all of its child results (e.g., to load all conversations of a given thread).

Concretely, the ResultFolding component uses this for its Show More link.

See also the expandExpression and maximumExpandedResults options.

Default value is true.

Markup configuration example(s) :
data-enable-expand='true'
data-enable-expand='false'

expandExpression

expandExpression: string

If the enableExpand option is true, specifies a custom constant expression to send when querying the expanded results.

Default value is undefined.

Markup configuration example(s) :
data-expand-expression='foo'

field

Specifies the name of the field on which to do the folding.

Specifying a value for this option is required for this component to work.

Markup configuration example(s) :
data-field='@foo'

getMoreResults

getMoreResults: function

Specifies the function that manages the folding of all results.

Default value is:

Coveo.Folding.defaultGetMoreResults = function(results) {
   // The results are flat, just do the folding.
   return Coveo.Folding.foldWithParent(results);
}

Type declaration

getResult

getResult: function

Specifies the function that manages the individual folding of each result.

Default value is:

var results = result.childResults || [];
// Add the top result at the top of the list.
results.unshift(result);
// Empty childResults just to clean it.
result.childResults = [];
// Fold those results.
results = Coveo.Folding.foldWithParent(results);
// The first result is the top one.
var topResult = results.shift();
// All other results are childResults.
topResult.childResults = results;
return topResult;

You can pre-process all the result with this option in the init call of your search interface:

Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})

Type declaration

maximumExpandedResults

maximumExpandedResults: number

If the enableExpand option is true, specifies the maximum number of results to load when expanding.

Default value is 100. Minimum value is 1.

Markup configuration example(s) :
data-maximum-expanded-results='10'

parentField

parentField: IFieldOption

Specifies the field that determines whether a certain result is a top result containing other child results.

Default value is @containsattachment.

Markup configuration example(s) :
data-parent-field='@foo'

range

range: number

Specifies the maximum number of child results to fold.

Example:

For an email thread with a total of 20 messages, using the default value of 2 means that the component loads up to a maximum of 2 child messages under the original message, unless the end user expands the entire conversation using the Show More link (see the enableExpand option).

Default value is 2. Minimum value is 0.

Markup configuration example(s) :
data-range='10'

rearrange

rearrange: SortCriteria

Specifies the sort criteria to apply to the top result and its child results (e.g., date ascending, @myfield descending, etc. See Query Parameters - sortCriteria).

Example

If you are folding email results by conversation and you specify date descending as the rearrange value of the Folding component, the component re-arranges email conversations so that the newest email is always the top result. Specifying date ascending instead always makes the original email the top result, as it is also necessarily the oldest.

By default, the component displays the results in the order that the index returns them.

Static options

options: object

The options for the component

componentoptions

childField

childField: IFieldOption

Specifies the field that determines whether a certain result is a child of another top result.

Default value is @topparentid.

Markup configuration example(s) :
data-child-field='@foo'

enableExpand

enableExpand: boolean

Specifies whether to add a callback function on the top result, allowing to make an additional query to load all of its child results (e.g., to load all conversations of a given thread).

Concretely, the ResultFolding component uses this for its Show More link.

See also the expandExpression and maximumExpandedResults options.

Default value is true.

Markup configuration example(s) :
data-enable-expand='true'
data-enable-expand='false'

expandExpression

expandExpression: string

If the enableExpand option is true, specifies a custom constant expression to send when querying the expanded results.

Default value is undefined.

Markup configuration example(s) :
data-expand-expression='foo'

field

Specifies the name of the field on which to do the folding.

Specifying a value for this option is required for this component to work.

Markup configuration example(s) :
data-field='@foo'

getMoreResults

getMoreResults: function

Specifies the function that manages the folding of all results.

Default value is:

Coveo.Folding.defaultGetMoreResults = function(results) {
   // The results are flat, just do the folding.
   return Coveo.Folding.foldWithParent(results);
}

Type declaration

getResult

getResult: function

Specifies the function that manages the individual folding of each result.

Default value is:

var results = result.childResults || [];
// Add the top result at the top of the list.
results.unshift(result);
// Empty childResults just to clean it.
result.childResults = [];
// Fold those results.
results = Coveo.Folding.foldWithParent(results);
// The first result is the top one.
var topResult = results.shift();
// All other results are childResults.
topResult.childResults = results;
return topResult;

You can pre-process all the result with this option in the init call of your search interface:

Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})

Type declaration

maximumExpandedResults

maximumExpandedResults: number

If the enableExpand option is true, specifies the maximum number of results to load when expanding.

Default value is 100. Minimum value is 1.

Markup configuration example(s) :
data-maximum-expanded-results='10'

parentField

parentField: IFieldOption

Specifies the field that determines whether a certain result is a top result containing other child results.

Default value is @containsattachment.

Markup configuration example(s) :
data-parent-field='@foo'

range

range: number

Specifies the maximum number of child results to fold.

Example:

For an email thread with a total of 20 messages, using the default value of 2 means that the component loads up to a maximum of 2 child messages under the original message, unless the end user expands the entire conversation using the Show More link (see the enableExpand option).

Default value is 2. Minimum value is 0.

Markup configuration example(s) :
data-range='10'

rearrange

rearrange: SortCriteria

Specifies the sort criteria to apply to the top result and its child results (e.g., date ascending, @myfield descending, etc. See Query Parameters - sortCriteria).

Example

If you are folding email results by conversation and you specify date descending as the rearrange value of the Folding component, the component re-arranges email conversations so that the newest email is always the top result. Specifying date ascending instead always makes the original email the top result, as it is also necessarily the oldest.

By default, the component displays the results in the order that the index returns them.

Methods

debugInfo

  • debugInfo(): any

disable

  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void

enable

  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void

getBindings

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.

    Parameters

    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent

Properties

bind

Allows the component to bind events and execute them only when it is enabled.

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger component state event when modified. Each component can listen to those events.

disabled

disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

root

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton

Constructors

constructor

  • Creates a new Folding component.

    Parameters

    • element: HTMLElement

      The HTMLElement on which to instantiate the component.

    • options: IFoldingOptions

      The options for the Folding component.

    • Optional bindings: IComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    Returns Folding

Hierarchy