Overview

Card Containers 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 using data backed components, such as form fields and dynamic text.

How-to add a Card Container to a Screen

To prepare your screen we recommend adding a tile to hold the card container.

1. In the Serene Grey palette, expand the Card Containers section
2. Drag the Basic card container onto your screen in the desired location and give it a Name
   1. 
3. To set where the card container will get its information from, it must be backed by a   Table, this then allows the  Attributes from the table to be displayed
4. Click on the card container on the canvas to open its   Properties tab on the right
   1. Or click on the card container in the  Layers section
5. In the  Properties tab, 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, as illustrated below
   1.  
7. Click  Apply
8. The card container now has access to all the data in the table

If you want to style your card containers and organise your information in a specific way then can use Areas to control the layout and add your  Attributes into these areas. See Screen Structure. We will also cover a styled example later on this page.

Displaying Data in a Card

This is achieved by adding data backed components, such as form fields and dynamic text, and setting the attribute data they will display. When dragging attributes onto a card, they are displayed as dynamic text by default and the backing attribute is automatically set.

Adding Backing Attributes

1. To display the table data, the dynamic text fields on the card need to be associated with attributes on the table - these are called Backing Attributes
2. Right-click on card container on the canvas and select   Add Attributes to component 
3. In the Available Attributes selector that opens, drag the attribute(s) you wish to display onto the card container
   1. You can also add attributes via the  Layers by adding form fields or dynamic text from the palette and then right-clicking the field and selecting  Add Backing Attribute
   2. Or, you can right-click on card container and select  Show the Table Configuration, then drag attributes onto the card container
4. The attributes will appear as Dynamic Text - use the  Styles tab to change the appearance of the text, or see Changing or Creating a Palette
   1. If you want to change the Dynamic Text to a different palette item, right-click on it and select  Change Template

Changing Backing Attributes (Optional)

1. If required, the backing attributes can be changed
2. Right-click on the component and select  Change Backing Attribute
   1. You can also do this in the  Properties tab, under Backing Attribute, next to the Table Attribute field, select the  Change Backing Attribute button
3. 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 tab 
   1. 

Linking Views to Filter Results

Card containers can be linked with other types of Views, using background filters, to dynamically change the information displayed 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.

Using a Card Container Template - Contacts

In this example, we will add a Contacts Card Container template from the Palette to a screen that will display employee contact information.

1. In the Serene Grey palette, expand the Card Containers section
2. Drag the Contacts card container onto your screen in the desired location 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 display the attributes from a  Table, in the  Properties tab, under Basic Settings, click  Table, next to the Table drop down box
5. Drag a table from the  Repository into the Table drop-down box as illustrated below 
6. Click  Apply
7. Add backing attributes by right-clicking on the First Name dynamic text field and selecting  Add Backing Attribute
8. In the Available Attributes selector that opens, tick first_name and click the Add button
   1.  
   2. The field will now display this data on the screen
9. Repeat these steps for the LastName and Role dynamic text fields

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. These rely on the hidden fields for email, telephone and mobile being backed by data, search Hidden in the layer section and back these attributes with the appropriate fields. 

Card Containers in Serene Grey 

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

To see all of the features available in the Serene Grey palette, see Serene Grey Template Package.