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

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

Image Removed

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 ContactsBasic card container onto your screen in the desired location and give it a Name
   Image Removed
   1. Image Added
3. To set where the card container will get its information from, it must be backed by a  

   Insert excerpt
   _tables _tables nopanel true

   , this then allows the

   Insert excerpt
   _attributes _attributes nopanel true

    from the table to be displayed
4. Click on the card container on the canvas to open its 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. Image Removed
   To set where the card container will get its information from, it must be backed by a
5. In the

   Insert excerpt
   _tablesproperty_tabs _property_tablestabs nopanel true

   , this then allows the attributes from the table to be displayedIn 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

   Insert excerpt
   _repository _repository nopanel true

    into the Table drop-down box, as illustrated below
   1. Image RemovedImage Added 
7. Click 

   Insert excerpt
   _save _save nopanel true

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

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. There are two ways to add backing attributes, either via the form field or via the Right-click on card container on the canvas and select  

   Insert excerpt
   _attributes_layersicon _attributes_layersicon nopanel true

   To add a backing attribute via the form field, right-click on First Name and select Add Backing Attribute Add Attributes to component 
3. In the Available Attributes selector that opens, tick first_name and click the Add button
   1. Image Removed 
   2. The form field will now display this data on the screen
   Alternatively, to add a backing attribute via drag the attribute(s) you wish to display onto the card container
   1. You can also add attributes 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

1. 1. Image Removed

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

1. 1.  by adding form fields or dynamic text from the palette and then right-clicking the field and selecting 

      Insert excerpt
      _attributes_add_backing _attributes_add_backing nopanel true

   2. Or, you can right-click on card container and select 

      Insert excerpt
      _show_table_configuration _show_table_configuration nopanel true

      , then drag attributes onto the card container
2. The attributes will appear as Dynamic Text - use the

   Insert excerpt
   _

1. property_

1. tabs _

1. property_tabs name style nopanel true

1.  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 

      Insert excerpt
      _template_

1. 1. change _template_

1. 1. change nopanel true

Changing Backing Attributes (Optional)

1. If required, the backing attributes can be changed
2. Right-click on the form field and select Change Backing AttributeAlternatively, click on the form field on the canvas, then in the Propertiescomponent and select 

   Insert excerpt
   _attributes_change _attributes_change nopanel true

   1. You can also do this in the

      Insert excerpt
      _property_tabs _property_tabs nopanel true

      , under Backing Attribute, next to the Table Attribute field, select the
   Change Backing Attribute
   1.  

      Insert excerpt
      _attributes_change _attributes_change nopanel true

       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

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    
   1. Image Modified

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.

Card Containers in Serene Grey

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

Basic

A standard card container with no styling that displays the content of each row of data on a backing table.

Content is displayed by adding fields or dynamic text to a card.

Contacts

A card container with icon and button styling that displays the content of each row of data on a backing table.

Content is displayed by adding fields or dynamic text to a card.

Buttons can be configured to perform actions, such as calling a phone number or creating a new email.

A card container with button styling, displaying data from another table.

A card container that shows one card, displaying data from another table.

A card container that shows one card with an expandable area.

A card container that displays an aggregate view to group repeated values to display as a list.

Users can then select records to filter an existing grid or card component.

A card container that displays a counter that can generate a total. It provides a circular card component that can be used to display a numeric value. This component requires a backing aggregate view that returns a single value in an attribute called "Count".

As above. Includes a label field.

A card container that displays a counter that can generate 3 totals, with label fields. It provides 3 circular counters in a single card component that can be used to display numeric values.

This component requires a backing aggregate view that returns three total values. By default these are called "Count" but the names will need to be changed to display the values shown in the backing view.

A card container that displays a basic Kanban board, designed to display the statuses of different tasks. 

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.

Image Added

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. Image Added
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. Image Added
4. To display the attributes from a

   Insert excerpt
   _tables _tables nopanel true

   , in the

   Insert excerpt
   _property_tabs _property_tabs nopanel true

   , under Basic Settings, click

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   , next to the Table drop down box
5. Drag a table from the

   Insert excerpt
   _repository _repository nopanel true

    into the Table drop-down box as illustrated below 
6. Click 

   Insert excerpt
   _save _save nopanel true

7. Add backing attributes by right-clicking on the First Name dynamic text field and selecting 

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

8. In the Available Attributes selector that opens, tick first_name and click the Add button
   1. Image Added 
   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. 

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