---
title: Folding results
slug: '428'
canonical_url: https://docs.coveo.com/en/428/
collection: javascript-search-framework
source_format: adoc
---
# Folding results
You may want to improve end-user experience in your search page by ensuring that [query](https://docs.coveo.com/en/231/) result [items](https://docs.coveo.com/en/210/) having a logical parent-child relationship with one another are grouped and rendered accordingly in your result list.
This is called _result folding._

**Example**

Most end users naturally expect query results belonging to the same conversation thread to be displayed in such a way that the original message is represented as the parent of each subsequent reply.
This is a typical use-case for result folding.

## Enable result folding

Before you can display folded query results in your result list (see [Render folded results](#render-folded-results)), you must enable result folding in your search page.
Doing so is typically as simple as including a [`FoldingForThread`](https://coveo.github.io/search-ui/classes/foldingforthread.html) or a [`Folding`](https://coveo.github.io/search-ui/components/folding.html) component inside the HTML element bound to your main search interface component.

```html
<!-- ... -->
<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="CoveoFoldingForThread"></div>
  <!-- <div class="CoveoFolding"></div> -->
  <!-- ... -->
</div>
<!-- ... -->
```

> **Important**
>
> **Should I use `FoldingForThread` or `Folding`?**
> 
> `FoldingForThread` and `Folding` differ only in how they implement the `getResult` and `getMoreResults` functions.
> 
> In short, you should use:
> 
> * `FoldingForThread` when dealing with one-level parent-child relationships (for example, conversations with an original message and its replies).
> * `Folding` with recursive or multi-level parent-child relationships (for example, conversations with an original message, its replies, attachments, sub-attachments, etc.).

A `FoldingForThread`/`Folding` component is in charge of modifying outgoing queries to make result folding possible.
Usually, this component requires no further custom configuration, as it relies on default pre-configured [fields](https://docs.coveo.com/en/200/) in your [index](https://docs.coveo.com/en/204/) (see [Folding fields](https://docs.coveo.com/en/2718/)).

For a list of `FoldingForThread`/`Folding` options, see the reference documentation:

* [`FoldingForThread`](https://coveo.github.io/search-ui/classes/foldingforthread.html)
* [`Folding`](https://coveo.github.io/search-ui/components/folding.html)


> **Note**
>
> Although not typically recommended, it's possible to have many folding components in the same search page (see [Use many folding components](https://docs.coveo.com/en/2719/)).

## Render folded results

Once you've [added a `Folding` or `FoldingForThread` component](#enable-result-folding) in your search page, you must design [result templates](https://docs.coveo.com/en/413/) to actually display folded query results in your result list.

> **Important**
>
> If you've set the [`autoSelectFieldsToInclude`](https://coveo.github.io/search-ui/components/resultlist.html#options.autoselectfieldstoinclude) option to `true` on the `ResultList` component in which the folded results will be rendered, the fields referenced in your result folding templates won't be automatically resolved.
> In such a case, you must manually specify those fields using the [`fieldsToInclude`](https://coveo.github.io/search-ui/components/resultlist.html#options.fieldstoinclude) option.

### One-level relationships

To render one-level relationships (for example, a parent and its children), follow this pattern in your main result template:

. Render the parent result.
. Include a [`ResultFolding`](https://coveo.github.io/search-ui/components/resultfolding.html) component.

This component should reference another result template to render child results (see the [`resultTemplate`](https://coveo.github.io/search-ui/components/resultfolding.html#options.resulttemplate) option).


**Example**

**A basic list layout result template to render single-level folded conversations (that is, a parent message and its replies):**

```html
<!-- ... -->

<div class="CoveoFoldingForThread"></div>

<!-- ... -->

<script id="basic" class="result-template" type="text/html">
  <div>
    <div class="coveo-result-row">
      <div class="coveo-result-cell">
        <a class="CoveoResultLink"></a>
      </div>
    </div>
    <div class="coveo-result-row">
      <div class="coveo-result-cell">
        <div class="CoveoExcerpt"></div>
      </div>
    </div>
  </div>
</script>

<div class="CoveoResultList" data-layout="list">

  <!-- ... -->

  <script id="conversation" class="result-template" type="text/html" data-field-objecttype="Conversation">
    <div class="coveo-result-frame">
      <div class="CoveoTemplateLoader" data-template-id="basic"></div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
          <span class="CoveoResultFolding" data-result-template-id="basic"></span>
        </div>
      </div>
    </div>
  </script>

  <!-- ... -->

</div>

<!-- ... -->
```

**Sample rendered result:**

> **Note**
>
> Once a field has a parent and collection field, the result template will automatically display the **Show more** functionality.
> If you would prefer to disable this feature, you would have to implement some custom JavaScript to do so.

### Multi-level relationships

To render multi-level relationships (for example, a parent, its children, and their attachments), follow this pattern in your main result template:

. Render the most relevant result.
. Include a [`ResultFolding`](https://coveo.github.io/search-ui/components/resultfolding.html) component.

This component should reference another template to render the entire folded result (see the [`resultTemplate`](https://coveo.github.io/search-ui/components/resultfolding.html#options.resulttemplate) option).

In the referenced template:

 .. Render the parent result.
 .. Include a [`ResultAttachments`](https://coveo.github.io/search-ui/components/resultattachments.html) component.

This component should reference other result templates to render child results and their attachments (see the [`resultTemplate`](https://coveo.github.io/search-ui/components/resultattachments.html#options.resulttemplate) and [`subResultTemplate`](https://coveo.github.io/search-ui/components/resultattachments.html#options.subresulttemplate) options).


**Example**

**A basic list layout result template to render multi-level folded conversations (that is, a parent message, its replies, and their attachments):**

```html
<!-- ... -->

<div class="CoveoFolding"></div>

<!-- ... -->

<script id="basic" class="result-template" type="text/html">
  <div>
    <div class="coveo-result-row">
      <div class="coveo-result-cell">
        <a class="CoveoResultLink"></a>
      </div>
    </div>
    <div class="coveo-result-row">
      <div class="coveo-result-cell">
        <div class="CoveoExcerpt"></div>
      </div>
    </div>
  </div>
</script>

<script id="folded-conversation" class="result-template" type="text/html">
  <div class="coveo-result-frame">
    <div class="CoveoTemplateLoader" data-template-id="basic"></div>
    <div class="coveo-result-row">
      <div class="coveo-result-cell">
        <span class="CoveoResultAttachments" data-result-template-id="folded-message" data-sub-result-template-id="folded-attachment"></span>
      </div>
    </div>
  </div>
</script>

<script id="folded-message" class="result-template" type="text/html">
  <div style="margin-left: 1em;">
    <div class="CoveoTemplateLoader" data-template-id="basic"></div>
  </div>
</script>

<script id="folded-attachment" class="result-template" type="text/html">
  <div style="margin-left: 2em;">
    <div class="CoveoTemplateLoader" data-template-id="basic"></div>
  </div>
</script>

<div class="CoveoResultList" data-layout="list">

  <!-- ... -->

  <script id="conversation" class="result-template" type="text/html" data-field-objecttype="Conversation">
    <div class="coveo-result-frame">
      <div class="CoveoTemplateLoader" data-template-id="basic"></div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
          <span class="CoveoResultFolding" data-one-result-caption="Conversation:" data-result-template-id="folded-conversation"></span>
        </div>
      </div>
    </div>
  </script>

  <!-- ... -->

</div>

<!-- ... -->
```

**Sample rendered result:**

## Common result folding questions

Here are some frequently asked question about result folding:

* [Why are result counts inaccurate with folding enabled?](https://docs.coveo.com/en/429/)
* [Why are some child items not folded?](https://docs.coveo.com/en/333/)

## What's next?

Review the following articles to learn more about working with search results:

- [Folding fields](https://docs.coveo.com/en/2718/)
- [Use many folding components](https://docs.coveo.com/en/2719/)
- [Example](https://docs.coveo.com/en/291/)