The card view type enables you to display content and actions for a single element using a format that is similar to card components in Material Design. You choose a layout and configure the content blocks.

The following provides an example of the Nearby card view from the Facility Inspections template.

Use a card view in your app as described in the following sections:

See also Views: The Essentials for more information about managing views.

Get started with an app template

Many of the app templates demonstrate how to use the card view, such as the following templates:

Creating a card view

To create a card view:

  1. Create a view, as described in Creating a view.

  2. Configure the card view, as follows:

  3. When you are done, save your changes by selecting one of the following:

    • Save - Save your changes

    • Save & verify data - Save your changes and verify the data defined.

    • Save & notify users - Save your changes and notify users.

Configuring the card view options

Configure the card View options by using the settings described in the following tables.

Setting

Description

Sort by

Sort the rows by one or more columns.

Click Add and select the column name and whether to sort in Ascending or Descending order. Repeat to configure additional sort by rules.

Group by

Group rows by the values in one or more columns.

Click Add and select the column name and whether to sort in Ascending or Descending order. Repeat to configure additional sort by rules.

Group aggregate

Display a numeric summary of the rows in each group.

Select the format to use for the display from the drop-down list.

Layout

Configure the layout for the card view.

Configuring the layout

Configure the layout of the card view as described in the following sections.

Choosing a layout

When creating and configuring your card view, you need to choose the layout that you want to use to display the content.

Card views support the following layouts.

Layout

Example

List

Compact view of a card that includes a thumbnail image, title, and subtitle, and supports up to three actions in the Actions drop-down menu.

Photo

Photo card that includes an image, title, and subtitle, and supports a single action when clicking the card.

Backdrop

Backdrop photo card that includes an image and title, and supports a single action when clicking the card.

Large

Full view of a card that includes an image, title, subtitle, header, subheader, and description and supports up to four actions, displayed using text (2) and icons (2).

Configuring the content blocks

Based on the layout that you choose there are a number of content blocks available that you can configure. The following figure highlights the full set of content blocks available when you choose the large layout.

The following table summarizes the content blocks that are available in each layout.

Configure the content blocks available for your layout as described in the following sections:

Configuring text blocks

Text blocks in a card view layout include title, subtitle, header, subheader, and description.

To configure a text block:

  1. In the Layout structure, click the text block that you want to configure, such as Title goes here.

  2. Select a column in the Column to show drop-down list that will be used to populate the text block. To hide the text block, select None.

For example, the following shows the steps to configure the card view title in a list layout. In this case, the Inspection Point ID is used to populate the title block.

Configuring image blocks

Image blocks in a card view layout include the main and thumbnail images.

To configure an image block:

  1. In the Layout structure, click the image block that you want to configure.

  2. Select a column in the Column to show drop-down list that will be used to populate the image block. To hide an image block, select None and skip any remaining steps.

  3. If available, select one of the following Image Fit options to configure the image display:

    • Cover - Uses the image as a background for the whole view (great for pattern images and some photos)

    • Fit - Scale the image to fit inside the header area (great for logos)

    • Fill - Crop the image to fit the area (great for photos)

  4. If available, select the Image Shape, square or round.

For example, the following shows the steps to configure the card view thumbnail image in a list layout. In this case, the Point Image is used to populate the image block.

Configuring action blocks

Configure action blocks that are displayed as text, icon, or menu items.

To configure an action block:

  1. In the Layout structure, click the text, icon, or menu item action block that you want to configure.

  2. Select the action that you want to execute when the text, icon, or menu item is selected in the On Click drop-down list. To hide an action block, select None.

Note: For icon action blocks, you select the icon when configuring the action, as described in Actions: The Essentials.

For example, the following shows the steps to configure an icon action block in a large layout. In this case, the Inspect action is invoked when the checkmark icon is clicked.

Did this answer your question?