spfx

page_type	description	products	languages	extensions	urlFragment
sample	This sample demonstrates how to create Microsoft Teams tabs using the SharePoint Framework, simplifying development by hosting directly within SharePoint.	office-teams office office-365	Javascript	contentType createdDate samples 07/07/2021 01:38:27 PM	officedev-microsoft-teams-samples-tab-channel-group-spfx

Microsoft Teams tab using SharePoint Framework

Discover how to build Microsoft Teams tabs using the SharePoint Framework in this detailed sample application. This guide walks you through the entire process—from initial setup and development to packaging and deployment—highlighting how to leverage SharePoint for a streamlined Teams tab experience.

Included Features

• Tabs

Interaction with Sharepoint Teams Tab Application

Try it yourself - experience the App in your Microsoft Teams client

Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, see steps here).

Channel and group tabs in ASP.NET Core with MVC: Manifest

Prerequisites

• App Catalog site
• Node.js version 10.X
• Install glup

Setup

1. Clone this repository

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   cd samples/tab-channel-group/spfx

2. If you are using Visual Code

   • Launch Visual Studio Code
   • File -> Open Folder -> Project/Solution

3. Ensure that you are at the solution folder

4. In the Visual Studio code terminal run following commands one by one:

    npm install
    gulp serve

Package and deploy your web part to SharePoint

Ensure that your console is activated in the root folder of the solution where was created.

1. Execute the following commands to build bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets.

   gulp bundle --ship

2. Execute the following task to package your solution. This creates an updated teams-tab-webpart.sppkg package on the sharepoint/solution folder.

   gulp package-solution --ship

3. Next, you need to deploy the package that was generated to the tenant App Catalog.

   Go to your tenant's SharePoint App Catalog (https://{Your - tenant}.sharepoint.com/sites/appcatalog/AppCatalog/Forms/AllItems.aspx)

4. Upload or drag and drop the teams-tab-webpart.sppkg to the App Catalog.

   

   This deploys the client-side solution package. Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy.

   Notice how the domain list in the prompt includes SharePoint Online. This is because the content is either served from the Microsoft 365 CDN or from the App Catalog, depending on the tenant settings.

   Ensure that the Make this solution available to all sites in the organization option is selected, so that the web part can be used from the Microsoft Teams side.

5. Select Deploy.

   

   Notice that you can see if there's any exceptions or issues in the package by looking the App Package Error Message column in the App Catalog.

   At this point, the web part is deployed and is automatically available cross the SharePoint Online sites.

Note

In this tutorial, we're using tenant wide deployment option of the SharePoint Framework solution. This will ensure that the development and usage experience is as easy as possible.

You could also deploy the solution as site scope, but in that case you'd need to ensure that the solution is deployed on the SharePoint site behind of the Microsoft Teams before you can use it.

Make the web part available in Microsoft Teams

To make your web part available in Microsoft Teams, you'll have synchronize your solution with teams.

Note

In this tutorial, we're using the automatic deployment option for the solution from the SharePoint app catalog. You can also perform these steps manually, if you want to provide alternative settings for your solutions. For more information, see: Create Microsoft Teams manifest manually for a web part and deploy it to Microsoft Teams.

1. Select the teams-tab-client-side-solution package in the SharePoint tenant App Catalog and select the Sync to Teams button at in the ribbon in the Files tab.

   

2. Confirm that you can see the status message on the top-right corner.

   

   [!IMPORTANT] If the synchronization isn't successful, please ensure that you have deleted possible previous version from the Microsoft Team App Catalog. This is the most common reason why the synchronization would fail as existing solution is not overridden currently.

Running the sample

1. Move to the Microsoft Teams side and check the App Catalog status by selecting Apps from the left navigation

2. Confirm that you can see helloworld app in the catalog:

   This can take few minutes based due to caching.

3. Move to a channel in a team where you want to test the solution. In the below picture, we have activated General channel in Team:

   

4. Select + to add a new tab on the channel.

5. Select your custom tab called helloworld in the list. You can use the search capability if needed to find your custom tab:

   

6. Select Add to confirm the tab to be selected.

7. Select Save to confirm the tab to be installed on the channel:

   

Your custom tab has been added on the Microsoft Teams channel and you can see how the code is reacting that it's in Microsoft Teams context. Theme of the web part is by default coming from the underlying SharePoint site.

Note

You can control the initial configuration option visibility from the web part manifest by setting canUpdateConfiguration property as false. By default this setting is true which is taken into account when the Teams manifest is automatically created as part of the Sync process.

Update your app package

When you make changes to your app and create a new package, you might find an error when selecting Sync to Teams.

A notification Failed to sync solution to teams might appear on the top right of your page.

If this happens follow these steps to delete your app from Microsoft Teams, and then try to sync it again:

1. Open Microsoft Teams.
2. When viewing your team channel, click + to Add a tab.
3. Select the More apps link at the top.
4. Find your app in the list, and click on the ... menu.
5. Select Delete to remove the app from Microsoft Teams.

You can now sync your new version to Microsoft Teams.

Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.

Further reading

For more information about getting started with Teams-sharepoint, please review the following resources:

• Build Microsoft Teams Tab Using Sharepoint
• Getting started with SharePoint Framework
• Building for Microsoft teams
• Use Microsoft Graph in your solution
• Publish SharePoint Framework applications to the Marketplace
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development