Overview

Card Containers are used to organise and display information, such as text, images and buttons, in a visually appealing and structured way.  They work in a similar way to grids but offer greater visual flexibility.

Card containers are backed by a table and this is used to display the data from the tableusing data backed components such as form fields and dynamic text.

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 in the desired location and give it a name Name
   1. 
3. Click on the card container to open its

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    on the right
   1. Or click on the card container in the

      Insert excerpt
      _layers _layers nopanel true

       section on the left
   2. 
4. To tell set where the card container where to will get its information from, the card container it must be backed by a

   Insert excerpt
   _tables _tables nopanel true

    - this , this then allows the data attributes from the table to be displayed
5. In the Properties, under Basic Settings, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   , next to the Table drop down box
6. Drag a table from the Repository into the Table drop-down box as illustrated below
   1.  
7. Click 

   Insert excerpt
   _save _save nopanel true

Adding and Changing Backing Attributes

Adding Backing Attributes

1. To display the table data, the text fields on the card need to be associated with attributes on the table - these are called Backing Attributes
2. There are two ways to add backing attributes, either via the form field or via the 

   Insert excerpt
   _layers _layers nopanel true

3. To add a backing attribute via the form field, right-click on First Name and select Add Backing Attribute
4. 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 on the screen
5. Alternatively, to add a backing attribute via the 

   Insert excerpt
   _layers _layers nopanel true

   , click the chevrons to display the LastName dynamic text field
   1. Right-click on LastName and select Add Backing Attribute 
   2. In the Available Attributes selector, tick last_name and click the Add button

6. Repeat the above steps to set the backing attribute of Role to the Role field

7. Switch to 

Changing Backing Attributes (Optional)

1. If required, the backing attributes can be changed
2. Right-click on the form field and select Change Backing Attribute
3. Alternatively, click on the form field on the canvas, then in the Properties, under Backing Attribute, next to the Table Attribute field, select the Change Backing Attribute button
4. In the Available Attributes selector, either tick the attribute and select Add, or drag the attribute across into the Table Attribute field in the Properties 
   1. 

Configuring Buttons and Linking Views

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.