Dynamic cards based on Dataverse data

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):

1. Go to the app studio.
2. In the left panel, click Data > Add Data.
3. 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.

1. Insert a Gallery (Vertical or Horizontal layout).
2. Set the Items property to your Dataverse table:

Items = Customers

3. 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

1. Customer Profiles Dashboard
2. Sales Opportunities Summary
3. Support Tickets with Status
4. Product Catalog with Ratings
5. Employee Directory with Filters

---

Bonus: Add a Filter Dropdown

Add a ComboBox or Dropdown to filter cards:

Items = Filter(Customers, Status = ddStatus.Selected.Value)