Building Microsoft Teams Tabs using SharePoint Framework
Starting with SharePoint Framework v1.7, you can build tabs for Microsoft Teams using SharePoint Framework tooling and use SharePoint as a host for your solutions.
There are following benefits on using SharePoint Framework as the platform for your Microsoft Teams tabs:
- Development model is similar as for SharePoint Framework web parts.
- Technically any SharePoint Framework web part can be exposed as a tab in Microsoft Teams.
- You have different scoping options on exposing your custom tab as a web part and tab in your tenant.
- Your tab will be executed in the context of the underlying SharePoint site behind of the specific team. This means that you can take advantage of any SharePoint specific APIs or functionalities in your web part.
This feature is currently in preview and is subject to change. It is not currently supported for usage in production environments. Your feedback and input around this capability is welcome using the SharePoint Dev Docs issue list.
There is a known bug related on the property configuration, which will be addressed. You cannot change default property values or the web part is not successfully added on the tab. Fix for this issue will be rolling out in upcoming days.
You can start developing Microsoft Teams tabs simply by using the
plusbeta version of the SharePoint Framework 1.7 packages that enables usage of preview functionality in the solution that you will create. High level steps to get started are as follows.
Start SharePoint Framework Yeoman generator with the
plusbetaswitch, so that the created solution will use the preview packages.
yo @microsoft/sharepoint --plusbeta
Create a solution with a client-side web part.
- Deploy web part using tenant-scoped deployment option to your SharePoint app catalog.
manifest.jsonlocated in the
/teamsfolder in your solution as a zip file . This file was automatically configured with default settings when your solution was created.
- Deploy your zip file (application) to the Microsoft Teams and start add a new tab in the preferred channel.
You can also follow the detailed steps to get started from the Building Microsoft Teams tab using SharePoint Framework tutorial.
There are few different options on getting the developed Microsoft Teams tab deployed. As both SharePoint and Microsoft Teams have their own app catalog, deployment requires operations on both services. Visibility of the new functionality can be controlled on the exact deployment mechanism.
Following table shows the deployment options in table style matrix. Top row shows the Microsoft Teams deployment options and first column mapped SharePoint deployment options.
|SharePoint/Teams deployment type||Manifest deployed to Store||Manifest deployed to Teams channel catalog|
|SharePoint tenant-scoped deployment||Solution available in all teams and all SharePoint sites||Solution available in specific team and all SharePoint Sites|
|Site collection app catalog with tenant-scoped option in SharePoint site behind of the Team||Not an option||Solution is available in the specific site collection and specific team|
|SharePoint site level deployment||Not an option||Solution is available in specific SharePoint site and in specific team|
See following resources for additional details around the different options in both systems:
- Upload an app package to Microsoft Teams
- Tenant-scoped solution deployment for SharePoint Framework solutions
Detecting if web part is in Teams context
See more information around th Microsoft Teams tab context from the Microsoft Teams development documentation.