This template showcases an app that send a message to Teams with Adaptive Cards triggered by a HTTP post request or timer schedule. You can further extend the template to consume, transform and post events to individual, chat or channel in Teams.
The app template is built using the TeamsFx SDK, which provides a simple set of functions over the Microsoft Bot Framework to implement this scenario.
Prerequisites
To run the notification bot template in your local dev machine, you will need:
- Node.js, supported versions: 16, 18
- An Microsoft 365 account for development
- Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or TeamsFx CLI
Note
Your app can be installed into a team, or a group chat, or as personal app. See Installation and Uninstallation.
-
First, select the Teams 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.
-
Press F5 to start debugging which launches your app in Teams using a web browser. Select
Debug (Edge)orDebug (Chrome). -
When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
-
If you select
Timer Trigger, wait for 30 seconds. If you selectHTTP Trigger, send a POST request tohttp://<endpoint>/api/notificationwith your favorite tool (likePostman)- When your project is running locally, replace
<endpoint>withlocalhost:3978 - When your project is deployed to Azure App Service, replace
<endpoint>with the url from Azure App Service
- When your project is running locally, replace
The bot will send an Adaptive Card to Teams:
| Folder / File | Contents |
|---|---|
teamsapp.yml |
Main project file describes your application configuration and defines the set of actions to run in each lifecycle stages |
teamsapp.local.yml |
This overrides teamsapp.yml with actions that enable local execution and debugging |
.vscode/ |
VSCode files for local debug |
src/ |
The source code for the notification Teams application |
appPackage/ |
Templates for the Teams application manifest |
infra/ |
Templates for provisioning Azure resources |
The following files can be customized and demonstrate an example implementation to get you started.
| File | Contents |
|---|---|
*Trigger/function.json |
Azure Function bindings for the notification trigger |
src/*Trigger.ts |
Notification trigger implementation |
src/teamsBot.ts |
An empty teams activity handler for bot customization |
src/adaptiveCards/notification-default.json |
A generated Adaptive Card that is sent to Teams |
src/cardModels.ts |
The default Adaptive Card data model |
The following files implement the core notification on the Bot Framework. You generally will not need to customize these files.
| File / Folder | Contents |
|---|---|
src/internal/initialize.ts |
Application initialization |
messageHandler/ |
Azure Function bindings to implement Bot protocol |
src/internal/messageHandler.tssrc/internal/responseWrapper.ts |
Bot protocol implementation |
The following files are project-related files. You generally will not need to customize these files.
| File / Folder | Contents |
|---|---|
.funcignore |
Azure Functions ignore file to exclude local files |
.gitignore |
Git ignore file |
host.json |
Azure Functions host file |
local.settings.json |
Azure Functions settings for local debugging |
package.json |
NPM package file |
There are few customizations you can make to extend the template to fit your business requirements.
- Step 1: Customize the trigger point from event source
- Step 2: Customize the notification content
- Step 3: Customize where notifications are sent
If you selected timer trigger, the default Azure Function timer trigger (src/timerTrigger.ts) implementation simply sends a hard-coded Adaptive Card every 30 seconds. You can edit the file *Trigger/function.json to customize the schedule property. Refer to the Azure Function documentation for more details.
If you selected http trigger, when this trigger is hit (via a HTTP request), the default implementation sends a hard-coded Adaptive Card to Teams. You can change this behavior by customizing src/*Trigger.ts. A typical implementation might make an API call to retrieve some events and/or data, and then send an Adaptive Card as appropriate.
You can also add any Azure Function trigger. For example:
- You can use an
Event Hubtrigger to send notifications when an event is pushed to Azure Event Hub. - You can use a
Cosmos DBtrigger to send notifications when a Cosmos document has been created or updated.
See Azure Functions supported triggers.
src/adaptiveCards/notification-default.json defines the default Adaptive Card. You can use the Adaptive Card Designer to help visually design your Adaptive Card UI.
src/cardModels.ts defines a data structure that is used to fill data for the Adaptive Card. The binding between the model and the Adaptive Card is done by name matching (for example,CardData.title maps to ${title} in the Adaptive Card). You can add, edit, or remove properties and their bindings to customize the Adaptive Card to your needs.
You can also add new cards if needed. Follow this sample to see how to build different types of adaptive cards with a list or a table of dynamic contents using ColumnSet and FactSet.
Notifications can be sent to where the bot is installed:
- Send notifications to a channel
- Send notifications to a group chat
- Send notifications to a personal chat
You can also send the notifications to a specific receiver:
Congratulations, you've just created your own notification! To learn more about extending the notification bot template, visit the documentation on Github. You can find more scenarios like:
- Customize storage
- Customize adapter
- Customize the way to initialize the bot
- Add authentication for your notification API
- Connect to existing APIs
- Frequently asked questions
Notification bot is compatible with other bot scenarios like command bot and workflow bot.
The command and response feature adds the ability for your application to "listen" to commands sent to it via a Teams message and respond to commands with Adaptive Cards. Follow the steps here to add the command response feature to your workflow bot. Refer the command bot document for more information.
Adaptive cards can be updated on user action to allow user progress through a series of cards that require user input. Developers can define actions and use a bot to return an Adaptive Cards in response to user action. This can be chained into sequential workflows. Follow the steps here to add workflow feature to your command bot. Refer the workflow document for more information.