Support Menu

Coveo component Folding

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

This component has no visual representation of its own. Its simply folds certain search results so that the ResultFolding and ResultAttachments components can nicely display them inside result templates (see Result Templates).

A typical use case of the Folding component is to fold email conversations and message board threads to make it possible 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.

Index

Component Options

childField

childField: IFieldOption

Specifies the field that determines whether a given 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 conversations of a given thread.

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

See also Folding.options.expandExpression and Folding.options.maximumExpandedResults.

Default value is true.

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

expandExpression

expandExpression: string

If Folding.options.enableExpand 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 options 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 (Coveo.Folding.defaultGetMoreResults) 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 (which is implemented in Coveo.Folding.defaultGetResult) 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:

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})

// Or you can call the init script using the jQuery extension:
Coveo.$('#search').coveo('init', {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
});

Type declaration

maximumExpandedResults

maximumExpandedResults: number

If Folding.options.enableExpand 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 given 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 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 Folding.options.enableExpand).

Default value is 2. Minimum value is 0.

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

rearrange

rearrange: SortCriteria

Specifies the top result and its related child results, following the sort criteria format (date ascending, @somefield ascending, etc.)

Example

If you specify date descending, the Folding component re-arranges an email conversation so that the newest email is always the top result. Doing the opposite (date ascending) would always make the original email the top result, since it is also the oldest.

Default value is none, which means that the component displays the results in the order that they were returned by the index.

Static options

options: object

The options for the component

componentoptions

childField

childField: IFieldOption

Specifies the field that determines whether a given 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 conversations of a given thread.

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

See also Folding.options.expandExpression and Folding.options.maximumExpandedResults.

Default value is true.

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

expandExpression

expandExpression: string

If Folding.options.enableExpand 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 options 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 (Coveo.Folding.defaultGetMoreResults) 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 (which is implemented in Coveo.Folding.defaultGetResult) 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:

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
})

// Or you can call the init script using the jQuery extension:
Coveo.$('#search').coveo('init', {
   Folding: {
     getResult: function(result) {
       result = Coveo.Folding.defaultGetResult(result);
       // Your code here
     }
   }
});

Type declaration

maximumExpandedResults

maximumExpandedResults: number

If Folding.options.enableExpand 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 given 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 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 Folding.options.enableExpand).

Default value is 2. Minimum value is 0.

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

rearrange

rearrange: SortCriteria

Specifies the top result and its related child results, following the sort criteria format (date ascending, @somefield ascending, etc.)

Example

If you specify date descending, the Folding component re-arranges an email conversation so that the newest email is always the top result. Doing the opposite (date ascending) would always make the original email the top result, since it is also the oldest.

Default value is none, which means that the component displays the results in the order that they were returned by the index.

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