The Card Collection component for Retool Mobile

A content area to display items in a grid or list.

Version: Cloud and 3.185 Edge

Demo

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

bodyByIndex

A list of item captions, by index.

Type	array
Array values	string
Mutability	Read-only

---

cardSize

The size of cards to display if cardType is media.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description full Display full-size cards. half Display half-size cards.

---

cardStyle

The card style to use.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description flat No border or shadow. elevated Include a border and shadow.

---

cardType

The type of cards to display.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description compact Display as a list. media Display as cards.

---

data

The data.

Type	array
Format	Custom data
Mutability	Control Usage Retool UI Inspector Method copyToClipboard()

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Hidden Method setHidden()
Default	false

Examples

true

---

itemMode

The configuration mode for options.

Type	string
Mutability	Control Usage Retool UI Inspector > Content > Options
Allowed Values	Value UI Option Description dynamic Mapped Options dynamically mapped from an array. static Manual Options manually configured in the IDE.
Default	dynamic

Examples

"dynamic"

---

prefixIconByIndex

A list of icons for each item, by index.

Type	array
Array values	string
Mutability	Read-only
Default	[]

Examples

["/icon:bold/shopping-gift", "/icon:bold/interface-user-single", "/icon:bold/interface-align-layers-1"]

---

prefixIconColorByIndex

A list of icon colors, by index.

Type	array
Array values	string
Mutability	Read-only

Examples

#FF0000

#00FF00

#0000FF

---

prefixImageFitByIndex

A list of image fit x-settings, by index.

Type	array
Array values	string
Mutability	Read-only

---

prefixImageShapeByIndex

A list of image shape x-settings, by index.

Type	array
Array values	string
Mutability	Read-only

---

prefixImageSizeByIndex

A list of image aspect rations, by index.

Type	array
Array values	string
Mutability	Read-only

---

prefixImageSourceByIndex

A list of image sources, by index.

Type	array
Array values	string
Mutability	Read-only

---

prefixTypeByIndex

A list of prefix types, by index.

Type	array
Array values	string
Mutability	Read-only

---

scrollDirection

The direction for which items scroll.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description horizontal Scroll horizontally. vertical Scroll vertically.

---

selectedIndex

The selected values, by index.

Type	number
Format	Integer
Mutability	Read-only
Default	[]

Examples

["Value 1", "Value 2"]

---

selectedItem

The selected item.

Type	string | number | boolean | object | array
Format	Custom data
Mutability	Read-only
Default	null

Examples

{"id": "1", "name": "Item 1"}

---

selectedPageIndex

The selected page, by index.

Type	number
Mutability	Read-only

---

serverPaginated

Whether to use server-side pagination.

Type	boolean
Mutability	Control Usage Retool UI Inspector

---

showSeparatorByIndex

(No description available)

Type	unknown
Mutability	Read-only

---

subtitleByIndex

A list of item body text, by index.

Type	array
Array values	string
Mutability	Read-only

---

subtitleLengthByIndex

A list of maximum lines to display values, by index.

Type	array
Array values	number
Mutability	Read-only

---

suffixIconByIndex

A list of icons for each item, by index.

Type	array
Array values	string
Mutability	Read-only
Default	[]

Examples

["/icon:bold/shopping-gift", "/icon:bold/interface-user-single", "/icon:bold/interface-align-layers-1"]

---

suffixTextByIndex

A list of suffix text, by index.

Type	array
Array values	string
Mutability	Read-only

---

suffixTypeByIndex

A list of action types, by index.

Type	array
Array values	string
Mutability	Read-only

---

suffixValueByIndex

A list of boolean values, by index.

Type	array
Array values	boolean
Mutability	Read-only

---

titleByIndex

A list of item titles, by index.

Type	array
Array values	string
Mutability	Read-only

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

cardCollection.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

cardCollection.setHidden(hidden)

Parameters

hidden

boolean

Whether this object is hidden from view.

Examples

Hide cardCollection.

cardCollection.setHidden(true);

Unhide cardCollection.

cardCollection.setHidden(false);

---

cardCollection.setSelectedPageIndex()

Set the selected page index.

Definition

cardCollection.setSelectedPageIndex(index)

Parameters

index

number

The index of an item.

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description
Button Press	A button is pressed.
Checkbox Press	A checkbox is pressed.
Press	An item is pressed.
Switch Press	A switch is toggled.