Add Teams tab to SharePoint

發行項
11/20/2023

You can get a rich integration experience between Microsoft Teams and SharePoint by adding a Microsoft Teams tab in SharePoint as an SPFx web part. This document guides you on how you to take a tab from a Microsoft Teams sample app and use it in SharePoint.

Rich integration between Teams and SharePoint

With the November release of Teams and SharePoint Framework v.1.7, developers have two powerful capabilities:

Teams tabs in SharePoint

With SharePoint Framework v.1.7, you can host your Teams tabs in SharePoint. As tabs hosted in SharePoint get a similar full page experience, exposing all the features of Teams tabs while retaining the context and familiarity of a SharePoint site.

Create rich app experiences in SharePoint by bringing your Teams app into SharePoint.

SharePoint Framework in Teams

You can also implement your Teams tabs using SharePoint Framework. SharePoint Framework web parts are hosted within SharePoint without any need for external services, such as Azure. For SharePoint developers, this significantly simplifies the development process for Teams tabs. For more information on SharePoint Framework in Teams, see how to use the SharePoint Framework in Teams.

Bring your SharePoint web parts to Teams and let SharePoint manage the hosting for you.

Introduction

The tab used here's already hosted on Azure, to focus on the required integration work.

The sample app that is being used is a Talent Management application. It manages the hiring process of candidates for open positions in a team. Build a sample Teams app and load it into Teams. Don't create a real talent management application.

Benefits of this approach

Reach SharePoint users with your existing Teams tab.
Upload your app manifest directly to your SharePoint app catalog. Teams application packages are now supported by SharePoint.
The users configure the tab on a page just like any other SharePoint web part.
Your tab can access its context same as it can, when running inside Teams.

To add Teams tab to SharePoint, perform the following steps to add Teams tab to SharePoint:

Test the sample app

Download the sample app manifest.

Open Microsoft Teams.
Select Apps > Manage your apps > Upload an app.
Select Upload a custom app.
The file to upload is located in your Downloads folder. It's called TalentMgmt-Azure.zip. The following image displays the corresponding screen:
You can see the install or consent screen for the talent management app. Select the team you want to install.
Select the Install and start experimenting with the app.

Note

The 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/apps/AppCatalog/Forms/AllItems.aspx. For example, https://contoso.sharepoint.com/sites/apps/AppCatalog/Forms/AllItems.aspx.
When prompted, enable Make this solution available to all sites in the organization. The following image displays the corresponding screen:
In your site, create a new page by selecting the gear button at the upper right and then select Add a page. The following image displays the corresponding screen:
You can see the SharePoint pages authoring experience. Name your page as My Teams Tab.
Open the web part toolbox by selecting the + button, and select your Teams Tab, named Contoso HR. Web parts are sorted alphabetically. If it's a long list, you can use the search bar to find it. This creates a web part in the canvas that contains your Teams tab. The following image displays the tab view:
Select the Publish button after you finish editing.
Select Add page to navigation to have a quick reference to your page in the left navigation bar. The following image displays the tab in SharePoint:

Explore App Pages in SharePoint

After your page is published, you can explore turning your Teams app into a more complete experience inside SharePoint. This converts the current page into an App Page, showing the normal SharePoint page layout with a full page experience for the Teams tab.

The following image displays the complete experience of Teams app in SharePoint:

Code sample

Sample name	Description	SPFx
SPFx web part	SPFx web part samples for tabs, channels, and groups.	View