atomic-folded-result-list

This is for:

Developer

The atomic-folded-result-list component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (i.e., to the result, child and grandchild).

Properties

Property Attribute Description Type Default

childField

child-field

The name of the field that uniquely identifies a result within a collection.

string | undefined

collectionField

collection-field

The name of the field on which to do the folding. The folded result list component will use the values of this field to resolve the collections of result items.

string | undefined

density

density

The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.

"comfortable" | "compact" | "normal"

'normal'

imageSize

image-size

The expected size of the image displayed in the results.

"icon" | "large" | "none" | "small"

'icon'

numberOfFoldedResults

number-of-folded-results

The initial number of child results to request for each folded collection, before expansion.

Example:

For an email thread with a total of 20 messages, using the default value of 2 will request the top two child messages, based on the current sort criteria and query, to be returned as children of the parent message. The user can then click to expand the collection and see the remaining messages that match the current query (i.e., not necessarily all remaining 18 messages). Those messages will be sorted based on the current sort criteria (i.e., not necessarily by date). See the atomic-load-more-children-results component. For more info on Result Folding, see [Result Folding](https://docs.coveo.com/en/1884).

number

2

parentField

parent-field

The name of the field that determines whether a certain result is a top result containing other child results within a collection.

string | undefined

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

default

The default slot where the result templates are inserted.

Methods

setRenderFunction

Sets a rendering function to bypass the standard HTML template mechanism for rendering results. You can use this function while working with web frameworks that don’t use plain HTML syntax, e.g., React, Angular or Vue.

Do not use this method if you integrate Atomic in a plain HTML deployment.

Signature: setRenderFunction(resultRenderingFunction: ItemRenderingFunction) => Promise<void>

Returns: Promise<void>

Shadow Parts

Part Description

outline

The element displaying an outline or a divider around a result

result-list

The element containing every result of a result list