page_type	languages	products	name	urlFragment	description	extensions
sample	typescript	office-teams office	Adaptive Card Notification	officedev-teamsfx-samples-bot-adaptive-card-notification	This is a sample which shows how to send notification with different adaptive cards using Bots.	createdDate 2022-03-28

Getting Started with Adaptive Card Notification

Adaptive Card Notification provides an easy way to send notification in Teams. The front end is built with Adaptive Cards to render notification details, the bot framework service is an Azure Bot Service handling search queries and communication between the server workload and the client and the backend is hosted in Azure Functions providing notification trigger and message handler.

This sample illustrates

• How to build notification bot for your app.
• How to send Adaptive Cards in Teams.

Prerequisite to use this sample

• Node.js, supported versions: 18, 20, 22
• A Microsoft 365 tenant in which you have permission to upload Teams apps. You can get a free Microsoft 365 developer tenant by joining the Microsoft 365 developer program.
• Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI
• An Azure subscription

Minimal path to awesome

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using Teams Toolkit CLI tool, refer to Try the Sample with Teams Toolkit CLI

Run the app locally

1. Clone the repo to your local workspace or directly download the source code.
2. Open the project in Visual Studio Code.
3. Open Debug View (Ctrl+Shift+D) and select "Debug in Teams (Edge)" or "Debug in Teams (Chrome)" in dropdown list.
4. Press "F5" to open a browser window and then select your package to view adaptive card notification sample app.
5. Get the endpoint of the trigger. For debug, <endpoint> is http://localhost:3978 by default. It can be found in BOT_ENDPOINT of the file env/.env.local.
6. Send a POST request to the http trigger, you will receive the adaptive card message in Teams. The trigger can be addressable with the following route:
   • Default adaptive card: <endpoint>/api/default-notification
   • Columnset adaptive card: <endpoint>/api/columnset-notification
   • Factset adaptive card: <endpoint>/api/factset-notification
   • List adaptive card: <endpoint>/api/list-notification
   • Adaptive card that mentioned a particular user: <endpoint>/api/mention-notification

Deploy the app to Azure

1. Open Teams Toolkit, and sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar.
2. Open the command palette and select Teams: Provision.
3. Once provision is completed, open the command palette and select Teams: Deploy.

Preview the app in Teams

1. Once deployment is completed, you can preview the app running in Azure. In Visual Studio Code, open Run and Debug and select Launch Remote (Edge) or Launch Remote (Chrome) in the dropdown list and Press F5 or green arrow button to open a browser.
2. Get the endpoint of the trigger. The <endpoint> can be found in BOT_FUNCTION_ENDPOINT of the file env/.env.dev.
3. Send a POST request to the http trigger, you will receive the adaptive card message in Teams. The trigger can be addressable with the following route:
   • Default adaptive card: <endpoint>/api/default-notification
   • Columnset adaptive card: <endpoint>/api/columnset-notification
   • Factset adaptive card: <endpoint>/api/factset-notification
   • List adaptive card: <endpoint>/api/list-notification
   • Adaptive card that mentioned a particular user: <endpoint>/api/mention-notification

Advanced usage of this sample

1. Update the userId and userName to the user who you want to mention in the file mentionNotificationHttpTrigger.ts.

    const data: MentionData = {
    ......
    userId: "<user-id>",
    userName: "<user-name>",
    ......
    };

2. Use Azure Blob Storage to persist notification connections This sample provides an implementation of NotificationTargetStorage at src/storage/blobsStore.ts, which connects to Azure Blob Storage to persist notification connections.

   To try it, uncomment the notification.store settings of your bot in src/internal/initialize.ts, then enter your own connection string and container name.

   ...
     notification: {
       enabled: true,
       store: new BlobStore("{your-connection-string}", "{your-container-name}"),
     },
   ...

3. Author an adaptive card

   • The default adaptive card template is in notification-default.json. For more details of the adaptive card schema, you can refer to https://adaptivecards.io/explorer/AdaptiveCard.html.
   • The columnset adaptive card template is in notification-columnset.json. For more details of the adaptive card schema, you can refer to https://adaptivecards.io/explorer/ColumnSet.html.
   • The list adaptive card is in notification-list.json. For more details of the adaptive card schema, you can refer to https://adaptivecards.io/explorer/ColumnSet.html.
   • The factset adaptive card template is in notification-factset.json. For more details of the adaptive card schema, you can refer to https://adaptivecards.io/explorer/FactSet.html.
   • The mention adaptive card template is in notification-mention.json. For more details of the adaptive card schema, you can refer to https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cconnector-html#mention-support-within-adaptive-cards.

Version History

Date	Author	Comments
May 23, 2022	XiaofuHuang	update to support Teams Toolkit V4.0.0
Dec 12, 2022	XiaofuHuang	update to support Teams Toolkit v5.0.0

Feedback

We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!