Add Teams tab to SharePoint
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 web parts in Teams
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.
Test the sample app
Download the sample app manifest.
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.
Under the Add dropdown, select Add to a team.
Select the team where you want to install the app and select Set up.
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.
Note
SharePoint extension commands aren’t supported in the Teams Files tab. You can add a SharePoint page, list, or document library as a tab in Teams.
Use Teams tab in SharePoint
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. | View |