Components

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.

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.

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.

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.

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.

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. 

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.