Deck

For every record in a model, the Deck component will create an individual card, each a template that can be configured within the App Composer. These cards visually highlight a model’s data and allow you to set interactions.

Using the Deck component

In contrast to a standard list view, which provides a catalog of all data, or a detail view, which lets end users drill down into any one record, the Deck component allows you to surface important information and place it prominently on the page.

Fill the Deck

The Deck formats every record in a model as a card. Once you Add a Deck component to your page, you can drag and drop components into that Deck to configure the format of the cards.

Note

Add a component to the first card in the deck and it will populate the other cards.

  • Ensure that components within the Deck are accessing the correct model to receive the target data.
  • Modify the components’ properties, and add any desired actions to the components.

Experiment with components to determine which work best to display the selected data. Good options include:

  • Header component: Provides a title for each of the cards, typically based on record’s Name field.
  • Form component: Since each card is an individual record, the Form component is best suited for editing data in cards.
  • Image component: if your object has image fields (for example, company logos, or pictures of contacts), use this component to display those images in the deck.

Note

Add an interaction to the component that opens a modal with more information when the end user clicks or swipes the image.

Every Deck includes a header and a footer. These sections include:

  • Header
    • the Deck’s title
    • the Save and Cancel buttons
    • a search box
  • Footer
    • a picklist to set number of records displayed per page
    • an indicator of which set of rows are showing and links to jump to the next or last increment

The component’s header and footer can be hidden using properties in the Basic tab.

Filtering a Deck

You can add a filter to the Deck using either the Filter Set component, or the filter option on the List itself (Add features > Deck filter). Learn more about creating, configuring, and conditionally rendering filters.

How to limit data in the Deck

There are many ways to take advantage of the Deck component, but it offers fewer ways to limit incoming data. If you’re using the Deck to surface a subset of information found elsewhere on the page—for example, from a model used in another component—adding a condition to that model will limit the records for both components.

Want to limit only the data coming into the Deck?

  • Duplicate that model using the Clone button next to the model name, and give the model a new name.
  • Add a condition that limits the data to the subset for the Deck component.

Use this new model exclusively with the Deck.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties