atomic-folded-result-list

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'

fieldsToInclude

fields-to-include

A list of non-default fields to include in the query results, separated by commas.

string

imageSize

image-size

The expected size of the image displayed in the results.

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

'icon'

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

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(render: (result: FoldedResult) => HTMLElement) => 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

What's Next for Me?