Overview

Card Containers are used to organise and display information, such as text, images and buttons, in a visually appealing and structured way. 

Card containers are backed by a table to display the data from the table.

How-to add a Card Container to a Screen

In this example, we will add a card container that will display employee contact information.

Note, for this example, a Blank-Column tile has already been added to the screen. 

1. In the palette, expand the Card Containers section
2. Drag the Contacts card container onto your screen and give it a name
   1. 
3. Click on the card container to open its  Properties tab on the right
   1. Or click on the card container in the  Layers section on the left
   2. 
4. To tell the card container where to get its information from, the card container must be backed by a  Table - this then allows the data from the table to be displayed
5. In the Properties, under Basic Settings, click  Table, next to the Table drop down box
6. Drag a table from the Repository into the Table drop down box
   1.  
   2. Click  Apply
7. To display the table data, the text fields on the card need to be associated with attributes on the table
8. Right-click on First Name and select Add Backing Attribute
9. In the Available Attributes selector that opens, tick first_name and click the Add button
   1.  
   2. The form field will now display this data in the first_name attribute on the screen
10. Repeat these steps to set the backing attribute of last_name to the Last Name field and the attribute of Role to the Role field
    1. Note: Backing attributes can be changed by either right-clicking on the form field and selecting Change Backing Attribute, or click on the form field on the canvas, then in the Properties, under Backing Attribute, select a new Table Attribute
       1. 
11. Switch to  Application Mode or  Lock the screen to see all of the cards with the chosen data displayed

The Contacts Card Container contains three buttons, which can have actions configured to perform specific activities, such as calling a phone number or sending an email. See 9. Grid Actions and In-Grid Editing.

Card containers can be linked with other types of Views, using background filters, to dynamically change the information on the card container depending on the records selected in the other View. For example, on a screen with a grid of Companies and a card container of Employees, linking the content will ensure that only employees show on the card container that are associated with the selected company in the grid. See 6. Linking Content on a Screen.

Card Containers in Serene Grey

The following Card Containers can be found in the Serene Grey palette.