TeamsJS capability support across Microsoft 365
Starting with version 2.0.0, Teams JavaScript client library (TeamsJS) enables certain types of Teams apps to run across the Microsoft 365 ecosystem. Currently, Microsoft 365 applications that can host Teams apps (Microsoft 365 app and Outlook) support only a subset of the application types and capabilities you can build for the Teams platform. This support expands over time.
This article details the level of support of TeamsJS version 2.x capabilities across various host applications. For more information on what's changed between TeamsJS versions 1.x and 2.x, see What's new in TeamsJS version 2.x.x.
The following TeamsJS Capability table lists TeamsJS capabilities (public namespaces) and their support across Microsoft 365 host applications. Some capabilities are marked with Deprecated or Preview badges, which have the following meanings:
Badge | Meaning |
---|---|
![]() |
This capability is in preview and subject to change based on feedback. Don't use this capability in production. |
![]() |
This capability is deprecated in favor of newer functionality, though it's supported for backwards compatibility purposes. For new apps, use the capability recommended in the usage notes of the deprecated capability. |
Microsoft 365 hosts are signified by the product icons in the following tables:
Microsoft Teams | Microsoft 365 app | Microsoft Outlook |
---|---|---|
![]() |
![]() |
![]() |
Preview versions for both Teams and Outlook (launched through Try the new Teams and Try the new Outlook toggle controls in Teams and Outlook clients respectively) have different levels of support. The preview versions are designated by the following PRE (preview) icons:
Microsoft Teams preview | Microsoft Outlook preview |
---|---|
![]() |
![]() |
Entries marked with a check and asterisk (✓*) indicate support for that host is available only to preview audiences (enrolled in Microsoft 365 Targeted Releases for web clients or with Beta Channel apps installed for desktop clients). Select any TeamsJS Capability for further details, including reference docs, samples, and usage notes.
Cross-host capabilities
The following table lists host application support for TeamsJS capabilities that can run outside of Microsoft Teams.
TeamsJS Capability | Web | Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
app | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* |
appInstallDialog | ✓ | ✓ | ✓ | ✓* | ✓ | ✓ | ✓ | |||||||
authentication | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* |
calendar | ✓* | ✓* | ✓* | |||||||||||
dialog![]() |
✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓ | ✓ | |||||
geoLocation![]() |
✓ | ✓* | ✓ | |||||||||||
✓* | ✓* | ✓* | ✓* | |||||||||||
pages | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* | |
profile![]() |
✓* | |||||||||||||
search![]() |
✓* | ✓* | ✓* | |||||||||||
secondaryBrowser![]() |
✓* |
Teams-only capabilities
The following table lists support for TeamsJS capabilities that run only in the Microsoft Teams environment.
TeamsJS Capability | Web | Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
appInitialization![]() |
✓ | ✓ | ✓ | ✓ | ||||||||||
call | ✓ | ✓ | ✓ | ✓ | ||||||||||
chat![]() |
✓ | ✓ | ✓* | ✓ | ✓ | |||||||||
location![]() |
✓ | ✓ | ✓ | ✓ | ||||||||||
menus | ✓ | ✓ | ||||||||||||
people | ✓ | ✓ | ✓* | ✓ | ✓ | |||||||||
settings![]() |
✓ | ✓ | ✓ | ✓ | ||||||||||
sharing | ✓ | ✓ | ✓* | |||||||||||
stageView![]() |
✓ | ✓ | ✓* | |||||||||||
tasks![]() |
✓ | ✓ | ✓ | ✓ | ||||||||||
teamsCore | ✓ | ✓ | ✓* | |||||||||||
video![]() |
✓ | ✓ | ✓ | ✓ | ||||||||||
webStorage![]() |
✓ | ✓ | ✓ |
Preview capabilities awaiting host support
Some capabilities in the source are in early preview and still awaiting initial support in one or more host applications that include barCode, media, meeting, and search.
Later in this article, you can find more information on each capability of the Teams JavaScript client library.
app
Namespace to interact with app initialization and lifecycle.
The app
namespace is supported globally across all application hosts and, therefore, doesn't have an isSupported
function.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
app | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* |
appInitialization
Deprecated. Namespace for initializing an app. For new apps, use app.initialize() from the app capability.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
appInitialization ![]() |
✓ | ✓ | ✓ | ✓ |
appInstallDialog
Namespace used to open a dialog for installing an application.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
appInstallDialog | ✓ | ✓ | ✓ | ✓* | ✓ | ✓ | ✓ |
authentication
Namespace to interact with the authentication-related part of the library. This module is used for starting or completing authentication flows.
The authentication
namespace is supported globally across all application hosts and, therefore, doesn't have an isSupported
function.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
authentication | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* |
barCode
Preview. Namespace to interact with the barcode scanning-related part of the library.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
barCode ![]() |
calendar
Namespace providing calendar-related functionality.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
calendar | ✓* | ✓* | ✓* |
call
Namespace providing functionality to start a call with others.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
call | ✓ | ✓ | ✓ | ✓ |
chat
Preview. Namespace providing functionality to start a chat with others.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
chat ![]() |
✓ | ✓ | ✓* | ✓ | ✓ |
dialog
Preview. This group of capabilities enables apps to show modal task modules (dialogs). There are two primary types of dialogs: URL-based dialogs and Adaptive Card dialogs. Both types of dialogs are shown on top of your app, preventing interaction with your app while they're displayed.
- URL-based dialogs allow you to specify a URL from which the contents are shown inside the dialog. For URL dialogs, use the functions and interfaces in the url namespace.
- Adaptive Card-based dialogs allow you to provide JSON describing an Adaptive Card that is shown inside the dialog. For Adaptive Card dialogs, use the functions and interfaces in the adaptiveCard namespace.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
dialog ![]() |
✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓ | ✓ | |||||
dialog.adaptiveCard ![]() |
✓* | |||||||||||||
dialog.adaptiveCard.bot ![]() |
✓* | |||||||||||||
dialog.update![]() |
✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | |||||||
dialog.url![]() |
✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓ | ✓ | |||||
dialog.url.bot![]() |
✓ | ✓ | ✓* | ✓* | ✓ | ✓ |
dialog.adaptiveCard
Preview. Subcapability for interacting with Adaptive Card dialogs.
dialog.adaptiveCard.bot
Preview. Subcapability for interaction with Adaptive Card dialogs that need to communicate with the Bot Framework.
dialog.update
Preview. Namespace for updating dialogs.
dialog.url
Preview. Subcapability for interacting with HTML-based dialogs.
dialog.url.bot
Preview. Subcapability for interacting with HTML-based dialogs that need to communicate with the Bot Framework.
geoLocation
Preview. Namespace providing location-related functionality. This is the newer version of the location module.
Capabilities that require the user to grant device permissions (such as geoLocation) are partially supported for apps running outside of Teams. Users can adjust app permissions from the app header when running in Outlook and Microsoft 365 app, or from app settings on mobile. It's recommended to modify your code to check Outlook and Microsoft 365 supportability:
- Call
isSupported
on a capability before using it. - Catch and handle errors when calling TeamsJS and HTML5 APIs
When an API doesn't support or generates an error, add logic to fail or provide a workaround. For example:
- Direct the user to your app's website
- Direct the user to use the app in Teams to complete the flow
- Notify the user that the functionality isn't yet available
Tip
Ensure your app manifest only specifies the device permissions it's using.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
geoLocation ![]() |
✓ | ✓* | ✓ | |||||||||||
geoLocation.map ![]() |
geoLocation.map
Preview. Subcapability providing map-related functionality.
location
Deprecated. Namespace providing location-related functionality (get and show location). Use geoLocation for new apps.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
location ![]() |
✓ | ✓ | ✓ | ✓ |
mail
Namespace providing email-related functionality.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
✓* | ✓* | ✓* | ✓* |
media
Namespace providing image file-related functionality.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
media |
meeting
Namespace providing in-meeting app functionality.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
meeting |
menus
Namespace to interact with the menu-related part of the library. This module is used to show View Configuration, Action Menu, and Navigation Bar Menu.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
menus | ✓ | ✓ |
pages
Navigation-related part of the TeamsJS library.
Prior to TeamsJS version 2.0, all deep linking scenarios were handled using shareDeepLink
(to generate a link to a specific part of your app) and executeDeepLink
(to navigate to a deep link from or within your app). TeamsJS v.2.0 introduces a new API, navigateToApp
, for navigating to pages (and subpages) within an app in a consistent way across app hosts (Microsoft 365 app and Outlook, in addition to Teams). For new apps, follow the linked updated guidance depending on your navigation scenario:
Deep links into your app. Use
pages.shareDeepLink
(known as shareDeepLink prior to TeamsJS v.2.0) to generate and display a copyable link for the user to share. When selected, the user is prompted to install the app if it's not already installed for the application host.Navigation within your app. Use the new
pages.currentApp
namespace to navigate within your app within the hosting application. Specifically, the functionnavigateTo(NavigateWithinAppParams)
to allow navigation to a specific tab within the current app and the functionnavigateToDefaultPage()
to navigate to the first tab defined in the app's manifest. For more information, see navigate within a tab app.These APIs provide the equivalent of navigating to a deep link (as the now deprecated executeDeepLink was once used for) without requiring your app to construct a URL or manage different deep link formats for different application hosts.
Deep links out of your app. For deep links from your app to various areas of its current host, use the typed APIs provided by the TeamsJS library. For example, use the
calendar
capability to open a scheduling dialog or calendar item from your app.For deep links from your app to other apps running in the same host, use
pages.navigateToApp
.For any other external deep linking scenarios, you can use
app.openLink
, which provides similar functionality to the now deprecated (starting in TeamsJS v.2.0) executeDeepLink API.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
pages | ✓ | ✓ | ✓* | ✓ | ✓* | ✓ | ✓* | ✓* | ✓ | ✓ | ✓* | ✓ | ✓ | ✓* |
pages.appButton | ✓ | ✓ | ✓ | ✓* | ✓ | |||||||||
pages.backStack | ✓ | ✓ | ✓* | ✓ | ✓ | |||||||||
pages.currentApp | ✓ | ✓ | ✓ | ✓ | ✓* | |||||||||
pages.config | ✓ | ✓ | ✓* | ✓ | ✓ | |||||||||
pages.tabs | ✓ | ✓ | ✓* |
pages.appButton
Provides APIs to interact with the app button part of the SDK.
pages.backStack
Provides APIs for handling the user's navigational history.
pages.config
Provides APIs to interact with the configuration-specific part of the SDK. This object is usable only on the configuration frame.
pages.currentApp
Provides functions for navigating without needing to specify your application ID.
pages.tabs
Provides APIs for querying and navigating between contextual tabs of an application. Unlike personal tabs, contextual tabs are pages associated with a specific context, such as channel or chat.
people
Namespace providing functionality for People Picker API.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
people | ✓ | ✓ | ✓* | ✓ | ✓ |
profile
Preview. Namespace providing for profile-related functionality.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
profile ![]() |
✓* |
search
Preview. Allows your application to interact with the host Microsoft 365 application's search box. By integrating your application with the host's search box, users can search your app using the same search box they use elsewhere in Teams, Outlook, or Microsoft 365 app.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
search ![]() |
✓* | ✓* | ✓* |
secondaryBrowser
Preview. Namespace supporting in-app browser experiences of the host app. For example, opening a URL in the host app inside a browser.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
secondaryBrowser ![]() |
✓* |
settings
Deprecated. Provides settings-related functionality. Use equivalent APIs from the pages for new apps.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
settings ![]() |
✓ | ✓ | ✓ | ✓ |
sharing
Namespace to open a share dialog for web content. For more information, see Share to Teams from personal app or tab.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
sharing | ✓ | ✓ | ✓* |
stageView
Preview. Namespace to interact with the Stage View specific part of the library.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
stageView ![]() |
✓ | ✓ | ✓* |
tasks
The earlier version of the capability for providing modal dialog (task module) supports versions prior to TeamsJS v2.8.0. For new apps, use the dialog capability.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
tasks ![]() |
✓ | ✓ | ✓ | ✓ |
teamsCore
Namespace containing the set of APIs that support Teams-specific functionalities.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
teamsCore | ✓ | ✓ | ✓* |
video
Preview. Namespace representing functionality for in-meeting video effects.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
video ![]() |
✓ | ✓ | ✓ | ✓ |
webStorage
Preview. Contains functionality to allow web apps to store data in webview cache.
Web | Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | Android | iOS | ||||||||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
webStorage ![]() |
✓ | ✓ | ✓ |
Code sample
Sample name | Description | Source |
---|---|---|
TeamsJS Capability Checker | Sample application to demonstrate the capabilities of TeamsJS library v2 in Microsoft Teams apps extended across Outlook and Microsoft 365. | TypeScript |
See also
Feedback
Submit and view feedback for