Edit

Share via

Add Teams tab to SharePoint

  • Article

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.

Screenshot shows the web part exposed as a Teams tab.

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.

Screenshot shows a Teams tab in SharePoint view.

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

  1. Download the sample app manifest.

  2. In Teams, select Apps > Manage your apps > Upload an app.

  3. Select Upload a custom app.

    Screenshot shows the option to upload a custom app in Teams.

  4. Select the sample app manifest .zip file and select Open. A dialog opens to add the custom app.

  5. Select Add.

    Screenshot of the app details dialog to add the sample app to Teams.

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

    Screenshot of the scope selection dialog to select the required scope.

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

    Screenshot shows a new tab added in a team.

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

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

      Screenshot shows the deploy dialog.

    You must then create a new page in your site.

  2. To create a new page, select Settings and select Add a page.

    Screenshot shows the Office 365 settings options.

  3. Set up your page and give an appropriate name such as My Teams Tab.

  4. Select + to open the web part toolbox.

    Screenshot shows the option to add web part.

  5. From the list, search and select the app you uploaded. It creates a web part in the canvas that contains your Teams tab.

    Screenshot shows the tab view.

  6. After you finish editing, select Publish.

  7. Select Add page to navigation to have a quick reference to your page in the left navigation bar.

    Screenshot shows the tab in SharePoint.

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.

Screenshot shows the Teams app in SharePoint.

Code sample

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

See also