-
Notifications
You must be signed in to change notification settings - Fork 167
Configure multiple tabs in SharePoint Framework based Teams app
Tabs are Teams-aware webpages embedded in Microsoft Teams. They're simple HTML <iframe> tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. Teams tab can be any web-based application, of course, your custom tabs can be a SharePoint web part.
You can extend Microsoft Teams with additional functionality by integrating your applications. This allows you expose functionality in the context of your users’ work helping them be more productive. By building Microsoft Teams applications using SharePoint Framework, you can save costs on hosting infrastructure and simplify the deployment and operation process.
Sometimes you will need to have multiple tabs for your Teams tab project. This document will introduce you how to add additional SPFx tab into your SPFx Teams project (assume you already have one, if not you can quickly create a SPFx Teams project using Teams Toolkit). This document will not include intructions about how to add SPFx tab into other type of Teams projects. e.g. Azure-hosted tab or bot.
To add additional SPFx tab, please make sure:
- You have a Teams application with SPFx tab capability and its manifest.
- You have a Microsoft 365 account to test the application.
Following are steps to add additional SPFx tab:
- Scaffold additional web part
- Configure SPFx tab capability in Teams application manifest
- Run the capability locally
- Move the application to cloud
Teams Toolkit leverages Yeoman to scaffold SPFx solution and add web part. Before we start, the two packages are needed to run Yeoman:
-
yo
: CLI tool for running Yeoman generators -
@microsoft/generator-sharepoint
: Yeoman generator for the SharePoint Framework
You can use packages that are globally installed by yourself or locally installed by Teams Toolkit to do scaffolding:
Use Globally installed packages
- Install the two packages globally with
npm i -g yo @microsoft/generator-sharepoint
(Please make sure to install the same version of@microsoft/generator-sharepoint
package as your existing SPFx project) - Execute
yo @microsoft/sharepoint
command undersrc
directory
Use locally installed packages by Teams Toolkit
- Check packages installed under
${HOME}\.fx\bin
(They should be installed underyo
andspGenerator
directory respectively if you have created SPFx project before) - Execute
${path_to_yo_executable}\yo ${HOME}\.fx\bin\spGenerator\node_modules\@microsoft\generator-sharepoint\lib\generators\app\index.js
command undersrc
directory
Teams app is represented by its manifest, where SPFx tab capability is defined. Follow these steps to add additional SPFx tab
- Get the new web part id from web part manifest (located at
src\src\webparts\${webPartName}\${webPartName}.manifest.json
)id
field. - Configure your new web part in local environment by adding following static tab in
staticTabs
section in theappPackage\manifest.local.json
file (Replace${componentId}
and${webPartName}
variable with actual value).
{
"entityId": "${componentId}",
"name": "${webPartName}",
"contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/TeamsWorkBench.aspx%3FcomponentId=${componentId}%26teams%26personal%26forceLocale={locale}%26loadSPFX%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"scopes": [
"personal"
]
}
- Configure your new web part in other environments by adding following static tab in
staticTabs
section in theappPackage\manifest.json
file (Replace${componentId}
and${webPartName}
variable with actual value).
{
"entityId": "${componentId}",
"name": "${webPartName}",
"contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=${componentId}%26forceLocale={locale}",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"scopes": [
"personal"
]
}
- You can set environment variables within the manifest if you have multiple environments.
To run SPFx project locally, you can F5
to debug in Hosted workbench or Teams workbench like before.
To move your application to cloud, you can deploy and publish like before.
You can check the following links for more information:
Scenario-based Tutorials
- Send notifications to Teams
- Respond to chat commands in Teams
- Respond to card actions in Teams
- Embed a dashboard canvas in Teams
Extend Teams app across Microsoft 365
- Create and test a personal tab across Microsoft 365
- Create and test a search-based message extension across Microsoft 365
Documentation
- Manage Application settings with Teams Toolkit
- Manage Microsoft Entra Application Registration with Teams Toolkit
How To Guides
- How to use an existing Microsoft Entra app
- How to use a multi-tenant Microsoft Entra app
- How to customize debug tasks
- How to connect to existing APIs
- How to add single sign on in Teams Toolkit for Visual Studio Code
- How to enable Single Sign-on in Teams Toolkit for Visual Studio
- How to configure Tab capability within your Teams app
- How to configure Bot capability within your Teams app
- How to configure an Outlook Add-in capability within your Teams app
- How to configure Message Extension capability within your Teams app
- How to automate ci/cd pipelines
- How to integrate Azure Functions with your Teams app
- How to integrate Azure API Management