FormsModel-driven app

Card form

A compact layout that shows each row as a card, used in subgrids and in narrow or mobile views.

Show me in the demoOpens the demo app with this component highlighted.

What it is

A card form defines how one row looks as a card: an avatar with initials, a title and a few lines of text. The Used by accounts subgrid on the accelerator form is shown as cards, each with the account name as the title and the city and telephone number below it. The data is the same as in a grid. Only the layout is compact.

When to use it

Use it where a row must be recognisable at a glance and space is tight, which is typical for phones, tablets and narrow subgrids. When people need to compare columns, sort or select many rows, a Read-only grid works better.

Licensing and configuration

No extra licence. Create the form on the table (Forms, then New form, then Card form) and keep the number of columns low so it reads well on small screens. A card form is not added to the app like other forms. To use a custom card form, add the Read-only Grid control to the table's controls and set its Card Form property. When a Power Apps grid becomes narrow, it switches to a card list on its own.

Pitfalls

  • In a card list the Power Apps grid has no sorting, no Select all and no jump bar. Create views with the sort order you need.
  • Images on the row do not show in a card list. Only the initials appear.
  • Context menu commands have no icons in a card list.
  • Too many columns defeat the purpose. Two lines of detail is usually enough.

Try it in the demo

  1. Open the first accelerator and scroll to the Used by accounts subgrid.
  2. Read the cards: the title is the account name, the lines are city and telephone.
  3. Compare them with the Related menu entry for the same accounts, which uses a grid.

The demo sets this subgrid to cards. In the product the switch also happens when the control gets narrow.