Creating dynamic cards based on Dataverse data is an essential feature when building interactive and visually engaging business apps in PowerApps or Model-Driven Apps. These dynamic cards can display relevant real-time data like customer profiles, case summaries, sales metrics, or inventory overviews, pulled directly from your Microsoft Dataverse tables (formerly Common Data Service).
This step-by-step guide (approx. 1000 words) will walk you through the implementation process, customization, design considerations, and best practices to build visually rich, dynamic cards that update automatically as your data changes.
Step-by-Step Guide: Building Dynamic Cards from Dataverse
Step 1: Understand Your Use Case
Before building, clearly define:
- What kind of data should be shown? (Contacts, Leads, Products, Cases, etc.)
- What fields are most important to highlight?
- Should cards be clickable or interactive?
- Do you need filtering, sorting, or categorization?
Example: You want to display customer cards with name, profile photo, recent purchase, and status.
Step 2: Connect to Your Dataverse Table
In PowerApps (Canvas App):
- Go to the app studio.
- In the left panel, click Data > Add Data.
- Search for your Dataverse table (e.g.,
Customers
) and connect it.
Step 3: Insert a Gallery Control
Cards are typically created using Gallery controls, which support horizontal or vertical layout with repeating data items.
- Insert a Gallery (Vertical or Horizontal layout).
- Set the
Items
property to your Dataverse table:
Items = Customers
- The gallery will auto-populate fields based on the connected table.
Step 4: Customize the Card UI Inside the Gallery
Within each gallery item (card), add controls such as:
- Image: for profile pictures
- Label: for Name, ID, Status, Date, etc.
- Icons: to represent categories or flags
- Buttons: for actions (View, Edit, Delete)
Example Layout:
+------------------------+
| [Customer Image] |
| Name: John Smith |
| Status: Active |
| Last Order: 12 Apr |
| [View] [Edit] |
+------------------------+
PowerApps Example Controls:
Image = ThisItem.'Profile Photo'
Label = ThisItem.'Full Name'
Label = "Status: " & ThisItem.Status
Button OnSelect = Navigate(CustomerDetailScreen, {record: ThisItem})
Step 5: Make Cards Dynamic Based on Conditions
Add conditional formatting for things like:
- Status colors
- High-priority flags
- Highlight overdue records
Example: Color based on status
Color = If(ThisItem.Status = "Active", Green, Red)
Visibility Example:
Visible = ThisItem.'Last Order Date' < Today()
Step 6: Filter and Sort the Gallery Dynamically
Allow users to filter or sort cards based on input fields or buttons.
Filter Example:
Items = Filter(Customers, StartsWith('Full Name', TextSearchBox1.Text))
Sort Example:
Items = Sort(Customers, 'Last Order Date', Descending)
Combined Example:
Items = SortByColumns(
Filter(Customers, StartsWith('Full Name', TextSearchBox1.Text)),
"Status", Ascending
)
Step 7: Responsive Design for Cards
To ensure cards display well across devices:
- Use Relative Width/Height percentages
- Enable Wrap count for responsive columns
- Add scrollable containers for mobile use
- Avoid absolute positioning
Example:
Width = Parent.TemplateWidth * 0.95
Step 8: Make Cards Interactive
Add buttons or icons inside cards for quick actions like:
- Edit Record
- Send Email
- Open in Detailed View
Example Button OnSelect:
OnSelect = Navigate(EditCustomerScreen, {record: ThisItem})
Or, use patch:
OnSelect = Patch(Customers, ThisItem, {Status: "Closed"})
Step 9: Use Icons for Better UX
Use icons to make data visual (from the icon gallery):
- Stars for rating
- Flags for status
- Mail for messages
- Checkmarks or warnings
Dynamic Icons Example:
Icon = If(ThisItem.Priority = "High", IconFlag, IconCircle)
Color = If(ThisItem.Priority = "High", Red, Gray)
Step 10: Advanced Customization with JSON (Model-Driven Apps)
In Model-Driven Apps, dynamic cards can be customized using the Power Apps component framework (PCF) or JSON formatting (for views and columns).
Example JSON formatting to color a column based on a value:
{
"elmType": "div",
"style": {
"background-color": "=if([$Status] == 'Active', '#d4edda', '#f8d7da')",
"padding": "10px",
"border-radius": "6px"
},
"children": [
{
"elmType": "span",
"txtContent": "[$FullName]"
}
]
}
Best Practices
Aspect | Best Practice |
---|---|
Performance | Use Delegation -friendly filters and avoid large datasets in memory. |
Design | Maintain consistent padding, spacing, and color usage across cards. |
Naming | Use meaningful names for controls (e.g., lblName , imgPhoto ). |
Interaction | Minimize the number of on-click actions per card to avoid clutter. |
Responsive Layout | Test on different screen sizes and adjust gallery wrap count. |
Use Cases for Dynamic Cards
- Customer Profiles Dashboard
- Sales Opportunities Summary
- Support Tickets with Status
- Product Catalog with Ratings
- Employee Directory with Filters
Bonus: Add a Filter Dropdown
Add a ComboBox or Dropdown to filter cards:
Items = Filter(Customers, Status = ddStatus.Selected.Value)