| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Teamsjs Support M365 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/teamsjs-support-m365.md | description: Learn the level of support for different TeamsJS library capabiliti ms.localizationpriority: high Previously updated : 04/12/2024 Last updated : 07/11/2024 keywords: TeamsJS Teams JavaScript library capability Microsoft 365 M365 Microsoft 365 hosts are signified by the product icons in the following table: For more information about the new Teams and Outlook, see [Outlook blog](https://techcommunity.microsoft.com/t5/outlook-blog/new-outlook-for-windows-now-available/ba-p/3932068) and [Teams adoption](https://adoption.microsoft.com/new-microsoft-teams/). -Using the following table, select any TeamsJS Capability for further details including reference docs, samples, usage notes, and limitations. +Using the following tables, select any TeamsJS Capability for further details including reference docs, samples, usage notes, and limitations. +> [!NOTE] +> The information in the following tables is derived from tests conducted with TeamsJS v2.24 and the latest host versions available during testing. Support might vary based on subsequent host modifications. These tables are provided to help you understand capability support across hosts, however, always ensure to use the relevant `isSupported()` calls in your code to verify support. ## Cross-host capabilities The following table lists host application support for TeamsJS capabilities that </thead> <tbody> <tr>- <th><a href="#app">app</a></th> + <th><a href="#app">app</a></th> <!-- Capability: app --> <td>✓</td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> </tr> <tr>- <th><a href="#appinstalldialog">appInstallDialog</a></th> + <th><a href="#appinstalldialog">appInstallDialog</a></th> <!-- Capability: appInstallDialog --> <td>✓</td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#authentication">authentication</a></th> + <th><a href="#authentication">authentication</a></th> <!-- Capability: authentication --> <td>✓</td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> </tr> <tr>- <th><a href="#calendar">calendar</a></th> + <th><a href="#calendar">calendar</a></th> <!-- Capability: calendar --> <td></td> <td></td> <td></td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> </tr> <tr>- <th><a href="#call">call</a></th> + <th><a href="#call">call</a></th> <!-- Capability: call --> <td>✓</td> <td>✓</td> <td></td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#chat">chat</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#chat">chat</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: chat --> <td>✓</td> <td>✓</td> <td></td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#clipboard">clipboard</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#clipboard">clipboard</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: clipboard --> <td></td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> <td>✓</td> <td></td>- <td></td> + <td>✓</td> <td></td> <td></td> <td>✓</td> <td>✓</td> </tr> <tr>- <th><a href="#dialog">dialog</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialog">dialog</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog --> <td>✓</td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#geolocation">geoLocation</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> - <td></td> + <th><a href="#geolocation">geoLocation</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: geoLocation --> <td></td> <td>✓</td>- <td></td> + <td>✓</td> <td></td> <td></td> <td>✓</td> <td>✓</td>+ <td>✓</td> <td></td> <td></td> <td></td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#mail">mail</a></th> + <th><a href="#mail">mail</a></th> <!-- Capability: mail --> <td></td> <td></td> <td></td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> </tr> <tr>- <th><a href="#pages">pages</a></th> + <th><a href="#pages">pages</a></th> <!-- Capability: pages --> <td>✓</td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td>✓</td> </tr> <tr>- <th><a href="#profile">profile</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> - <td></td> - <td></td> + <th><a href="#profile">profile</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: profile --> <td></td> <td>✓</td> <td></td>+ <td>✓</td> <td></td>+ <td>✓</td> <td></td> <td>✓</td> <td>✓</td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#search">search</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#search">search</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: search --> <td>✓</td> <td>✓</td> <td></td>- <td></td> + <td>✓</td> <td>✓</td> <td>✓</td> <td></td> <td>✓ </td>- <td></td> + <td>✓</td> <td></td> <td></td> <td></td> The following table lists host application support for TeamsJS capabilities that <td></td> </tr> <tr>- <th><a href="#secondarybrowser">secondaryBrowser</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#secondarybrowser">secondaryBrowser</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: secondaryBrowser --> <td></td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the </thead> <tbody> <tr>- <th><a href="#appinitialization">appInitialization</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th><a href="#appinitialization">appInitialization</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: appInitialization --> <td>✓</td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#location">location</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th><a href="#location">location</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: location --> + <td>✓</td> <td>✓</td>- <td></td> <td></td> <td></td> <td>✓</td>- <td></td> + <td>✓</td> <td></td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#menus">menus</a></th> - <td></td> + <th><a href="#menus">menus</a></th> <!-- Capability: menus --> <td></td> <td></td> <td></td> <td></td>+ <td>✓</td> <td></td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#people">people</a></th> + <th><a href="#people">people</a></th> <!-- Capability: people --> <td>✓</td> <td>✓</td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#settings">settings</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th><a href="#settings">settings</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: settings --> <td>✓</td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#sharing">sharing</a></th> + <th><a href="#sharing">sharing</a></th> <!-- Capability: sharing --> <td>✓</td> <td>✓</td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#stageview">stageView</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#stageview">stageView</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: stageView --> <td>✓</td> <td>✓</td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#tasks">tasks</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th><a href="#tasks">tasks</a><img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: tasks --> <td>✓</td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#teamscore">teamsCore</a></th> + <th><a href="#teamscore">teamsCore</a></th> <!-- Capability: teamsCore --> <td>✓</td> <td>✓</td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#video">video</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#video">video</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: video --> <td></td> <td></td> <td></td> The following table lists support for TeamsJS capabilities that run only in the <td></td> </tr> <tr>- <th><a href="#webstorage">webStorage</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#webstorage">webStorage</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: webStorage --> <td></td> <td></td> <td></td> The `app` namespace is supported globally across all application hosts and, ther </thead> <tbody> <tr>- <th>app</th> + <th>app</th> <!-- Capability: app --> <td>✓</td> <td>✓</td> <td>✓</td> Deprecated. Namespace for initializing an app. For new apps, use [app.initialize </thead> <tbody> <tr>- <th>appInitialization <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th>appInitialization <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: appInitialization --> <td>✓</td> <td></td> <td></td> Namespace used to open a dialog for installing an application. </thead> <tbody> <tr>- <th>appInstallDialog</th> + <th>appInstallDialog</th> <!-- Capability: appInstallDialog --> <td>✓</td> <td>✓</td> <td>✓</td> The `authentication` namespace is supported globally across all application host </thead> <tbody> <tr>- <th>authentication</th> + <th>authentication</th> <!-- Capability: authentication --> <td>✓</td> <td>✓</td> <td>✓</td> Preview. Namespace to interact with the barcode scanning-related part of the lib </thead> <tbody> <tr>- <th>barCode <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>barCode <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: barCode --> <td></td> <td></td> <td></td> Namespace providing calendar-related functionality. </thead> <tbody> <tr>- <th>calendar</th> + <th>calendar</th> <!-- Capability: calendar --> <td></td> <td></td> <td></td> Namespace providing functionality to start a call with others. </thead> <tbody> <tr>- <th>call</th> + <th>call</th> <!-- Capability: call --> <td>✓</td> <td>✓</td> <td></td> Preview. Namespace providing functionality to start a chat with others. </thead> <tbody> <tr>- <th>chat <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>chat <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: chat --> <td>✓</td> <td>✓</td> <td></td> Preview. This capability enables users to copy and paste to the system clipboard </thead> <tbody> <tr>- <th>clipboard<img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>clipboard<img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: clipboard --> <td></td> <td>✓</td> <td>✓</td> Preview. This capability enables users to copy and paste to the system clipboard <td>✓</td> <td>✓</td> <td></td>- <td></td> + <td>✓</td> <td></td> <td></td> <td>✓</td> Preview. This group of capabilities enables apps to show modal dialogs (referred </thead> <tbody> <tr>- <th>dialog <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>dialog <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog --> <td>✓</td> <td>✓</td> <td>✓</td> Preview. This group of capabilities enables apps to show modal dialogs (referred <td></td> </tr> <tr>- <th><a href="#dialogadaptivecard">dialog.adaptiveCard</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialogadaptivecard">dialog.adaptiveCard</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog.adaptiveCard --> <td></td> <td>✓</td> <td>✓</td> Preview. This group of capabilities enables apps to show modal dialogs (referred <td></td> </tr> <tr>- <th><a href="#dialogadaptivecardbot">dialog.adaptiveCard.bot</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialogadaptivecardbot">dialog.adaptiveCard.bot</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog.adaptiveCard.bot --> <td></td> <td>✓</td> <td></td> Preview. This group of capabilities enables apps to show modal dialogs (referred <td></td> </tr> <tr>- <th><a href="#dialogupdate">dialog.update</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialogupdate">dialog.update</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog.update --> <td>✓</td> <td>✓</td> <td>✓</td> Preview. This group of capabilities enables apps to show modal dialogs (referred <td></td> </tr> <tr>- <th><a href="#dialogurl">dialog.url</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialogurl">dialog.url</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog.url --> <td>✓</td> <td>✓</td> <td>✓</td> Preview. This group of capabilities enables apps to show modal dialogs (referred <td></td> </tr> <tr>- <th><a href="#dialogurlbot">dialog.url.bot</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th><a href="#dialogurlbot">dialog.url.bot</a><img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: dialog.url.bot --> <td>✓</td> <td>✓</td> <td></td> When an API doesn't support or generates an error, add logic to fail or provide </thead> <tbody> <tr>- <th>geoLocation <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> - <td></td> + <th>geoLocation <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: geoLocation --> <td></td> <td>✓</td>- <td></td> + <td>✓</td> <td></td> <td></td> <td>✓</td> <td>✓</td>+ <td>✓</td> <td></td> <td></td> <td></td> When an API doesn't support or generates an error, add logic to fail or provide <td></td> </tr> <tr>- <th><a href="#geolocationmap">geoLocation.map</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> - <td></td> - <td></td> + <th><a href="#geolocationmap">geoLocation.map</a> <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: geoLocation.map --> <td></td>+ <td>✓</td> <td></td> <td></td> <td></td>+ <td>✓</td> <td></td> <td></td> <td></td> Deprecated. Namespace providing location-related functionality (get and show loc </thead> <tbody> <tr>- <th>location <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th>location <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: location --> + <td>✓</td> <td>✓</td>- <td></td> <td></td> <td></td> <td>✓</td>- <td></td> + <td>✓</td> <td></td> <td></td> <td></td> Namespace providing email-related functionality. </thead> <tbody> <tr>- <th>mail</th> + <th>mail</th> <!-- Capability: mail --> <td></td> <td></td> <td></td> Namespace providing image file-related functionality. </thead> <tbody> <tr>- <th>media</th> + <th>media</th> <!-- Capability: media --> <td></td> <td></td> <td></td> Namespace providing in-meeting app functionality. </thead> <tbody> <tr>- <th>meeting</th> + <th>meeting</th> <!-- Capability: meeting --> <td></td> <td></td> <td></td> Namespace to interact with the menu-related part of the library. This module is </thead> <tbody> <tr>- <th>menus</th> - <td></td> + <th>menus</th> <!-- Capability: menus --> <td></td> <td></td> <td></td> <td></td>+ <td>✓</td> <td></td> <td></td> <td></td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha </thead> <tbody> <tr>- <th><a href="#pages">pages</a></th> + <th><a href="#pages">pages</a></th> <!-- Capability: pages --> <td>✓</td> <td>✓</td> <td>✓</td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha <td>✓</td> </tr> <tr>- <th><a href="#pagesappbutton">pages.appButton</a></th> + <th><a href="#pagesappbutton">pages.appButton</a></th> <!-- Capability: pages.appButton --> <td>✓</td> <td>✓</td> <td>✓</td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha <td></td> </tr> <tr>- <th><a href="#pagesbackstack">pages.backStack</a></th> + <th><a href="#pagesbackstack">pages.backStack</a></th> <!-- Capability: pages.backStack --> <td>✓</td> <td>✓</td> <td></td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha <td>✓</td> </tr> <tr>- <th><a href="#pagescurrentapp">pages.currentApp</a></th> + <th><a href="#pagescurrentapp">pages.currentApp</a></th> <!-- Capability: pages.currentApp --> <td></td> <td>✓</td> <td>✓</td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha <td>✓</td> </tr> <tr>- <th><a href="#pagesconfig">pages.config</a></th> + <th><a href="#pagesconfig">pages.config</a></th> <!-- Capability: pages.config --> <td>✓</td> <td>✓</td> <td></td> Prior to TeamsJS version 2.0, all deep linking scenarios were handled using `sha <td>✓</td> </tr> <tr>- <th><a href="#pagestabs">pages.tabs</a></th> + <th><a href="#pagestabs">pages.tabs</a></th> <!-- Capability: pages.tabs --> <td>✓</td> <td>✓</td> <td></td> Namespace providing functionality for [People Picker API](../concepts/device-cap </thead> <tbody> <tr>- <th>people</th> + <th>people</th> <!-- Capability: people --> <td>✓</td> <td>✓</td> <td></td> Preview. Namespace providing for profile-related functionality. </thead> <tbody> <tr>- <th>profile <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> - <td></td> - <td></td> + <th>profile <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: profile --> <td></td> <td>✓</td> <td></td>+ <td>✓</td> <td></td>+ <td>✓</td> <td></td> <td>✓</td> <td>✓</td> Preview. Allows your application to interact with the host Microsoft 365 applica </thead> <tbody> <tr>- <th>search <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>search <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: search --> <td>✓</td> <td>✓</td> <td></td>- <td></td> <td>✓</td> <td>✓</td>- <td></td> <td>✓</td> <td></td>+ <td>✓</td> + <td>✓</td> <td></td> <td></td> <td></td> Preview. Namespace supporting in-app browser experiences of the host app. For ex </thead> <tbody> <tr>- <th>secondaryBrowser <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>secondaryBrowser <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: secondaryBrowser --> <td></td> <td></td> <td></td> Deprecated. Provides settings-related functionality. Use equivalent APIs from th </thead> <tbody> <tr>- <th>settings <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th>settings <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: settings --> <td>✓</td> <td></td> <td></td> Namespace to open a share dialog for web content. For more information, see [Sha </thead> <tbody> <tr>- <th>sharing</th> + <th>sharing</th> <!-- Capability: sharing --> <td>✓</td> <td>✓</td> <td></td> Preview. Namespace to interact with the Stageview specific part of the library. </thead> <tbody> <tr>- <th>stageView <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>stageView <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: stageView --> <td>✓</td> <td>✓</td> <td></td> The earlier version of the capability for providing modal dialogs (referred as t </thead> <tbody> <tr>- <th>tasks <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> + <th>tasks <img src="./images/deprecated-badge.png" alt="Badge indicating this capability is deprecated" /></th> <!-- Capability: tasks --> <td>✓</td> <td></td> <td></td> Namespace containing the set of APIs that support Teams-specific functionalities </thead> <tbody> <tr>- <th>teamsCore</th> + <th>teamsCore</th> <!-- Capability: teamsCore --> <td>✓</td> <td>✓</td> <td></td> Preview. Namespace representing functionality for in-meeting video effects. </thead> <tbody> <tr>- <th>video <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>video <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: video --> <td></td> <td></td> <td></td> Preview. Contains functionality to allow web apps to store data in webview cache </thead> <tbody> <tr>- <th>webStorage <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> + <th>webStorage <img src="./images/preview-badge.png" alt="Badge indicating this capability is in preview" /></th> <!-- Capability: webStorage --> <td></td> <td></td> <td></td> |
| platform | Build Bot Based Plugin | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/build-bot-based-plugin.md | Last updated 11/14/2023 Microsoft Copilot for Microsoft 365, powered by an advanced processing and orchestration engine, integrates Microsoft 365 apps, Microsoft Graph, and Large Language Models (LLMs) to transform your words into a potent productivity tool. Although Copilot for Microsoft 365 can utilize apps and data within the Microsoft 365 ecosystem, many users rely on various external tools and services for work management and collaboration. By extending your message extension as a plugin in Copilot for Microsoft 365, you can enable users to interact with third-party tools and services, therefore empowering them to achieve more with Copilot for Microsoft 365. You can achieve this extension by developing a plugin or connecting to an external data source. See the video to learn more about extending Copilot for Microsoft 365 using Teams message extensions: </br> Let's create a bot-based search message extension that can search npm registries Before you get started, ensure that you install the following tools to build and deploy your message extension: -* Install the latest [Teams Toolkit prerelease version](../toolkit/install-Teams-Toolkit.md#install-a-pre-release-version). +* Install the latest [Teams Toolkit prerelease version](../toolkit/install-Teams-Toolkit.md#install-a-prerelease-version). * Ensure that the **Develop Copilot Plugin** feature flag is enabled. To enable the feature flag, follow these steps: 1. Open **Visual Studio Code**. 1. Go to **Manage** > **Settings**. To create a bot-based search message extension plugin using Teams Toolkit CLI, f 1. Select **Custom Search Results**. 1. Select **Start with a Bot**. - :::image type="content" source="../assets/images/Copilot/bot-based-CLI-new-project.png" alt-text="Screenshot shows the message extension, custom search results and start with a bot option selected in the CLI window."::: + :::image type="content" source="../assets/images/Copilot/bot-based-CLI-new-project.png" alt-text="Screenshot shows the message extension, custom search results, and start with a bot option selected in the CLI window."::: 1. Enter the location for your project and select **Enter**. To create a bot-based search message extension plugin using Teams Toolkit CLI, f 1. From the list, select a subscription. - :::image type="content" source="../assets/images/Copilot/bot-based-CLI-resource-group.png" alt-text="Screenshot shows the login to Azure and select a subscription option in the CLI window."::: + :::image type="content" source="../assets/images/Copilot/bot-based-CLI-resource-group.png" alt-text="Screenshot shows the sign-in to Azure and select a subscription option in the CLI window."::: 1. From the list, select a resource group. 1. If you receive a message, which reads **Cost may incur according to the usage. Do you want to provision resources in dev environment using accounts listed above?**, enter **Y**. |
| platform | Manifest Schema Dev Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md | If the app requested permissions change, users are prompted to upgrade and re-co This version string must follow the [semver](http://semver.org/) standard (MAJOR.MINOR.PATCH). > [!NOTE]-> If your app includes an Office Add-in, each segment of the version string is limited to a maximum of five digits. The semver standard's pre-release and metadata version string extensions aren't supported. +> If your app includes an Office Add-in, each segment of the version string is limited to a maximum of five digits. The semver standard's prerelease and metadata version string extensions aren't supported. ## id |
| platform | Tabs In Sharepoint | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/tabs-in-sharepoint.md | Title: Add Teams tab to SharePoint -description: Learn how to deploy your existing Teams tab to SharePoint as a SharePoint Framework web part using code samples. +description: Learn about SharePoint web parts and how to add and deploy your existing Teams tab to SharePoint as a SharePoint Framework web part using code samples. ms.localizationpriority: medium Last updated 06/08/2023 Last updated 06/08/2023 # Add Teams tab to SharePoint -You can get a rich integration experience between Microsoft Teams and SharePoint by adding a Microsoft Teams tab in SharePoint as an SPFx web part. This document guides you on how you to take a tab from a Microsoft Teams sample app and use it in SharePoint. +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: -## Rich integration between Teams and SharePoint +- [SharePoint web parts in Teams](#sharepoint-web-parts-in-teams) +- [Teams tabs in SharePoint](#teams-tabs-in-sharepoint) -With the November release of Teams and SharePoint Framework v.1.7, developers have two powerful capabilities: +## SharePoint web parts in Teams -### Teams tabs in SharePoint +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](/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab). -With SharePoint Framework v.1.7, you can host your Teams tabs in SharePoint. As tabs hosted in SharePoint get a similar **full page** experience, exposing all the features of Teams tabs while retaining the context and familiarity of a SharePoint site. -Create rich app experiences in SharePoint by bringing your [Teams app into SharePoint](#introduction). +## 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. -### SharePoint Framework in Teams -You can also implement your Teams tabs using SharePoint Framework. SharePoint Framework web parts are hosted within SharePoint without any need for external services, such as Azure. For SharePoint developers, this significantly simplifies the development process for Teams tabs. For more information on SharePoint Framework in Teams, see [how to use the SharePoint Framework in Teams.](/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) +### Benefits -Bring your SharePoint web parts to Teams and let SharePoint manage the hosting for you. +- 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](~/concepts/build-and-test/apps-package.md). +- Configure the tab on a page just like any other SharePoint web part. +- Access the [context](~/tabs/how-to/access-teams-context.md) of your tab the same way it does when running in Teams. --## Introduction +## Test the sample app -The tab used here's already hosted on Azure, to focus on the required integration work. +1. Download the [sample app manifest](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/app-hello-world/csharp/demo-manifest/app-hello-world.zip). -The sample app that is being used is a Talent Management application. It manages the hiring process of candidates for open positions in a team. Build a sample Teams app and load it into Teams. Don't create a real talent management application. +1. In Teams, select **Apps** > **Manage your apps** > **Upload an app**. -### Benefits of this approach +1. Select **Upload a custom app**. -* Reach SharePoint users with your existing Teams tab. -* Upload your app manifest directly to your SharePoint app catalog. [Teams application packages](~/concepts/build-and-test/apps-package.md) are now supported by SharePoint. -* The users configure the tab on a page just like any other SharePoint web part. -* Your tab can access its [context](~/tabs/how-to/access-teams-context.md) same as it can, when running inside Teams. + :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/upload-custom-app.png" alt-text="Screenshot shows the option to upload a custom app in Teams."::: -To add Teams tab to SharePoint, perform the following steps to add Teams tab to SharePoint: +1. Select the sample app manifest .zip file and select **Open**. A dialog opens to add the custom app. -## Test the sample app +1. Under the **Add** dropdown, select **Add to a team**. -Download the [sample app manifest](https://github.com/MicrosoftDocs/msteams-docs/raw/master/msteams-platform/assets/downloads/TalentMgmt-Azure.zip). + :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/custom-tab-add-to-team.png" alt-text="Screenshot shows how to add a custom app to a team."::: -1. Open Microsoft Teams. -1. Select **Apps** > **Manage your apps** > **Upload an app**. -1. Select **Upload a custom app**. +1. Select the team where you want to install the app and select **Set up**. - :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/upload-custom-app.png" alt-text="Screenshot shows the option to upload a custom app in Teams."::: + :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/set-up-custom-tab.png" alt-text="Screenshot shows the option to select set up a tab in a team."::: -1. The file to upload is located in your **Downloads** folder. It's called TalentMgmt-Azure.zip. The following image displays the corresponding screen: +1. A new static tab is added to your Teams channel. - :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/talentmgmt-azure.png" alt-text="Screenshot shows the Downloads folder."::: + You can experiment with the app and test its features including configurable tabs and a chatbot. -1. You can see the install or consent screen for the talent management app. Select the team you want to install. -1. Select the **Install** and start experimenting with the app. + :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/teams-tab-custom-app.png" alt-text="Screenshot shows a new tab added in a team."::: > [!NOTE]-> The 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](https://support.microsoft.com/office/add-a-sharepoint-page-list-or-document-library-as-a-tab-in-teams-131edef1-455f-4c67-a8ce-efa2ebf25f0b). +> 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](https://support.microsoft.com/office/add-a-sharepoint-page-list-or-document-library-as-a-tab-in-teams-131edef1-455f-4c67-a8ce-efa2ebf25f0b). ++### 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`. -## Use Teams tab in SharePoint + For example, `https://contoso.sharepoint.com/sites/appcatalog/AppCatalog/Forms/AllItems.aspx`. -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**. -1. When prompted, enable **Make this solution available to all sites in the organization**. -The following image displays the corresponding screen: + :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image065.png" alt-text="Screenshot shows the deploy dialog."::: - :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image065.png" alt-text="Screenshot shows the deploy dialog."::: + You must then create a new page in your site. -1. In your site, create a new page by selecting the gear button at the upper right and then select **Add a page**. -The following image displays the corresponding screen: +1. To create a new page, select **Settings** :::image type="icon" source="../../assets/images/tabs/tabs-in-sharepoint/gear-icon.png" border="false"::: and select **Add a page**. :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image066.png" alt-text="Screenshot shows the Office 365 settings options."::: -1. You can see the SharePoint pages authoring experience. Name your page as **My Teams Tab**. +1. Set up your page and give an appropriate name such as **My Teams Tab**. -1. Open the web part toolbox by selecting the `+` button, and select your Teams Tab, named **Contoso HR**. Web parts are sorted alphabetically. If it's a long list, you can use the search bar to find it. This creates a web part in the canvas that contains your Teams tab. The following image displays the tab view: +1. Select **+** to open the web part toolbox. ++ :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/add-web-part.png" alt-text="Screenshot shows the option to add web part." lightbox="../../assets/images/tabs/tabs-in-sharepoint/add-web-part-lightbox.png"::: ++1. From the list, search and select the app you uploaded. It creates a web part in the canvas that contains your Teams tab. :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image071.png" alt-text="Screenshot shows the tab view." lightbox="../../assets/images/tabs/tabs-in-sharepoint/image071.png"::: -1. Select the **Publish** button after you finish editing. +1. After you finish editing, select **Publish**. 1. Select **Add page to navigation** to have a quick reference to your page in the left navigation bar.-The following image displays the tab in SharePoint: :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image073.png" alt-text="Screenshot shows the tab in SharePoint." lightbox="../../assets/images/tabs/tabs-in-sharepoint/image073.png"::: -## Explore App Pages in SharePoint --After your page is published, you can explore [turning your Teams app into a more complete experience inside SharePoint](/sharepoint/dev/spfx/web-parts/single-part-app-pages). This converts the current page into an App Page, showing the normal SharePoint page layout with a full page experience for the Teams tab. +### Explore single part app pages in SharePoint -The following image displays the complete experience of Teams app in SharePoint: +After you publish your page, explore [single part app pages in SharePoint](/sharepoint/dev/spfx/web-parts/single-part-app-pages). 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. :::image type="content" source="../../assets/images/tabs/tabs-in-sharepoint/image085.png" alt-text="Screenshot shows the Teams app in SharePoint." lightbox="../../assets/images/tabs/tabs-in-sharepoint/image085.png"::: -## Code sample +### Code sample | **Sample name** | **Description** | **SPFx** | |--|--|-|-| SPFx web part | SPFx web part samples for tabs, channels, and groups. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-channel-group/spfx) +| SPFx web part | SPFx web part samples for tabs, channels, and groups. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/app-hello-world/csharp/) | ## See also -* [Integrate web apps](../../samples/integrate-web-apps-overview.md) -* [Build Microsoft Teams tab using SharePoint Framework - Tutorial](/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) -* [Use single part app pages in SharePoint Online](/sharepoint/dev/spfx/web-parts/single-part-app-pages) -* [Developer-provided Microsoft Teams app manifest and package](/sharepoint/dev/spfx/deployment-spfx-teams-solutions#developer-provided-microsoft-teams-app-manifest--package) +- [Integrate web apps](../../samples/integrate-web-apps-overview.md) +- [Build Microsoft Teams tab using SharePoint Framework - Tutorial](/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab) +- [Use single part app pages in SharePoint Online](/sharepoint/dev/spfx/web-parts/single-part-app-pages) +- [Developer-provided Microsoft Teams app manifest and package](/sharepoint/dev/spfx/deployment-spfx-teams-solutions#developer-provided-microsoft-teams-app-manifest--package) |
| platform | Debug Your Teams App Test Tool | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-your-Teams-app-test-tool.md | Last updated 11/16/2023 > [!NOTE] >-> Teams App Test Tool is available in the latest prerelease version of the Microsoft Teams Toolkit. Ensure that you install the [latest prerelease version](install-Teams-Toolkit.md#install-a-pre-release-version) of the Teams Toolkit. +> Teams App Test Tool is available in the latest prerelease version of the Microsoft Teams Toolkit. Ensure that you install the [latest prerelease version](install-Teams-Toolkit.md#install-a-prerelease-version) of the Teams Toolkit. Teams App Test Tool (Test Tool) makes debugging bot-based apps effortless. You can chat with your bot and see its messages and Adaptive Cards as they appear in Microsoft Teams. You donΓÇÖt need a Microsoft 365 developer account, tunneling, or Teams app and bot registration to use Test Tool. |
| platform | Install Teams Toolkit | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/install-Teams-Toolkit.md | By default, Visual Studio Code automatically keeps Teams Toolkit up-to-date. If :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Olderversions of VS Code.png" alt-text="Screenshot shows versions other than the latest version of Visual Studio Code."::: - Teams Toolkit install the selected version. + Teams Toolkit installs the selected version. -## Install a pre-release version +## Install a prerelease version -The Teams Toolkit for Visual Studio Code extension is available in a pre-release version. To install a Teams Toolkit pre-release version, follow these steps: +The Teams Toolkit for Visual Studio Code extension is available in a prerelease version. To install a Teams Toolkit prerelease version, follow these steps: 1. Open **Visual Studio Code**. 1. Select **Extensions** :::image type="icon" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/extension icon.png" border="false" alt-text="Screenshot shows the extension icon."::: from the Visual Studio Code activity bar. |