Experience a rich integration of Microsoft Teams and SharePoint by adding a Teams tab as a SharePoint Framework (SPFx) web part. This article guides you on how to integrate a tab from a Teams sample app into SharePoint. With the latest release of Teams and SPFx, you have the following two capabilities:
SharePoint hosts SPFx web parts without the need for external services such as Azure. For SharePoint developers, this functionality simplifies the development process for Teams tabs. For more information, see how to use the SharePoint Framework in Teams.
Teams tabs in SharePoint
With SPFx, you can host your Teams tabs directly in SharePoint that provides a full-page experience. It retains the functionality of Teams tabs while maintaining the context and familiarity of a SharePoint site.
Benefits
Reach SharePoint users with your existing Teams tab.
Upload your app manifest (previously called Teams app manifest) directly to your SharePoint App Catalog. SharePoint supports Teams app package.
Configure the tab on a page just like any other SharePoint web part.
Access the context of your tab the same way it does when running in Teams.
In Teams, select Apps > Manage your apps > Upload an app.
Select Upload a custom app.
Select the sample app manifest .zip file and select Open. A dialog opens to add the custom app.
Select Add.
Select Open to open the app in personal scope.
Alternatively, you can either search and select the required scope or select a channel or meeting from the list, and move through the dialog to select Go.
A new static tab is added to your Teams channel.
You can experiment with the app and test its features including configurable tabs and a chatbot.
Upload and deploy your Teams app package to your SharePoint App Catalog by visiting https://YOUR_TENANT_NAME.sharepoint.com/sites/appcatalog/AppCatalog/Forms/AllItems.aspx.
For example, https://contoso.sharepoint.com/sites/appcatalog/AppCatalog/Forms/AllItems.aspx.
When prompted, enable Make this solution available to all sites in the organization.
You must then create a new page in your site.
To create a new page, select Settings
and select Add a page.
Set up your page and give an appropriate name such as My Teams Tab.
Select + to open the web part toolbox.
From the list, search and select the app you uploaded. It creates a web part in the canvas that contains your Teams tab.
After you finish editing, select Publish.
Select Add page to navigation to have a quick reference to your page in the left navigation bar.
Explore single part app pages in SharePoint
After you publish your page, explore single part app pages in SharePoint. This helps you convert the current page into a single part app page, a normal SharePoint page layout with the full-page experience for the Teams tab.
Code sample
Sample name
Description
SPFx
SPFx web part
SPFx web part samples for tabs, channels, and groups.
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
Platform Docs feedback
Platform Docs is an open source project. Select a link to provide feedback:
Demonstrate skills to plan, deploy, configure, and manage Microsoft Teams to focus on efficient and effective collaboration and communication in a Microsoft 365 environment.