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, text, 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 function used to populate the card list’s data.
Then, give your card list a name. 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.
Here, you can add, hide, remove and rearrange fields that are displayed in each card within this component. Click a field to 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, click the eye icon to make it a hidden field. This means the field won’t be displayed in the card list, but you can still use the data in the field as inputs for another component.
Select the field to sort on, then choose "Ascending" or "Descending".
In some cases, the Function you're using may require a parameter to be specified. For example, you may need to pass in an ID in order to retrieve the data and display it in the card liist. Click on the parameter to provide a value.
You can set filters to change what's displayed in the card list, based on your criteria. Click “+” 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 other card lists:
You can create visibility rules that will determine when this component is visible and able to be interacted with.