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, text, s3 uploaders, links and images. Component(s) or image(s) added will appear within each card.
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.
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.
Display the results from the execution of a function
Card lists can also be bound to the results of a component (that is in the Space). This allows you to display the data that is being returned.
Configuring your card list
Source
First, choose how you'll populate the data in this card list. Select "Function" and then the corresponding function you want to use (ie, "list users records"). Select "Binding" and then choose a component in the Space in order to have this card list display its results.
Text
Give your component a name (used to reference this card list within Internal. You can also customize the Card List Title - this text is displayed at the top of card list.
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.
Fields
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.
You can also click "+" and click Components to insert inline buttons, dynamic buttons, pop-up forms, text, 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, 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.
Sorting
Select the field to sort on, then choose "Ascending" or "Descending".
Parameters
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.
Filters
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:
- 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 other card lists:
- Detail: name of detail component -> data -> field
- Card list: name of card list component -> data -> field
Visibility Rules
You can create visibility rules that will determine when this component is visible and able to be interacted with.
Design
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.
