Skip to content

Latest commit

 

History

History

README.md

Adaptive Card Dialog (Python)

Summary

This sample demonstrates how to open dialog boxes from Adaptive Cards in a Microsoft 365 Copilot declarative agent. Users can browse programming tutorials for Node.js, JavaScript, and Git, watch official Microsoft video tutorials embedded in dialog boxes, and take interactive quizzes with instant feedback—all within the Copilot interface.

The sample showcases Action.OpenUrlDialog from Adaptive Cards v1.5, Python Azure Functions backend, and API Plugin integration.

Adaptive Card Dialog

Version history

Version Date Author Comments
1.0 April 20, 2026 YugalPradhan31 Initial release

Prerequisites

Minimal Path to Awesome

  • Clone this repository (or download this solution as a .ZIP file then unzip it)
    git clone https://github.com/pnp/copilot-pro-dev-samples.git
    cd copilot-pro-dev-samples/samples/da-adaptive-card-dialog-python
  • Open the project in Visual Studio Code
  • Select the Microsoft 365 Agents Toolkit icon on the left in the VS Code toolbar
  • In the Account section, sign in with your Microsoft 365 account if you haven't already
  • Install Python dependencies:
    pip install -r requirements.txt
  • Create Teams app by selecting Provision in the Lifecycle section
  • Select Preview in Copilot (Edge) or Preview in Copilot (Chrome) from the launch configuration dropdown, or use Debug in Microsoft 365 Agents Playground for local testing
  • Once the agent is loaded, you can ask questions like:
    • "Show me programming tutorials"
    • "I want to learn JavaScript"
    • "Git tutorials for beginners"
  • The agent will respond with programming tutorials and you can interact with action buttons:
    • Watch Video - Opens YouTube embed in a large dialog
    • Interactive Quiz - Opens custom HTML quiz with instant feedback

Features

This sample illustrates the following concepts for Microsoft 365 Copilot declarative agents:

  • Action.OpenUrlDialog - Opens URLs in modal dialogs within Microsoft 365 Copilot without leaving the chat interface

What is Action.OpenUrlDialog?

Action.OpenUrlDialog is a new Adaptive Card action (v1.5+) that opens a URL in a modal dialog within Microsoft 365 Copilot, providing an integrated experience without leaving the chat interface.

Key Characteristics:

  • Opens URLs in modal dialogs within Copilot
  • Supports custom dialog sizes (width/height in px or predefined: small, medium, large)
  • Requires URLs to be whitelisted in validDomains in manifest.json
  • Works with YouTube embeds, custom HTML pages, and other web content

Interaction Flow

Step 1: Ask for tutorials

User: "Show me programming tutorials"

Step 2: Browse learning resources The agent returns adaptive cards showing:

  • Topic name (Node.js, JavaScript, Git)
  • Difficulty level and duration
  • Description
  • Two action buttons

Step 3: Watch Video Click "Watch Video" button:

  • Opens YouTube embed in a large dialog
  • Shows official Microsoft tutorial videos
  • Supports fullscreen playback

Step 4: Take Interactive Quiz Click "Interactive Quiz" button:

  • Opens custom HTML quiz in dialog (800px height)
  • 3 questions with multiple choice options
  • Instant feedback with explanations
  • Progress bar showing completion
  • Final score and key takeaways
  • Option to retake quiz

Help

We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

If you encounter any issues using this sample, create a new issue.

Finally, if you have an idea for improvement, make a suggestion.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Further reading