Components
/
Card List

Card List

Display the details of multiple records in a card list. Card lists are like a hybrid of a detail and table component, providing better readability while allowing users to scroll through many records.

Ways to use a card list

Add in-line actions or images

You can add functionality to your card list or show an image. You can add buttons, pop-up forms, dynamic buttons, calculated fields, s3 uploaders, links and images. Component(s) or image(s) added will appear within each card.

Example:
You have a card list that displays the Users of your product. You can add a user headshot image within each card. You could also add a “Suspend” button that calls a custom function to suspend this user.

Display records filtered by a value or another component

The records shown in card lists can be dynamically filtered by other components, like a table or filter component. You can also use a specific value to filter against.

Example:
1) You have a card list that shows Scooters used on your platform. You can set up a filter to only show Scooters whose battery level is below 20%, creating a list of scooters that need recharging.

2) You have a table of Companies and a card list of Employees within those companies. You can create a dynamic filter that binds the card list to the table, so that whenever a company is selected, the card list filters down to only those employees in the selected company.

We’ll walk through a step-by-step example below.

Provide data to other components

Components like a form, pop-up form, button or dynamic button can use the data in a card list component as inputs to their functions. A card list can also influence what is shown in tables, detail views and other card lists through filters.

Configuring your card list

Basics

First, select the resource whose data this table should show. The name you pick will be displayed on the card list (at top).

Optionally, you can name each card to give it a label. You'll want to use a variable related to each card (a name, primary key, or email address are commonly used). Click "Insert a variable", choose your card list component, and then the variable you want to use.

Example: You have a card list of Users and you want to use the FirstName field as the name of each card. You can insert a variable, choose the card component, and then select the FirstName field.

Filters

You can set filters to change what's displayed in the card list, based on your criteria. Click “Add filter” to add your first filter.

Each filter has a card list field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component. Dynamic filters are another way to bind components together to add functionality.

Preset filter example

You have a card list of Users which contains a last_login field. You want to only show users who have logged in in 2020 or later in your card list. You set up the following filter: last_login [is greater than or equal to] 1/1/2020.

Other examples of preset filters:

  • Battery_level [is less than] 20
  • Status [is not equal to] VIP
  • Email [contains] "@gmail.com"
  • LastName [is not null]

Dynamic filter examples

Let's use our example from above with a table of Companies and a card list of Employees within those companies.

Each company has an id that matches with the company id of an employee. Let's go to our card list settings to set up our dynamic filter:

Once this is done, selecting a company in the Company table will filter down the Employees card list.

Let's go through another quick example with filtering a card list of Scooters. Each scooter has a battery_level field which shows the percentage charge left. This time, instead of creating a preset filter to see if the battery level is less than 20, we want the user to enter in the desired threshold for battery level. To do this, we setup a filter component called BattLevel.

Then, we go to our Scooters card list settings and create a dynamic filter bound to this filter component:

Once this is setup, inputting a battery level into the filter component will filter the card list to only show Scooters with a battery level less than that value.

In addition to binding to tables and filters, you can also bind a card list with a detail view or othercard lists:

  • Detail: name of detail component -> data -> field
  • Card list: name of card list component -> data -> field


Fields

Here, you can add, remove and rearrange fields that are displayed in each card within this component. You can edit the display of these fields to add icons and pillboxes to your card list component.

You can also click "+Add fields" to insert inline buttons, dynamic buttons, pop-up forms, calculated fields, s3 uploaders, links and images within this card list:

Hidden Fields

If you don't want a user to see a data field, but still want to use its data in other components, remove the column and add it back as a hidden field. This means the column won’t be displayed in the table, but you can still use the data in the column as inputs for another component.

Example: You make Created at a hidden field for your “Users” card list. You can then create a button that will use the Created at value from the active record in the card list -- even though the user does not see the Created at field in the card list. 

How should the cards be sorted?

Select the field to sort on, then choose "Ascending" or "Descending".