Post notifications to Microsoft Teams with .NET using Teams Toolkit for Visual Studio, now generally available

John Miller

Building and extending Microsoft Teams with apps can feel overwhelming. Or maybe you’re just learning that it’s possible to extend Teams with embedded UI content, custom search, and more.  There’s a lot to absorb around what Teams has to offer, and there are so many tools and technologies to help you build the right app. You might want to re-use what you’re familiar with, and if you’re anything like me, that’s .NET and Visual Studio. Keep reading this article to learn how simple it is to get started building apps for Teams using Teams Toolkit for Visual Studio.

Get Teams Toolkit for Visual Studio, now generally available

We are thrilled to announce the generally availability of Teams Toolkit for Visual Studio! If you don’t have it already, you need to download and install Visual Studio 2022. Once installed, modify your installation to include the ASP.NET web development workload and be sure to select the checkbox for Microsoft Teams development tools – that will add Teams Toolkit to Visual Studio. See the example below.

Image showing Visual Studio enterprise selecting Microsoft Teams development tools

Create your Microsoft Teams app project

After Teams Toolkit is installed, start by Creating a new project in Visual Studio 2022 and selecting the Microsoft Teams App project template.

 

Microsoft Teams Toolkit creating a new project in Visual Studio 2022

After you name the project and select next, you have a few application types to choose from. You can always adjust your Teams app later to include other options, but these will help you start in the right direction for the solution you have in mind.

For example, I want to post a message in a channel each day with my assigned GitHub issues, so I select the Notification Bot option with the Timer Trigger.

Create a new Teams application with Timer Trigger

 

Finish by selecting Create, and Visual Studio will load the solution.

Run and debug your app inside a Teams web client

At this point, only the solution is created. You still need to configure an app registration in the Teams organization in which you want to develop. Without the toolkit, you would need to navigate between the Teams Developer Portal, Azure Portal, and Bot Framework Portal to configure this app. You also need a way for Bot Framework (cloud resource) to communicate with your localhost project – typically done with a network tunneling solution. Currently, we recommend using ngrok. After you download and install ngrok, run ngrok http 5130 to start the tunnel.

Image of the installation of ngrok tunnel

 

Next, Teams Toolkit can help with the app registration and configuration between portals. Right-click on the Azure Function that was created and select the Teams Toolkit > Prepare Teams App Dependencies menu item.

Image of preparing Teams app dependencies

 

A dialog is displayed where you can decide which Teams organization this app will be developed in. Select the corresponding Microsoft 365 account for that organization. I’m using my free Microsoft 365 Developer Program account to develop this app in a pre-configured, sandboxed Teams organization.

Image of the Microsoft 365 account set up to create a Teams app

 

After selecting or adding your Microsoft 365 account, select Continue. The Output > Teams Toolkit window shows the progress of registering and configure the app.

Image showing output with Teams Toolkit window

Now that the app is registered in my Teams organization and configured in Bot Framework, I can run and debug using the Debug > Start Debugging menu or pressing the F5 key. Visual Studio will launch a browser that opens Teams with my app installation dialog.

GitHub notifications window launched from Visual Studio

 

Selecting the Add button will continue to add my app to Teams as a personal app – viewable only to me. I selected the Timer Trigger, which defaults to sending a notification every 30 seconds and can be customized.

Adding your app to Teams as a personal app

 

Customize the data

Now that I have my notification posting where I want, I can customize what is displayed. I’d like to show my assigned GitHub issues each morning as a reminder to triage them.

There are three files I’ve begun to customize, NotifyTrigger.cs, NotificationDefault.json, and NotificationDefaultModel.cs.

In NotifyTrigger.cs, I’m using octokit.net, a .NET library for interacting with the GitHub API to grab issues in a repository I want to monitor.

notifytimetrigger code

The NotificationDefault.json file is an Adaptive Card, which creates the UI for the notification you saw earlier. I’ve customized this so I can list each issue with a link to make it easy to triage.

The NotificationDefault.json file is an Adaptive Card, which creates the UI for the notification

Next, I modified the NotificationDefaultModel.cs to match my new Adaptive Card definition. This makes it nice to work with in C# and easily bind the values and data.

 

I can modify the cadence of this notification by changing the TimerTrigger attribute in NotifyTimerTrigger.cs.

public async Task Run([TimerTrigger("0 0 7 * * *")]

Now when I run my app again, I see my customized notification showing that I have two assigned issues in this repository!

Customized notification in two repositories

Create your notification

That’s it! By following along, you’ve seen all there is to creating a complete Teams application using .NET, Visual Studio, and Teams Toolkit.

In just a few edits I was able to set up a daily reminder for my assigned GitHub issues and display it how I wanted. From here, you could further extend this and collect info from more repositories or make a totally different type of notification.

Resources

I’d love to hear what you’re creating and how Teams Toolkit can help you build solutions – reach out on Twitter to chat so we can build better tools together!

Happy coding!

7 comments

Discussion is closed. Login to edit/delete existing comments.

  • Joenathan Edwards 0

    I like this, going to try and integrate it into our web app.

    • John MillerMicrosoft employee 0

      Great! Let me know how it goes – would love any feedback you have so we can improve.

  • Jefe 0

    Thanks for that overview. Can I also leverage actionable messages in that dialog? If yes, is there in-place update of cards supported in the chat?

    • John MillerMicrosoft employee 0

      The short answer is yes. Using the toolkit doesn’t impose any limitations on what’s possible with Teams Platform. The dialog is an Adaptive Card.

  • BET 0

    It’s great to see the Teams Toolkit continue to evolve because I am huge advocate for leveraging Teams as integration point for the enterprise applications. Although I think this is a useful post. It seems to be something of an over simplification of actual tasks that I initially encountered trying to build and publish to Teams in an Enterprise environment. I am not sure what it is about Teams, maybe it’s the mixed portal salad of my app, the developer portal, the bot portal, and the Azure portal that makes it feel like a lot of ceremony. Or maybe it’s the fact as illustrated here, that to send a basic adaptive card to a channel I have to think in terms of building a bot. In my experience, the most difficult things about Teams development is what you do at the beginning (registration) and what you have to do at the end (deployment). Seems the Toolkit is maturing to help with those scenarios.

  • Claudiu Viasu 0

    Great article!

    Do you think this can be modified to use GRAPH API to post notifications in TEAMS about the service health of MS Technologies?

  • dt 0

    On the ‘Microsoft 365 Account’ pop-up, 9 times out of 10 the Continue button is disabled for me on multiple PCs with Visual Studio 2022 version 17.3.4.

    Also, in case this means anything, the account that I select has the Microsoft red-green-blue-yellow icon with the following label:
    Microsoft account

    Right underneath it has a yellow exclamation mark saying ‘Re-enter your credentials’, but no matter how many times I re-enter my credentials, this warning never goes away.

Feedback usabilla icon