Cards for Power Apps
A card is one record in a tile: a bordered container with rounded corners that holds labels, pills, a progress bar, avatars and buttons at fixed positions, so it moves and resizes as a unit. Paste one on a screen for a detail view, or inside a gallery template for one card per record. Dynamic Form Card is free; the others need a Components, Ultra, Team or Lifetime plan.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Dynamic Form Card | Free | Classic, Modern | A short form in a card: text fields and two buttons | Title, Subtitle, Form Fields (Label and Placeholder per field, Add Field), Primary and Secondary button texts |
| Employee Card | Paid | Classic, Modern | Employee Card: a directory tile with three figures | Name, Title, Figures (label and value, up to 3), two button texts, parts |
| Project Card | Paid | Classic, Modern | Project Card: a cover image, progress and metrics | Title, Budget pill, Description, Progress, Metrics (up to 3), Button text, parts |
| Modern Form | Paid | Classic, Modern | A form with mixed field types | Title, Form Fields (Text Input, Date Picker or Dropdown, then Label), Submit and Cancel texts |
| Approval Card | Paid | Classic, Modern | One item in an approver queue: expense, leave, purchase | Type, Title, Description, Submitted, Requester, Department, Amount label and Amount, Reject and Approve texts, parts |
| Asset Card | Paid | Classic, Modern | An inventory or IT asset register with a photo and a status | Tag number, Status, Name, Category, Location, Assigned to, Button text, parts |
| Contact Card | Paid | Classic, Modern | A people directory or a CRM detail screen | Name, Role, Company, Email, Phone, Location, two button texts, parts |
| Task Card | Paid | Classic, Modern | A Kanban board or a task list | Title, Description, Priority, Due date, Subtasks done and total, Assignees (initials), Comments, parts |
| Timesheet Card | Paid | Classic, Modern | One person's week with a total against the target | Week label, Status, Target hours, Entries (day, project, hours, up to 7), Button text, parts |
| Inspection Card | Paid | Classic, Modern | Safety rounds, vehicle checks and quality audits | Title, Inspector, Location, Date, Result, Checklist (up to 6, each OK or not), Number of photos, two button texts, parts |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Cards.
To copy a variant into Power Apps Studio, follow Getting Started.
What's in the card
Eight of the cards (all but the two forms) have a What's in the card section at the top of Settings, one switch per optional part: the requester block or the description on the Approval Card, the photo or the owner row on the Asset Card, the subtasks bar or the comment count on the Task Card, and so on. A part that is off is not generated at all, and the parts below it move up so the card closes the gap. When one of two side-by-side buttons is off, the other takes the full width. Switch parts off before you copy rather than deleting controls in Studio afterwards.
After you paste
Every control keeps a readable name with the card's prefix: lblApprovalTitle, btnApprovalApprove, lblContactEmail, lblTaskDue, conTaskProgressFill. Names follow your prefix settings. To show one card per record, paste it inside a gallery template and point each label at a ThisItem column:
// Approval Card inside a gallery over Requests
lblApprovalTitle.Text = ThisItem.Title
lblApprovalRequesterName.Text = ThisItem.Requester.DisplayName
lblApprovalAmount.Text = Text(ThisItem.Amount, "[$-de-DE]#,##0.00 €")
btnApprovalApprove.OnSelect = Patch(Requests, ThisItem, { Status: "Approved", DecidedBy: User().Email })
Progress bars are two containers, a track and a fill; set the fill's Width to Parent.Width * ThisItem.Done / ThisItem.Total. Pills are a small container with a label inside; a Switch(ThisItem.Status, ...) on the container's Fill and the label's Color gives a live status colour.
The Contact Card's buttons already work: Email runs Launch("mailto:" & lblContactEmail.Text) and Call runs Launch("tel:" & lblContactPhone.Text). On a desktop browser a tel: link needs a calling app such as Teams; on a phone it always dials.
The two forms keep their fields the old way. Dynamic Form Card stores what the user typed in colFormValues as { id, value }, one row per field once it has been typed in, so check IsBlank(LookUp(colFormValues, id = 1).value) before you Patch a required column. Modern Form's fields are real controls, txtField1, dtpField2, conDropdown3, read directly; its dropdown ships with placeholder Items, so replace them with your list or a Choices() call.
Good to know
- Photos and cover images are Image controls showing
SampleImage. SetimgAssetPhoto.ImageorimgProjectCover.Imageto a URL or an image column of your data source. - Two cards of the same kind on one screen get a numbered suffix on the second; rename them so your formulas stay readable.
- Every card offers Classic and Modern on the YAML tab with the same names and the same layout. The Modern YAML uses modern Button, Text, Text input, Dropdown and Date picker only, and draws its icons as SVG images, since Power Apps has no modern icon control. Fills follow the brand colour from your global settings, and the light and dark toggle in the component header switches the palette.
- Several cards are the seed of a full app: the Approval Card of the Approvals app, the Asset Card of the Inventory Manager, the Task Card of the Project Management board. See Full Apps.
Related
Open the category at Cards. For a form that slides in from the edge of the screen, see Drawer; for single fields to build your own form, see Input Fields.