Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions samples/bot-all-cards/python/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
MicrosoftAppId=
MicrosoftAppPassword=
connectionName=
MicrosoftAppTenantId=
14 changes: 14 additions & 0 deletions samples/bot-all-cards/python/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# TeamsFx files
env/.env.*.user
env/.env.local
appManifest/build/

# python virtual environment
.venv/

# misc
.env
.deployment/

# tmp files
__pycache__/
6 changes: 6 additions & 0 deletions samples/bot-all-cards/python/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"recommendations": [
"TeamsDevApp.ms-teams-vscode-extension",
"ms-python.python"
]
}
69 changes: 69 additions & 0 deletions samples/bot-all-cards/python/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch App (Edge)",
"type": "msedge",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Python: Run App Locally"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Launch App (Chrome)",
"type": "chrome",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Python: Run App Locally"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Python: Run App Locally",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/app.py",
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
}
],
"compounds": [
{
"name": "Debug (Edge)",
"configurations": [
"Launch App (Edge)",
"Python: Run App Locally"
],
"preLaunchTask": "Prepare Teams App Resources",
"presentation": {
"group": "all",
"order": 1
},
"stopAll": true
},
{
"name": "Debug (Chrome)",
"configurations": [
"Launch App (Chrome)",
"Python: Run App Locally"
],
"preLaunchTask": "Prepare Teams App Resources",
"presentation": {
"group": "all",
"order": 2
},
"stopAll": true
}
]
}
3 changes: 3 additions & 0 deletions samples/bot-all-cards/python/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"debug.onTaskErrors": "abort"
}
78 changes: 78 additions & 0 deletions samples/bot-all-cards/python/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
// This file is automatically generated by Microsoft 365 Agents Toolkit.
// The teamsfx tasks defined in this file require Microsoft 365 Agents Toolkit version >= 5.0.0.
// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
{
"version": "2.0.0",
"tasks": [
{
"label": "Prepare Teams App Resources",
"dependsOn": [
"Validate prerequisites",
"Start local tunnel",
"Provision",
"Deploy"
],
"dependsOrder": "sequence"
},
{
// Check all required prerequisites.
// See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
"label": "Validate prerequisites",
"type": "teamsfx",
"command": "debug-check-prerequisites",
"args": {
"prerequisites": [
"m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the uploading permission.
"portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
],
"portOccupancy": [
3978 // app service port
]
}
},
{
// Start the local tunnel service to forward public URL to local port and inspect traffic.
// See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
"label": "Start local tunnel",
"type": "teamsfx",
"command": "debug-start-local-tunnel",
"args": {
"type": "dev-tunnel",
"ports": [
{
"portNumber": 3978,
"protocol": "http",
"access": "public",
"writeToEnvironmentFile": {
"endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
"domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
}
}
],
"env": "local"
},
"isBackground": true,
"problemMatcher": "$teamsfx-local-tunnel-watch"
},
{
// Create the debug resources.
// See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
"label": "Provision",
"type": "teamsfx",
"command": "provision",
"args": {
"env": "local"
}
},
{
// Build project.
// See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
"label": "Deploy",
"type": "teamsfx",
"command": "deploy",
"args": {
"env": "local"
}
}
]
}
160 changes: 160 additions & 0 deletions samples/bot-all-cards/python/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
---
page_type: sample
description: This sample demonstrates using a bot to send multiple card types in Microsoft Teams, including Adaptive, Hero, Thumbnail, and OAuth cards. It covers setup, deployment, and app installation instructions.
products:
- office-teams
- office
- office-365
languages:
- Python
extensions:
contentType: samples
createdDate: "2025-19-08"
urlFragment: officedev-microsoft-teams-samples-bot-all-cards-python
---

# Types of Cards

This Microsoft Teams bot sample demonstrates sending various card types, such as Adaptive, Hero, List, and Thumbnail cards. It includes detailed steps for setup, app deployment, and using Microsoft 365 Agents Toolkit for Visual Studio to run the app. Experience this versatile bot directly within your Teams client, complete with a manifest for easy uploading.

## Included Features
* Bots
* Adaptive Cards
* Hero Cards
* List Cards
* O365 Connector Cards
* List Cards
* Thumbnail Cards
* Collections Cards

## Interaction with app

![Types Of Cards](Images/TypesOfCards.gif)

## Try it yourself - experience the App in your Microsoft Teams client
Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Uploading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).

**Different types of cards:** [Manifest](/samples/bot-all-cards/csharp/demo-manifest/bot-all-cards.zip)
## Prerequisites

- Microsoft Teams is installed and you have an account
- [Python SDK](https://www.python.org/downloads/) min version 3.8
- [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [ngrok](https://ngrok.com/) latest version or equivalent tunnelling solution
- [Microsoft 365 Agents Toolkit for VS Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) or [TeamsFx CLI](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-cli?pivots=version-one)

## Run the app (Using Microsoft 365 Agents Toolkit for Visual Studio Code)

The simplest way to run this sample in Teams is to use Microsoft 365 Agents Toolkit for Visual Studio Code.

1. Ensure you have downloaded and installed [Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview)
1. Install the [Microsoft 365 Agents Toolkit extension](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) and [Python Extension](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
1. Select **File > Open Folder** in VS Code and choose this samples directory from the repo
1. Press **CTRL+Shift+P** to open the command box and enter **Python: Create Environment** to create and activate your desired virtual environment. Remember to select `requirements.txt` as dependencies to install when creating the virtual environment.
1. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
1. Select **Debug > Start Debugging** or **F5** to run the app in a Teams web client.
1. In the browser that launches, select the **Add** button to install the app to Teams.

> If you do not have permission to upload custom apps (uploading), Microsoft 365 Agents Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.

## Setup for bot

In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/azure/bot-service/bot-service-quickstart-registration).
- For bot handle, make up a name.
- Select "Use existing app registration" (Create the app registration in Microsoft Entra ID beforehand.)
- __*If you don't have an Azure account*__ create an [Azure free account here](https://azure.microsoft.com/free/)

In the new Azure Bot resource in the Portal,
- Ensure that you've [enabled the Teams Channel](https://learn.microsoft.com/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
- In Settings/Configuration/Messaging endpoint, enter the current `https` URL you were given by running the tunneling application. Append it with the path `/api/messages`

## Run the app (Manually Uploading to Teams)
## Setup for code
> Note these instructions are for running the sample on your local machine, the tunnelling solution is required because
the Teams service needs to call into the bot.

1) Clone the repository

```bash
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

2) Run ngrok - point to port 3978

```bash
ngrok http 3978 --host-header="localhost:3978"
```

Alternatively, you can also use the `dev tunnels`. Please follow [Create and host a dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) and host the tunnel with anonymous user access command as shown below:

```bash
devtunnel host -p 3978 --allow-anonymous
```

3) In a terminal, navigate to `samples/bot-all-cards/python`

4) Activate your desired virtual environment

5) Install dependencies by running ```pip install -r requirements.txt``` in the project folder.

6) Update the `config.py` configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. (Note the App Password is referred to as the "client secret" in the azure portal and you can always create a new client secret anytime.)

7) __*This step is specific to Teams.*__
- **Edit** the `manifest.json` contained in the `appManifest` folder to replace your Microsoft App Id (that was created when you registered your bot earlier) *everywhere* you see the place holder string `${{AAD_APP_CLIENT_ID}}` and `${{TEAMS_APP_ID}}` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
- **Zip** up the contents of the `appManifest` folder to create a `manifest.zip`
- **Upload** the `manifest.zip` to Teams (in the Apps view click "Upload a custom app")

8) Run your bot with `python app.py`

- If you are using the Microsoft 365 Agents Toolkit for Visual Studio Code, this step is done for you when you select **Debug > Start Debugging** or **F5**.

## Running the sample

**Install App:**

![InstallApp](Images/1.Install.png)

**Welcome Message:**

![Initial message](Images/2.Welcome.png)

**Adaptive Card:**

![Adaptive Card](Images/3.AdaptiveCard.png)

**Hero Card:**

![Hero Card](Images/4.HeroCard.png)

**List Card:**

![List Card](Images/5.ListCard.png)

**Office365 Card:**

![Office365 Connector Card](Images/6.Office365Card.png)

**SignIn Card:**

![SignIn Card](Images/8.SignInCard.png)

**Thumbnail Card:**

![Thumbnail Card](Images/9.ThumbnailCard.png)

**Collection Card:**

![Collection Card](Images/7.CollectionCard.png)

**Oauth Card:**

![Oauth Card](Images/8.SignInCard.png)

## Deploy the bot to Azure

To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](https://aka.ms/azuredeployment) for a complete list of deployment instructions.

## Further reading
- [Types Of Cards](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#thumbnail-card)
- [Send a hero card](https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=javascript#send-a-hero-card&preserve-view=true)

<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-all-cards-python" />
Loading