{"id":11173,"date":"2022-08-09T10:00:18","date_gmt":"2022-08-09T17:00:18","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=11173"},"modified":"2022-08-18T10:28:10","modified_gmt":"2022-08-18T17:28:10","slug":"post-notifications-to-microsoft-teams-with-net-using-teams-toolkit-for-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/post-notifications-to-microsoft-teams-with-net-using-teams-toolkit-for-visual-studio\/","title":{"rendered":"Post notifications to Microsoft Teams with .NET using Teams Toolkit for Visual Studio, now generally available"},"content":{"rendered":"

Building and extending Microsoft Teams with apps can feel overwhelming. Or maybe you\u2019re just learning that it\u2019s possible to extend Teams with embedded UI content, custom search, and more.\u00a0 There\u2019s 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\u2019re familiar with, and if you\u2019re anything like me, that\u2019s .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.<\/p>\n

Get Teams Toolkit for Visual Studio, now generally available<\/h2>\n

We are thrilled to announce the generally availability of Teams Toolkit for Visual Studio! If you don\u2019t have it already, you need to download and install Visual Studio 2022<\/a>. 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<\/strong> \u2013 that will add Teams Toolkit to Visual Studio. See the example below.<\/p>\n

\"Image<\/a><\/h2>\n

Create your Microsoft Teams app project<\/h2>\n

After Teams Toolkit is installed, start by Creating a new project<\/strong> in Visual Studio 2022 and selecting the Microsoft Teams App<\/strong> project template.<\/p>\n

 <\/p>\n

\"Microsoft<\/a><\/p>\n

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.<\/p>\n

For example, I want to post a message in a channel each day with my assigned GitHub issues, so I select the Notification Bot <\/strong>option with the Timer Trigger.<\/strong><\/p>\n

\"Create<\/a><\/p>\n

 <\/p>\n

Finish by selecting Create<\/strong>, and Visual Studio will load the solution.<\/p>\n

Run and debug your app inside a Teams web client<\/h2>\n

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 \u2013 typically done with a network tunneling solution. Currently, we recommend using ngrok. After you download and install ngrok<\/a>, run ngrok http 5130<\/code> to start the tunnel.<\/p>\n

\"Image<\/a><\/p>\n

 <\/p>\n

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

\"Image<\/a><\/p>\n

 <\/p>\n

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\u2019m using my free Microsoft 365 Developer Program<\/a> account to develop this app in a pre-configured, sandboxed Teams organization.<\/p>\n

\"Image<\/a><\/p>\n

 <\/p>\n

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

\"Image<\/a><\/p>\n

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

\"GitHub<\/a><\/p>\n

 <\/p>\n

Selecting the Add <\/strong>button will continue to add my app to Teams as a personal app \u2013 viewable only to me. I selected the Timer Trigger, which defaults to sending a notification every 30 seconds and can be customized.<\/p>\n

\"Adding<\/a><\/p>\n

 <\/p>\n

Customize the data<\/h2>\n

Now that I have my notification posting where I want, I can customize what is displayed. I\u2019d like to show my assigned GitHub issues each morning as a reminder to triage them.<\/p>\n

There are three files I\u2019ve begun to customize, NotifyTrigger.cs<\/code>, NotificationDefault.json<\/code>, and NotificationDefaultModel.cs<\/code>.<\/p>\n

In NotifyTrigger.cs<\/code>, I\u2019m using octokit.net, a .NET library for interacting with the GitHub API to grab issues in a repository I want to monitor.<\/p>\n

\"notifytimetrigger<\/a><\/p>\n

The NotificationDefault.json<\/code> file is an Adaptive Card, which creates the UI for the notification you saw earlier. I\u2019ve customized this so I can list each issue with a link to make it easy to triage.<\/p>\n

\"The<\/a><\/p>\n

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

 <\/p>\n

I can modify the cadence of this notification by changing the TimerTrigger<\/code> attribute in NotifyTimerTrigger.cs.<\/p>\n

public async Task Run([TimerTrigger(\"0 0 7 * * *\")]<\/code><\/p>\n

Now when I run my app again, I see my customized notification showing that I have two assigned issues in this repository!<\/p>\n

\"Customized<\/a><\/p>\n

Create your notification<\/h2>\n

That\u2019s it! By following along, you\u2019ve seen all there is to creating a complete Teams application using .NET, Visual Studio, and Teams Toolkit.<\/p>\n

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.<\/p>\n

Resources<\/h2>\n