ROBERT SCHOUTEN

In a comment on LinkedIn about my blog post about Microsoft Teams app setup policies, my old colleague Renso Jacobs asked me if I could write a blog post about how easy it is to create a Microsoft Teams App. Well here it is Renso!

What are Microsoft Teams Apps?

Microsoft Teams is a collaboration workspace in Office 365 that integrates with apps and services people use to get work done together. The Microsoft Teams developer platform makes it easy for developers to integrate their own apps and services to improve productivity, make decisions faster, provide focus (by reducing context switching), and create collaboration around existing content and workflows. Apps built on the Microsoft Teams platform are bridges between the Teams client and your services and workflows; bringing them directly into the context of your collaboration platform. More info can be found here.

Get started

There is some really good Microsoft documentation on how to get started with building Microsoft Teams apps. There are samples and templates available to get you started. There are also Software Development Kits (SDKs) and tools available. If you prefer to use TypeScript, React and Node as your primary technologies, I can really recommend the Yeoman generator for Microsoft Teams to scaffold your project and get you started. This generator can create a project structure for you for all kinds of Microsoft Teams apps (Tabs, Bots, Extensions, web hooks, etc.).

But before you can start building your App, you should decide what kind of App you’ll need. Please review the extensible points in the Microsoft Teams client and start to map your use cases to the Teams app capabilities.

Easy you said?

Ok, I understand the above could be a bit overwhelming and can sound a bit complex. If not, use the above. If so, read on…

So are there no easier ways to create a Teams app? Yes there are. Let’s assume you would like to create some user interface to present/collect some data and inform users about events that happen on this data. The data is stored in a SharePoint Online list.

Power Apps and Power Automate

An easy way to get started with a no code/low code option is to use the Power Apps and Power Automate platform and add the Power App as an app to Microsoft Teams:

• Use Power Apps to create the user interface to view/add/edit/delete data in a SharePoint (example).
• User Power Automate with a trigger on this SharePoint list and use the Teams action ‘Post a message as the Flow bot to a channel’ or the other available actions to inform your users within Teams (get started with Power Automate).
• Export the Power App as a Microsoft Teams App and upload it to the Teams App catalog.

With the above options you can create a Personal Tab or a Channel Tab within Microsoft Teams to view your Power App within Teams, collect the data, store it in SharePoint and inform your users. All of this from within 1 application: Microsoft Teams.

An advantage of this approach is that you don’t have to worry about the hosting of your application. You can use what is already available to you, the Power platform and don’t have to use for instance Azure to host your application.

SharePoint Framework (SPFx) and Power Automate

Another easy way to get started is using the SharePoint Framework (SPFx) in combination with Power Automate. If you would like more control and flexibility then Power Apps can offer, SPFx is a great way to create your user interface for your Teams app. Since version 1.8 of SPFx it is possible to use your web part investments in Microsoft Teams. Since version 1.10 it is even possible to create a Personal app using the SharePoint Framework. This means that you could reuse your investments in SPFx in Teams. So if you already have web parts available, you can port them to Teams. And if you have developers available with knowledge of the SharePoint Framework, it is pretty easy to create a Teams app. The SharePoint Framework uses open web development standards and can be used with external JavaScript frameworks like React too. View this great video about SPFx development around Teams.

• Use SPFx to create the user interface to view/add/edit/delete data in a SharePoint list (example).
• User Power Automate with a trigger on this SharePoint list and use the Teams action ‘Post a message as the Flow bot to a channel’ or the other available actions to inform your users within Teams (get started with Power Automate).
• Deploy the SPFx package to the SharePoint App catalog.
• Deploy the Teams package to the Teams App catalog.

This option has also the advantage that the app is hosted for free in SharePoint and you don’t need any hosting environment such as Azure. Next to this, the SharePoint Framework has a lot of build in features for connecting to SharePoint and other services, without the plumbing of authentication, etc. This significantly simplifies the development proces.

Existing web applications

If you already have an existing web application, you are able to use this as a Teams app. You can use App Studio for Microsoft Teams to create a Teams app package. In the Manifest editor you can create a Teams channel tab or a Personal tab linking to your web application. Teams apps are iFramed into the Teams client and easy to include. You only need to supply the Url to the web application in order to display it. If your web application uses authentication it can also use SSO. Within App Studio you can provide the details for this. Follow the steps below to add your web application as a tab in Teams:

• Install App Studio within Microsoft Teams as described in the link above.
• Go into the Manifest editor and click ‘Create a new app’
• On the App details page, provide all the necessary information for your App, including icons, etc.

• Under Capabilities, jump to the Tabs section
• Choose here to add one or more Tabs. This can be Team tabs or Personal tabs. Provide the necessary information including the Url to the web application.

• Click Save
• Under Finish, jump to Domains and permissions
• In here, add the domains the web application is using. In My case I use login.microsoftonline.com, teams.microsoft.com and the domain of my web application.

• I created a .Net Core MVC application and published it to Azure. I added Azure AD authentication within the Azure Portal on my Web App. So users need to authenticate with my Azure Ad first, to access the web application. Depending how your authentication is setup you can setup single sign-on in this screen too. In my case this is not necessary.
• Jump to Test and distribute in order to create and download the Teams app package.
  

• You can also directly install it from here and test it. If you download the app package, install it in the Teams app catalog.
• Open the Teams app, by clicking on the … in the left rail in Teams and click your App.

• And here it is:

• You can also pin the App to the left rail, by right clicking the icon and click Pin.

Summary

There are a lot of ways to extend Microsoft Teams. But how easy is it to create an App within Teams. In this blog post I showed you how you are able to do this. You can go from a no code/low code option (Power Apps) to developing your own App. The SharePoint Framework (SPFx) can be a great option to develop your App. The App will be hosted in SharePoint for free, so no additional hosting is necessary for your App. Your App can also be used as a Web part in SharePoint. This all with the same code base. Next to this Microsoft Teams supports other development platforms to and supplies Software Development Kits (SDKs) and tooling. You can also add your existing web applications as a Teams app. App Studio for Microsoft Teams does a great job in creating your Teams app package. So sounds easy enough? Or are you gonna go the hard way?