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.
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.
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.
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.
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:
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:
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.
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.
How should the cards be sorted?
Select the field to sort on, then choose "Ascending" or "Descending".