# 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

### Methods

- debugInfo
- disable
- enable
- getBindings
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- child
- childField
- enableExpand
- expandExpression
- field
- getMoreResults
- getResult
- maximumExpandedResults
- parent
- parentField
- range
- rearrange
- options

### Constructors

- constructor

## Methods

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

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

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  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

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  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

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

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

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

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

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

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

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

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

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

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

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

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

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### child

child: IFieldOption

- Defined in ui/Folding/Folding.ts :104

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

Note:

> In the index, the values of the corresponding field must:

> - Contain alphanumerical characters only.
> - Contain no more than 60 characters.

Default value is `@foldingchild`.

Default

  `@foldingchild`

Markup configuration example(s) :

    data-child='@foo'

### childField

childField: IFieldOption

- Defined in ui/Folding/Folding.ts :121

This option is deprecated. Instead, use the Folding.options.parent option.

deprecated

Markup configuration example(s) :

    data-child-field='@foo'

### enableExpand

enableExpand: boolean

- Defined in ui/Folding/Folding.ts :176

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`.

Default

  `true`

Markup configuration example(s) :

    data-enable-expand='true'
    data-enable-expand='false'

### expandExpression

expandExpression: string

- Defined in ui/Folding/Folding.ts :183

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

Default value is `undefined`.

Only effective when

  `enableExpand` is truthy

Markup configuration example(s) :

    data-expand-expression='foo'

### field

field: IFieldOption

- Defined in ui/Folding/Folding.ts :93

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.

Note:

> In an Elasticsearch index, the corresponding field must be configured as a Facet field (see Add or Edit Fields). This limitation does not apply to Coveo indexes.

Default value is `@foldingcollection`.

Default

  `@foldingcollection`

Markup configuration example(s) :

    data-field='@foo'

### getMoreResults

getMoreResults: function

- Defined in ui/Folding/Folding.ts :242

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

- - (results: IQueryResult[]): IQueryResult[]

  - #### Parameters

    - ##### results: IQueryResult[]

    #### Returns IQueryResult[]

### getResult

getResult: function

- Defined in ui/Folding/Folding.ts :226

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

- - (result: IQueryResult): IQueryResult

  - #### Parameters

    - ##### result: IQueryResult

    #### Returns IQueryResult

### maximumExpandedResults

maximumExpandedResults: number

- Defined in ui/Folding/Folding.ts :191

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

Default value is `100`. Minimum value is `1`.

Only effective when

  `enableExpand` is truthy

Minimum

  `1`

Default

  `100`

Markup configuration example(s) :

    data-maximum-expanded-results='10'

### parent

parent: IFieldOption

- Defined in ui/Folding/Folding.ts :115

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

Note:

> In the index, the values of the corresponding field must:

> - Contain alphanumerical characters only.
> - Contain no more than 60 characters.

Default value is `@foldingparent`.

Default

  `@foldingparent`

Markup configuration example(s) :

    data-parent='@foo'

### parentField

parentField: IFieldOption

- Defined in ui/Folding/Folding.ts :128

This option is deprecated. Instead, use the Folding.options.child option.

deprecated

Markup configuration example(s) :

    data-parent-field='@foo'

### range

range: number

- Defined in ui/Folding/Folding.ts :143

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`.

Minimum

  `0`

Default

  `2`

Markup configuration example(s) :

    data-range='10'

### rearrange

rearrange: SortCriteria

- Defined in ui/Folding/Folding.ts :163

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

This option works from the results returned by the index. This means that if only the three most relevant folded results are returned by the index and you choose to rearrange the folded results by date, then the three most relevant results will be rearranged by date, meaning that the first folded result is not necessarily the oldest or newest item.

However, since clicking on the `Show More` button triggers a new query, you would receive new results based on the sort criteria of this option.

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

Inherited from Folding.options

- Defined in ui/Folding/Folding.ts :80

The options for the component

componentoptions

### child

child: IFieldOption

- Defined in ui/Folding/Folding.ts :104

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

Note:

> In the index, the values of the corresponding field must:

> - Contain alphanumerical characters only.
> - Contain no more than 60 characters.

Default value is `@foldingchild`.

Default

  `@foldingchild`

Markup configuration example(s) :

    data-child='@foo'

### childField

childField: IFieldOption

- Defined in ui/Folding/Folding.ts :121

This option is deprecated. Instead, use the Folding.options.parent option.

deprecated

Markup configuration example(s) :

    data-child-field='@foo'

### enableExpand

enableExpand: boolean

- Defined in ui/Folding/Folding.ts :176

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`.

Default

  `true`

Markup configuration example(s) :

    data-enable-expand='true'
    data-enable-expand='false'

### expandExpression

expandExpression: string

- Defined in ui/Folding/Folding.ts :183

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

Default value is `undefined`.

Only effective when

  `enableExpand` is truthy

Markup configuration example(s) :

    data-expand-expression='foo'

### field

field: IFieldOption

- Defined in ui/Folding/Folding.ts :93

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.

Note:

> In an Elasticsearch index, the corresponding field must be configured as a Facet field (see Add or Edit Fields). This limitation does not apply to Coveo indexes.

Default value is `@foldingcollection`.

Default

  `@foldingcollection`

Markup configuration example(s) :

    data-field='@foo'

### getMoreResults

getMoreResults: function

- Defined in ui/Folding/Folding.ts :242

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

- - (results: IQueryResult[]): IQueryResult[]

  - #### Parameters

    - ##### results: IQueryResult[]

    #### Returns IQueryResult[]

### getResult

getResult: function

- Defined in ui/Folding/Folding.ts :226

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

- - (result: IQueryResult): IQueryResult

  - #### Parameters

    - ##### result: IQueryResult

    #### Returns IQueryResult

### maximumExpandedResults

maximumExpandedResults: number

- Defined in ui/Folding/Folding.ts :191

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

Default value is `100`. Minimum value is `1`.

Only effective when

  `enableExpand` is truthy

Minimum

  `1`

Default

  `100`

Markup configuration example(s) :

    data-maximum-expanded-results='10'

### parent

parent: IFieldOption

- Defined in ui/Folding/Folding.ts :115

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

Note:

> In the index, the values of the corresponding field must:

> - Contain alphanumerical characters only.
> - Contain no more than 60 characters.

Default value is `@foldingparent`.

Default

  `@foldingparent`

Markup configuration example(s) :

    data-parent='@foo'

### parentField

parentField: IFieldOption

- Defined in ui/Folding/Folding.ts :128

This option is deprecated. Instead, use the Folding.options.child option.

deprecated

Markup configuration example(s) :

    data-parent-field='@foo'

### range

range: number

- Defined in ui/Folding/Folding.ts :143

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`.

Minimum

  `0`

Default

  `2`

Markup configuration example(s) :

    data-range='10'

### rearrange

rearrange: SortCriteria

- Defined in ui/Folding/Folding.ts :163

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

This option works from the results returned by the index. This means that if only the three most relevant folded results are returned by the index and you choose to rearrange the folded results by date, then the three most relevant results will be rearranged by date, meaning that the first folded result is not necessarily the oldest or newest item.

However, since clicking on the `Show More` button triggers a new query, you would receive new results based on the sort criteria of this option.

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.

## Constructors

### constructor

- new Folding(element: HTMLElement, options: IFoldingOptions, bindings?: IComponentBindings): Folding

- Overwrites Component.constructor

  - Defined in ui/Folding/Folding.ts :245

  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

- Component