What do you get from a Microsoft Teams App template in Visual Studio?

5 min read.

This article explains briefly what the different Microsoft Teams App templates in Visual Studio are for and what capabilities do they come with. It’s a lot to wade through, but I hope this article is able to explain the basics.

Background

Table of Contents

Lately, I’ve been playing around with Blazor and Teams again. This time around, Microsoft is really playing ball and the templates in Visual Studio seem great and actually useful – the new “Microsoft Teams App” template in Visual Studio even comes with Blazor! As long as you’re building a “Tab”, that is 😁

… and if you have installed Teams Toolkit (Microsoft Teams development tools) for Visual Studio, of course :)

(this is where you find Teams Toolkit in Visual Studio installer!)

That said, I was left wondering… What is it that you get when you get started with a “Microsoft Teams App” template?

Well – I found out so you don’t have to!

What you get with the “Microsoft Teams App” in Visual Studio?

First, let’s get started with the project – at this point, you won’t get any difficult or non-standard questions.

But then comes the difficult stuff!

When you’re through the easy stuff, you’ll need to choose what is it exactly, that you’ll start to develop. Namely, you get to choose between these options:

Tab
Echo Bot
AI Chat Bot
AI Assistant Bot [Preview]
Chat Notification Message
Chat Command
Sequential Workflow in Chat
Search Results from API
Custom Search Results
Collect Form Input and Process Data
Link Unfurling
Empty Teams App

These templates map to different Teams app capabilities, and some of these capabilities are exposed as tags for each template in the wizard – as you can see in the picture.

But what are these “tabs”, “message extensions” and “bots”, really?

Explaining the different Microsoft Teams app capabilities (“extension types”)

Understanding all the different ways you can extend Microsoft Teams gets a bit messy quite quickly. Some extensions apply to multiple situations – you can have a Bot attend your meeting and interact with you using Adaptive Cards and Message extensions, which might even fire off an outgoing Webhook!

These different capabilities overlap and the development experience varies – but below, you’ll see Microsoft’s simplification of use cases and how they map to different capabilities.

After this general overview, we’ll take a look at the capabilities explained in the graphic, and map them to different templates available in Visual Studio.

Confused yet? Great! Let’s take a deep breath, and take a look at the 3 “tags” that Microsoft used earlier to describe the app capabilities (let’s ignore anything non-Teams related for the time being):

Tabs, Message Extensions and Bots. What are they?

Tabs are client-aware webpages embedded in Microsoft Teams, Outlook, and Microsoft 365

They allow you to add custom web content or functionality directly within Teams
Tabs can be added to channels, group chats, or personal spaces
There are two types of tabs:
- Static Tabs: Display static content
- Configurable Tabs: Allow users to set up the tab

Message Extensions are “shortcuts” for inserting app content or acting on a message without navigating away from the conversation.

They appear in the compose box and allow users to query or post information to and from an external service/integration.

Message extensions can be used to:

Insert content like images, files, or cards into a message
Perform actions like creating tasks or sending messages

And all of this happens seamlessly in the context of your ongoing chat (be it with a colleague, a bot or even with yourself!)

Bots (or “chatbots”) are conversational agents that interact with users through text-based messages

In short, this means that:

They can perform tasks like answering questions, providing information, or automating repetitive tasks
Bots can be used in (“invited to”) channels, group chats, or direct messages
They can also interact with users during meetings and calls

These 3 “main” extension types can benefit from the other capabilities Microsoft so greatly outlined in the graphics earlier:

Message Extensions very often use Adaptive Cards
You can use Message Extensions when chatting with Bots
Incoming Webhooks might trigger a Bot to perform something or update an Adaptive Card in a Message Extension
Outgoing Webhooks will cause a Bot to call external APIs and react to the responses in some way – perhaps by posting rich data as an Adaptive Card in its response
An action performed by a user in a Tab might trigger an Activity Feed update to be posted (via Graph API), and an Incoming Webhook to fire triggering an Adaptive Card to be posted to a channel…

I guess you already caught my drift – it can get a bit messy with many overlapping capabilities being used!

But what are you getting with these templates?

In general, each template comes with the dependencies for either Blazor (and ASP.NET development in general), Bot Framework or AdaptiveCards preinstalled, and a TeamsApp project preconfigured for Teams Toolkit to be able to help you in an easy “right-click Publish” -workflow.

For a Tab extension, you’ll also get Graph SDK (which can be a bit painful, but makes authentication easy), TeamsFx (which makes interacting with Teams easy) and optionally Azure.Identity (enables SSO).

And even if enabling ClickOps in the spirit of “Right-click Publish” might set the wrong precedent, it DOES make it really easy to set up a dev environment, even in the corporate wonderland of Microsoft licensing (but if you don’t have Teams license in your dev tenant… Better test your app in production then, because you ain’t going to get that license!)

Oh, and what is “the Microsoft 365 app” that shows up as a tag in the Tab template? 😅

Well, it is exactly what the name suggests. The “new” smartphone app called “Microsoft 365” supports Teams Tabs and TeamsFx enables easy SSO even there. And the same thing might work in Outlook, too (although I assume there will be extra hoops to jump through).

Develop once, run everywhere, right..?

In other news…

I’m back to speaking at conferences after quite a pause (my last actual public speaking gig was before COVID and the World War 3), and I’m heading to Scottish Summit in Aberdeen (trustworthy sources tell me it is located in Scotland) later this week. If you happen to be in the region (Edinburgh on Thursday, Aberdeen Thursday-Saturday), come say hi!

Below’s the session description:

🚀 Join this exciting session on creating dynamic and engaging Teams apps using the powerful Blazor web framework. Whether you’re a seasoned developer or just dipping your toes into the world of Teams app development, this session will equip you with new knowledge and tools for the craft – hopefully with a new twist!

In this demo-heavy session, we’ll explore how to create, debug, and deploy your own Blazor-based Teams apps. All without writing a single line of JavaScript!

Get ready to elevate your collaboration game and enhance productivity within Microsoft Teams! 🔥

Who is this session for?
💻 Developers: Whether you’re a .NET enthusiast or a (recovering) web developer, you’ll get something out of this session.
🤿 Blazor-Curious: If you’ve been eyeing Blazor but haven’t taken the plunge just yet, dive in!
📱 Teams App Enthusiasts: If you’re passionate about improving Teams functionality, consider this your opportunity to level up! Or to take a side-step, perhaps — because sometimes that’s what keeps things interesting, right?

Key Takeaways:
🌐 Blazor Unleashed: Discover how Blazor seamlessly integrates with Teams, allowing you to build interactive web UIs using C#.
📑 Creating Your First App: Learn how to set up a Blazor Teams app.
🕵️‍♂️ Debugging Like a Pro: Master the art of debugging your Blazor tab app within Visual Studio. Say goodbye to JavaScript-induced headaches!
☁️ Deployment Made Easy: Explore deployment options, from local testing to Azure cloud hosting.

Don’t miss out! Let’s explore new ways to extend the application platform where all the users are practically spending their days now. 🚀🔥

That’s it for this week – hope to see some of y’all in Scotland!

References

https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/toolkit-v4/teams-toolkit-fundamentals-vs
https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/understand-use-cases

Author
Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)