Card List Component

A card list lets you display multiple data records in a scrollable list. Each "card" represents an individual data record and allows users to quickly view fields within a number of data records all at once. You can think of them as a combination of a table component and detail component.

Card List Configuration

Basics

What data should this card list display? Select the data source and resource whose data you want displayed in this card list. 


Name this card list: Give your card list a name for use within Internal.


Name each card: In this section, you can set up the name (label) that appears at the top of each card. Usually, this will be a variable value. Click on "Insert a variable" to choose a component to provide the variable's value. For card lists, it's often a good idea to use a field from the same card component. 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

These filters will determine which records are displayed in this card list component.  

Click “+ Add filter” to add your first filter. You can use the trash can icon to delete a filter, and add more filters by using the button below. For each filter, you must define the field, operation, and value:


Field: In the first input, select the field that you want to filter on.


Operation: In the second input, you’ll choose how you want to compare values and select whether you are comparing against a fixed value or a dynamic value that comes from another component.

Operators - “equal to”, “is not equal to”, “greater than”, “greater than or equal to”, “less than”, “less than or equal to”, “is null” (preset filter-only), “is not null” (preset filter-only), and “contains” (string-only)  


Value: For a preset filter, input the comparison value here. In the case of a dynamic filter, you will see a dropdown list of other components in the space.

To filter your card list component based on the value a user inputs into a filter component, simply select the name of the filter component and then choose “Value”. Once saved, users will be able to enter a value (ex.. ACME) into your filter component (ex. Search by Company Name) and the card list component will automatically be filtered to only show those records (e.g. where Company Name column is equal to ACME).

To filter your card list component based on a row selected in a table , select the name of the table component, then choose “Selected Row”, “Data'', and then finally the specific field to provide the comparison value (this can include hidden fields in that table). Whenever a user selects a row in the table, your card list component will automatically be filtered.

To filter your card list component based on a detail component, select the name of the detail component, then choose "Data" and then finally the specific field to provide the comparison value. This means that this card list component will get filtered (change) when the detail component it is bound to changes (because of that component's filter settings).


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 components in-line:

Dynamic Button

Button

Pop-up Form

S3 Uploader

Image

Calculated Field

You can freely drag-and-drop to re-arrange the order of these fields and components in any way you wish.

Hidden Fields

Hidden fields allow other components or filters to use its values, while still hiding that field from display within the card list component. Click "+Add hidden fields" to do so (you must have available fields to add).

How should the cards be sorted?

Here you can choose how the cards within this component are sorted. First select the field that you want to sort on, then choose "Ascending" or "Descending".