Skip to main content

The Card Collection component for Retool Mobile

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

Demo

Settings​

Card Collection includes the following configurable options when building apps in the IDE.

Show on desktopShow on mobileMaintain space when hiddenMarginAlways show in edit modeStyles

Card Collection presents a list of options in the specified layout. Options are dynamically mapped from a query, transformer, or any other data source.

SizeElevationTypeDataEvent handlersShow on desktopShow on mobileOptionsMaintain space when hiddenMarginScrollEnable server side paginationAlways show in edit modeShow separatorStyles
Demo

Properties​

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

bodyByIndex​

string[]

A list of item captions, by index.

The size of cards to display if cardType is media.

Values
full

Display full-size cards.

half

Display half-size cards.

The card style to use.

Values
flat

No border or shadow.

elevated

Include a border and shadow.

The type of cards to display.

Values
compact

Display as a list.

media

Display as cards.

data​

any[]

The source data.

events​

object[]

A list of configured event handlers that trigger actions or queries.

Properties

event​

enum

The event type. Refer to the events section for a list of supported events.

method​

enum

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

The type of action to perform.

Values
datasource

Control query.

widget

Control component.

script

Run script.

state

Set variable.

localStorage

Set localStorage.

util

Perform utility action (e.g., Open URL or Confetti).

global​

boolean

Whether the object is globally scoped for use in all app pages.

​

boolean

Whether the component is visible.

id​

string

The unique identifier.

Whether the component is visible in the desktop layout.

Whether the component is visible in the mobile layout.

The configuration mode for option lists. Either dynamic for mapped options or static for manual options.

Values
dynamic

Options dynamically mapped from an array.

manual

Options manually configured in the IDE.

Whether the component takes up space on the canvas if hidden is true.

The amount of margin to render outside.

Values
4px 8px

Normal margin.

0

No margin.

pluginType​

string

The plugin type.

prefixIconByIndex​

enum[]

A list of icons for each item, by index.

Values

You can select an icon or dynamically set one with a valid icon key.

Demo

prefixIconColorByIndex​

string[]

A list of icon colors, by index.

prefixImageFitByIndex​

string[]

A list of image fit settings, by index.

prefixImageShapeByIndex​

string[]

A list of image shape settings, by index.

prefixImageSizeByIndex​

string[]

A list of image aspect rations, by index.

prefixImageSourceByIndex​

string[]

A list of image sources, by index.

prefixTypeByIndex​

string[]

A list of prefix types, by index.

The direction for which items scroll.

Values
horizontal

Scroll horizontally.

vertical

Scroll vertically.

selectedIndex​

number

The selected value, by index.

selectedItem​

object

The selected item.

selectedPageIndex​

number

The selected page, by index.

Whether to use server-side pagination.

Whether to remain visible in the editor if hidden is true.

Whether the show a separating line betweeen items.

style​

object

Custom style options in use. Not all style options may be available for all components.

subtitleByIndex​

string[]

A list of item body text, by index.

subtitleLengthByIndex​

number[]

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

suffixIconByIndex​

enum[]

A list of icons for each item, by index.

Values

You can select an icon or dynamically set one with a valid icon key.

Demo

suffixTextByIndex​

string[]

A list of suffix text, by index.

suffixTypeByIndex​

string[]

A list of action types, by index.

suffixValueByIndex​

boolean[]

A list of boolean values, by index.

titleByIndex​

string[]

A list of item titles, by index.

Methods​

JavaScript API methods for interacting with Card Collection. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

setHidden​

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

cardCollection.setHidden(hidden)
Parameters

​

boolean

Whether the component is visible.

Events​

Events are triggered by user interactions, such as clicking a button or entering a value. Use event handlers to trigger queries or other actions in response to events.

buttonPress​

The item is clicked or pressed.

checkboxPress​

A checkbox is toggled.

press​

The item is clicked or pressed.

switchPress​

A switch is toggled.