Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions docs/spfx/build-for-teams-configure-in-teams.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
---
title: Configure SharePoint Framework web parts in Microsoft Teams
description: To accommodate your users' preferences, you can let them configure your web parts when used in Microsoft Teams.
ms.date: 06/15/2020
ms.date: 03/06/2026
ms.localizationpriority: medium
---

# Configure SharePoint Framework web parts in Microsoft Teams

To accommodate your users' preferences, you can let them configure your web parts when used in Microsoft Teams. Depending if you exposed your web parts as Teams tabs or personal apps, there are different ways to implement configuration capabilities in your web part.
To accommodate your users' preferences, you can let them configure your web parts when used in Microsoft Teams. Depending on whether you expose your web parts as Teams tabs or personal apps, there are different ways to implement configuration capabilities in your web part.

> [!TIP]
> To see how to use the different concepts described in this article, see the sample [Leads application](https://github.com/pnp/sp-dev-solutions/tree/master/solutions/LeadsLOBSolution) on GitHub.
>
> [!NOTE]
> This sample may use an older version of SharePoint Framework and might require updates to work with the latest version.

## Configure Microsoft Teams tabs built using SharePoint Framework

Typically, when building Microsoft Teams tab, you need to [build custom UI to allow users to configure your tab](/microsoftteams/platform/tabs/how-to/create-tab-pages/configuration-page). Additionally, you need to write code to store and load configuration values as selected by the user.

When building tabs using SharePoint Framework, the generated tab uses the [web part property pane](web-parts/guidance/integrate-web-part-properties-with-sharepoint.md) to let users configure the tab. This saves you a lot of effort. Not only you don’t need to build and maintain a separate configuration UI but you also dont need to implement any code responsible for storing and managing the settings. All of that is handled automatically for you by SharePoint Framework.
When building tabs using SharePoint Framework, the generated tab uses the [web part property pane](web-parts/guidance/integrate-web-part-properties-with-sharepoint.md) to let users configure the tab. This saves you a lot of effort. Not only do you not need to build and maintain a separate configuration UI, but you also don't need to implement any code. The SharePoint Framework is responsible for storing and managing the settings, so all of that is handled automatically for you.

## Configure Microsoft Teams personal apps built using SharePoint Framework

Microsoft Teams personal apps don’t offer any infrastructure for implementing configuration. Instead, following the pattern recommended by Microsoft Teams, personal app’s [settings should be exposed in a separate tab](/microsoftteams/platform/concepts/design/personal-apps).

![Personal app with multiple tabs including settings built using SharePoint Framework](../images/build-for-teams/build-for-teams-personal-app.png)

Translating this to your SharePoint Framework solution, it means building a separate web part that contains the configuration UI and which will be used only in the context of the personal app, defining a storage for user’s configuration and extending the personal app definition to contain multiple tabs.
Translating this to your SharePoint Framework solution, this means:

1. Building a separate web part containing the configuration UI, used only in the personal app context.
1. Defining a storage mechanism for user configuration.
1. Extending the personal app definition to include multiple tabs.

### Personal app configuration UI web part

Expand All @@ -34,35 +41,40 @@ Since the personal app configuration UI web part is not meant to be used outside

![The supportedHosts property of a SharePoint Framework web part used as a personal app configuration UI](../images/build-for-teams/build-for-teams-manifest-settings-webpart.png)

The reason you want the `supportedHosts` property to be empty is to prevent the web part from being used in SharePoint but also not include it in the autogenerated Teams manifest. By default, each web part that contains the `TeamsTab` or `TeamsPersonalApp` value in the manifest is included in the generated Teams manifest as a separate Microsoft Teams app. In this case however, you want the personal app to consist of multiple tabs, each pointing to a different web part. This can be done only by manually updating the manifest yourself.
Setting the `supportedHosts` property to an empty array prevents the web part from appearing in SharePoint and excludes it from the autogenerated Teams manifest. By default, each web part that contains the `TeamsTab` or `TeamsPersonalApp` value in the manifest is included in the generated Teams manifest as a separate Microsoft Teams app. In this case, however, you want the personal app to consist of multiple tabs, each pointing to a different web part. This can be done only by manually updating the manifest yourself.

To add a tab to your personal app and have it point to another web part, in the Teams manifest defined in the **teams/manifest.json** file, navigate to the `staticTabs` section and copy the existing entry. In the copied entry, update values of the `entityId` and `name` properties. In the `contentUrl` property, update the value of the `componentId` query string parameter so that it matches the ID of your settings web part as defined in its manifest.

![Microsoft Teams app's manifest defining a personal app with multiple tabs pointing to SharePoint Framework web parts](../images/build-for-teams/build-for-teams-teams-manifest-personalapp-multipletabs.png)

### Choose the location to store user’s configuration
### Choose the location to store user configuration

By default, web parts’ configuration is shared and the same for all users. Personal Teams apps are however meant to be installed, configured and used by individuals. As such, you need to have a way to store their preferences.
By default, web part configuration is shared and the same for all users. Personal Teams apps, however, are meant to be installed, configured, and used by individuals. As such, you need to have a way to store their preferences.

#### Store user configuration in the User Profile Service

In the past, a common way to store user-specific information in SharePoint, was by adding a custom property to the user profile service and storing the configuration as a serialized string in there. The problem with using the user profile service for this purpose is that you can’t automatically generate new user profile properties which complicates the deployment of your application.
In the past, a common way to store user-specific information in SharePoint was by adding a custom property to the user profile service and storing the configuration as a serialized string in there. The problem with using the user profile service for this purpose is that you can’t automatically generate new user profile properties which complicates the deployment of your application.

#### Store user configuration in a custom list

Alternatively, you could store user settings in a list. You could create a hidden list in the root SharePoint site and configure it so that users can see only their items. The downside of this approach is that each time your web part starts you need to check if the list and the settings for the current user exist and gracefully handle errors in case they dont. Additionally, when loading the configuration UI you would need to check if the list exists and provision it, along with all its settings if necessary.
Alternatively, you could store user configuration in a list. You could create a hidden list in the root SharePoint site and configure it so that users can see only their items. The downside is that each time your web part loads, you must check whether the list and the user configuration exist, and gracefully handle cases where they don't. Additionally, when loading the configuration UI, you need to check if the list exists and provision it along with all its settings if necessary.

#### Store user configuration in application’s personal folder

One of the less-known options for persisting application- and user-specific configuration is using the [applications personal folder](/graph/api/drive-get-specialfolder?tabs=http). Application’s specific folder is located in the users OneDrive for Business site. Each application gets a designated folder in which it can store any number of files.
One of the lesser-known options for persisting application- and user-specific configuration is using the [application's personal folder](/graph/api/drive-get-specialfolder?tabs=http). The application's personal folder is located in the user's OneDrive for Business site. Each application gets a designated folder in which it can store any number of files.

![Application’s personal folder created for SharePoint Framework applications](../images/build-for-teams/build-for-teams-application-personal-folder.png)

You can think of the application’s personal folder as a configuration folder of a desktop application on your disk, but then stored in OneDrive for Business and available on every device you use.

> [!TIP]
> Application’s personal folders are created per Azure AD application, so in the context of SharePoint Framework, all SharePoint Framework solutions will share the root application folder. To avoid collisions with other solutions, you should consider creating a subfolder for your application.
> Application’s personal folders are created per Microsoft Entra ID application, so in the context of SharePoint Framework, all SharePoint Framework solutions will share the root application folder. To avoid collisions with other solutions, you should consider creating a subfolder for your application.

From the technical point of view, the application’s personal folder is a folder in a SharePoint document library, and you can store any number of files and folders inside. When persisting your application’s configuration to the application’s personal folder, you would serialize your settings as configured by the user and write the serialized data to a file in your folder.

What’s convenient about using the application’s personal folder is that it’s automatically created if it doesn’t exist, data for each user is stored in their own OneDrive for Business meaning other users cannot see or tamper with their settings and it doesn’t require you to know any specific URLs because you can conveniently access it using Microsoft Graph. Should anything go wrong, user can navigate to their OneDrive for Business site and delete the application’s configuration to reset its state.
The application's personal folder is automatically created if it doesn't exist. Data for each user is stored in their own OneDrive for Business, so other users can't see or tamper with their configuration. You don't need to know any specific URLs because you can access it conveniently using Microsoft Graph. Should anything go wrong, the user can navigate to their OneDrive for Business site and delete the application's configuration to reset its state.

## See also

- [Deployment of SharePoint Framework Teams solutions](deployment-spfx-teams-solutions.md)
- [Building Microsoft Teams "me"-experience using SharePoint Framework](build-for-teams-me-experience.md)
18 changes: 12 additions & 6 deletions docs/spfx/build-for-teams-considerations.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Considerations for building for Microsoft Teams using SharePoint Framework
description: There are a number of things that you should take into account when building for Microsoft Teams using SharePoint Framework
ms.date: 03/08/2023
description: There are a number of things that you should take into account when building for Microsoft Teams using SharePoint Framework.
ms.date: 03/06/2026
ms.localizationpriority: medium
---

Expand All @@ -14,23 +14,23 @@ While using SharePoint Framework to build for Microsoft Teams offers you benefit

## Globally deploy the SharePoint Framework solution package

When using SharePoint Framework to build web parts that will be exposed in Microsoft Teams you should allow the solution to be globally deployed. This setting is controlled when creating the project but can also be adjusted later in the **package-solution.json** file by setting the `skipFeatureDeployment` property to `true`.
When using SharePoint Framework to build web parts that will be exposed in Microsoft Teams, you should allow the solution to be globally deployed. This setting is controlled when creating the project, but can also be adjusted later in the **package-solution.json** file by setting the `skipFeatureDeployment` property to `true`.

When the solution is globally deployed in your tenant, users can add tabs to any channel and install personal apps.

## Expose existing application in Microsoft Teams

If you have an existing web application, most likely you will not migrate it to SharePoint Framework. Since the application is already working, the easiest way to expose it in Microsoft Teams is by [creating a manifest for it](/microsoftteams/platform/tabs/what-are-tabs).

Depending how your application is built, you might need to ensure that users can correctly sign into your application and that the application can securely access its APIs. When users work with your application in Microsoft Teams, the application loads inside an `<iframe>` and your authentication implementation needs to support this properly.
Depending on how your application is built, you might need to ensure that users can correctly sign into your application and that the application can securely access its APIs. When users work with your application in Microsoft Teams, the application loads inside an `<iframe>` and your authentication implementation needs to support this properly.

## Support for Microsoft Teams tabs and personal apps

SharePoint Framework is meant to extend UI of the services it’s being used with. As such it supports building Microsoft Teams tabs and personal apps. If you need any non-UI customizations like [bots](/microsoftteams/platform/bots/what-are-bots) or [messaging extensions](/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions), you will need to build them separately outside of the SharePoint Framework solution.

## Client-side code only

SharePoint Framework solutions consist only of client-side code. If your solution requires server-side code for example to run long-running operations, scheduled processes or connecting to other systems that dont support the OAuth implicit flow, you would need to build this functionality separately and expose it through an API secured with Azure Active Directory. Your SharePoint Framework solution would then [securely connect to this API on behalf of the current user](use-aadhttpclient.md).
SharePoint Framework solutions consist only of client-side code. If your solution requires server-side codefor example, to run long-running operations, scheduled processes, or connecting to other systems that don't support the OAuth implicit flowyou need to build this functionality separately and expose it through an API secured with Microsoft Entra ID. Your SharePoint Framework solution would then [securely connect to this API on behalf of the current user](use-aadhttpclient.md).

## Teams JS SDK

Expand All @@ -40,4 +40,10 @@ SharePoint Framework provides access to Teams JS SDK via `sdks.microsoftTeams` p

## Deployment

SharePoint Online can automatically create the Microsoft Teams app manifest and app package for SharePoint Framework solutions deployed to the tenant's app catalog, or they can use a developer-provided Microsoft Teams app package. Refer to [Deployment options for SharePoint Framework solutions for Microsoft Teams](deployment-spfx-teams-solutions.md) for detail on these options.
SharePoint Online can automatically create the Microsoft Teams app manifest and app package for SharePoint Framework solutions deployed to the tenant's app catalog, or you can use a developer-provided Microsoft Teams app package. For more information, see [Deployment options for SharePoint Framework solutions for Microsoft Teams](deployment-spfx-teams-solutions.md).

## See also

- [Deployment of SharePoint Framework Teams solutions](deployment-spfx-teams-solutions.md)
- [Building Microsoft Teams "me"-experience using SharePoint Framework](build-for-teams-me-experience.md)
- [Configure SharePoint Framework web parts in Microsoft Teams](build-for-teams-configure-in-teams.md)
Loading