Skip to content

Commit b1c7b4f

Browse files
Revised document content (#10703)
* Revised document content * Fix typo in Teams messaging extension documentation Corrected a typo in the explanation of exposing web parts as messaging extensions. --------- Co-authored-by: Andrew Connell <me@andrewconnell.com>
1 parent 0ab265e commit b1c7b4f

4 files changed

Lines changed: 67 additions & 36 deletions
Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
---
22
title: Configure SharePoint Framework web parts in Microsoft Teams
33
description: To accommodate your users' preferences, you can let them configure your web parts when used in Microsoft Teams.
4-
ms.date: 06/15/2020
4+
ms.date: 03/06/2026
55
ms.localizationpriority: medium
66
---
77

88
# Configure SharePoint Framework web parts in Microsoft Teams
99

10-
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.
10+
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.
1111

1212
> [!TIP]
1313
> 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.
14+
>
15+
> [!NOTE]
16+
> This sample may use an older version of SharePoint Framework and might require updates to work with the latest version.
1417
1518
## Configure Microsoft Teams tabs built using SharePoint Framework
1619

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

19-
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.
22+
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.
2023

2124
## Configure Microsoft Teams personal apps built using SharePoint Framework
2225

2326
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).
2427

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

27-
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.
30+
Translating this to your SharePoint Framework solution, this means:
31+
32+
1. Building a separate web part containing the configuration UI, used only in the personal app context.
33+
1. Defining a storage mechanism for user configuration.
34+
1. Extending the personal app definition to include multiple tabs.
2835

2936
### Personal app configuration UI web part
3037

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

3542
![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)
3643

37-
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.
44+
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.
3845

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

4148
![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)
4249

43-
### Choose the location to store user’s configuration
50+
### Choose the location to store user configuration
4451

45-
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.
52+
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.
4653

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

49-
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.
56+
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.
5057

5158
#### Store user configuration in a custom list
5259

53-
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.
60+
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.
5461

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

57-
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.
64+
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.
5865

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

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

6370
> [!TIP]
64-
> 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.
71+
> 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.
6572
6673
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.
6774

68-
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.
75+
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.
76+
77+
## See also
78+
79+
- [Deployment of SharePoint Framework Teams solutions](deployment-spfx-teams-solutions.md)
80+
- [Building Microsoft Teams "me"-experience using SharePoint Framework](build-for-teams-me-experience.md)

docs/spfx/build-for-teams-considerations.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Considerations for building for Microsoft Teams using SharePoint Framework
3-
description: There are a number of things that you should take into account when building for Microsoft Teams using SharePoint Framework
4-
ms.date: 03/08/2023
3+
description: There are a number of things that you should take into account when building for Microsoft Teams using SharePoint Framework.
4+
ms.date: 03/06/2026
55
ms.localizationpriority: medium
66
---
77

@@ -14,23 +14,23 @@ While using SharePoint Framework to build for Microsoft Teams offers you benefit
1414
1515
## Globally deploy the SharePoint Framework solution package
1616

17-
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`.
17+
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`.
1818

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

2121
## Expose existing application in Microsoft Teams
2222

2323
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).
2424

25-
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.
25+
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.
2626

2727
## Support for Microsoft Teams tabs and personal apps
2828

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

3131
## Client-side code only
3232

33-
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).
33+
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).
3434

3535
## Teams JS SDK
3636

@@ -40,4 +40,10 @@ SharePoint Framework provides access to Teams JS SDK via `sdks.microsoftTeams` p
4040
4141
## Deployment
4242

43-
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.
43+
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).
44+
45+
## See also
46+
47+
- [Deployment of SharePoint Framework Teams solutions](deployment-spfx-teams-solutions.md)
48+
- [Building Microsoft Teams "me"-experience using SharePoint Framework](build-for-teams-me-experience.md)
49+
- [Configure SharePoint Framework web parts in Microsoft Teams](build-for-teams-configure-in-teams.md)

0 commit comments

Comments
 (0)