Creating Interactive Dashboards with Copilot Studio

Interactive dashboards in Copilot Studio enhance the user experience by allowing real-time data visualization, user input collection, and dynamic responses. By integrating Power BI, Adaptive Cards, and Power Automate, you can build a dashboard that users can interact with within chat interfaces like Microsoft Teams, Web Chat, or Embedded Apps.

This guide will walk you through the entire process, step by step, with detailed best practices and examples.

Step 1: Understanding the Capabilities of Interactive Dashboards in Copilot Studio

1. What Makes a Dashboard Interactive?

A well-designed Copilot Studio dashboard includes:
✅ Data visualization (charts, tables, or KPIs).
✅ User inputs (dropdowns, buttons, or text fields).
✅ Live data updates (via API connections or Power Automate).
✅ Actionable insights (allowing users to filter, drill down, or take actions).

2. Tools Needed to Build an Interactive Dashboard

Copilot Studio (formerly Power Virtual Agents) for chatbot interaction.
Power BI for real-time data visualization.
Adaptive Cards for presenting dashboard elements.
Power Automate to fetch and update data dynamically.
Dataverse (optional) for storing and retrieving structured data.

Step 2: Designing the Dashboard Structure

Before implementation, define what data will be displayed and how users will interact with it.

1. Identify Dashboard Metrics

Sales performance (e.g., Revenue, Orders).
Customer support insights (Tickets Resolved, Pending Cases).
Website analytics (Traffic, Bounce Rate).

2. Define User Interactions

Allow users to filter data (e.g., “Show me sales for Q1”).
Enable button-based actions (e.g., “Export report”).
Provide text input-based queries (e.g., “Get customer details”).

3. Choose the Right UI Elements

Feature	UI Element
Key Performance Indicators (KPIs)	Text Blocks with bold values
Charts & Graphs	Embedded Power BI reports
Filters	Dropdowns & Quick Reply buttons
Data Tables	Adaptive Cards with ColumnSets

Step 3: Implementing Interactive Dashboard Elements in Copilot Studio

1. Creating an Adaptive Card for Dashboard UI

Adaptive Cards allow you to display and collect data dynamically in Copilot Studio.

Example JSON for an Adaptive Card Dashboard

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "📊 Sales Dashboard",
      "size": "Large",
      "weight": "Bolder"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "50%",
          "items": [
            {
              "type": "TextBlock",
              "text": "Total Revenue",
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "$1,200,000",
              "size": "ExtraLarge",
              "color": "Good"
            }
          ]
        },
        {
          "type": "Column",
          "width": "50%",
          "items": [
            {
              "type": "TextBlock",
              "text": "Pending Orders",
              "weight": "Bolder"
            },
            {
              "type": "TextBlock",
              "text": "450",
              "size": "ExtraLarge",
              "color": "Attention"
            }
          ]
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "View Detailed Report",
          "data": {
            "action": "view_report"
          }
        },
        {
          "type": "Action.Submit",
          "title": "Filter Data",
          "data": {
            "action": "filter_data"
          }
        }
      ]
    }
  ]
}

✅ Breakdown of Features in the Card:

ColumnSet ensures responsive layout for KPIs.
Bold TextBlocks improve readability.
Action Buttons allow interaction (e.g., viewing detailed reports).

2. Fetching Live Data with Power Automate

To make the dashboard dynamic, we connect it to live data sources (e.g., Power BI, SharePoint, Dataverse).

Steps to Fetch Data via Power Automate:

Open Power Automate → Create a new flow.
Select Trigger: “When a message is received in Copilot Studio”.
Add Power BI action: “Get dataset values”.
Use a Compose action to format the retrieved data.
Send the response back as an Adaptive Card.

Example Power Automate JSON Response

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Updated Sales Data",
      "weight": "Bolder",
      "size": "Medium"
    },
    {
      "type": "TextBlock",
      "text": "Total Revenue: $1,500,000"
    },
    {
      "type": "TextBlock",
      "text": "Orders Completed: 720"
    }
  ]
}

This ensures the dashboard updates dynamically whenever a user requests fresh data.

3. Embedding Power BI Reports in Copilot Studio

For detailed charts and graphs, embed a Power BI dashboard link in the chatbot.

Steps to Embed Power BI Dashboard:

In Power BI, go to your report → Click “Embed” → Choose “Microsoft Teams”.
Copy the secure Power BI link.
In Copilot Studio, create a message with a hyperlink: Click [here](https://powerbi.com/report/sales) to view the detailed dashboard.
Users can now open the full dashboard from the chatbot.

Step 4: Enhancing the Dashboard UX with Filters and Actions

1. Adding Filter Options with Dropdowns

Allow users to filter data dynamically.

Example Dropdown in an Adaptive Card

{
  "type": "Input.ChoiceSet",
  "id": "filter",
  "label": "Select a region:",
  "choices": [
    {
      "title": "North America",
      "value": "NA"
    },
    {
      "title": "Europe",
      "value": "EU"
    }
  ]
}

This lets users choose a region, and the chatbot updates the dashboard accordingly.

2. Using Quick Reply Buttons for Actions

Instead of long messages, use buttons for user actions.

Example:

✅ Bot: “Would you like to export this report?”
[📥 Export PDF] [📊 View Chart]

Reduces user effort and improves engagement.

Step 5: Testing and Deployment

Test on Different Devices (desktop, mobile, Teams).
Check API performance (ensure data fetch is fast).
Gather user feedback (add survey links for improvement).

Building Powerful Interactive Dashboards in Copilot Studio

By following this step-by-step guide, you can create a dynamic, interactive, and user-friendly dashboard that integrates with Power BI, Power Automate, and Adaptive Cards.

Key Takeaways:

✅ Use Adaptive Cards for displaying data elegantly.
✅ Fetch live data using Power Automate.
✅ Embed Power BI for detailed visualizations.
✅ Enhance UX with filters, dropdowns, and buttons.
✅ Optimize performance by reducing unnecessary API calls.

Would you like a customized dashboard template for your specific use case? Let me know!

Creating interactive dashboards with Copilot Studio