How to create a Microsoft teams tab app

What is a Microsoft teams app?

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 somewhat good Microsoft documentation on how to get started with building Microsoft Teams apps. There are samples and templates available to get you started. Here are the Software Development Kits (SDKs) and tools available.

But before you can start building your App, you should decide what kind of App you’ll need. Please check the extensible points in the Microsoft Teams client this will tell you what king apps you to teams.

Existing web applications

Here i am going to explain how we can create a Microsoft teams app using website url u already have. At-least this was my use case. We had created a website using angular and hosted in AWS cloudfront. Few of the customers were using teams for most of they operations thus they wanted the website to be available as a team's app.

Register

Create a teams account. This is only be done with individual email([e-mail], etc...) and not with organisation email([e-mail], etc...)

Goto: https://teams.microsoft.com/ to register.

After you signup you will be able to see you teams account which will be something like below.

Create app

• You can use App Studio for Microsoft Teams to create a Teams app package. Install App Studio within Microsoft Teams as described in the link above.

• After installation it will automatically open else, click one the App Studio menu in the sidebar. It will open the studio when we can build the app.

• Go into the Manifest editor and click ‘Create a new app’. Here only we can build the manifest and add app details. A manifest file is the main file of the app with all the required details mentioned as JSON. If you were to build the app manually you have set the manifest. Since we are using the app builder. It will itself create a manifest for us.

• On the App details page, provide all the necessary information for your App, including icons, etc.

Provide the website details within App Studio for Microsoft Teams

• 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.

More settings,

• Under Finish, in Domains and permissions provide the domains your web application uses. Since we have alreaded add a tab. It will auto populate from that. But incase u need to add more, you can here.

Install or download the Teams app package

• To test the app you can install it. But if not working, then down load the app under the section Test and distribute.

• To install you can navigate to Apps section in left side bar. There select upload custom app.

• After upload the app will be added and opened. Click and select add. The app will be added and opened.

• Done !!! You can also pin the App to the left side bar, by right clicking the icon and click Pin.

Next steps

How to publish the app in Microsoft teams app store so that it will be available for all. This is possible only using Microsoft developer account. Which can only be created using organisation email. I am working on it. Will add more how soon.

Conclusion

This is it. Its pretty simple to create a microsoft teams app when you already have a website. A simple extension to that will load you website in an iframe. There are many other apps that you can create too like power apps and share point apps. Maybe try them down the line. Hope you got all the necessary info. Let me know in the comments.

Comments

[Daniel Megson]

Thanks, great post!

Question... if you have a tenant-specific variable, is there a way to store this within the Microsoft 365 architecture and call it? For example, say the domain for an app is specific to the organisation the user works for, could you store the domain somewhere in the Teams config for all users in that organisation so users did not have to fill it in themselves?