What is the Teams JavaScript client library?
The Teams development platform offers the Teams JavaScript client library as a JavaScript library for your client applications. The library is a collection of JavaScript functions through which you can use the Teams API to integrate features and capabilities into your Teams applications. The features and capabilities appear as native to the Teams client. The library ensures that applications you build with it have a consistent and user-friendly experience for Teams users.
In this unit, you'll learn how to use the library in an application.
Get the library into your app
Let's look at different ways you can install the library in an application.
You can install the LTS version of the Teams JavaScript client library by using npm or yarn.
To install the library by using npm:
npm install --save @microsoft/teams-js
To install the library by using yarn:
yarn add @microsoft/teams-js
If you build web apps without using a bundler, you can load the library directly from the content delivery network. Add the following code snippet to your web app:
<script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js "></script>
How to use the library
The Teams JavaScript client library has APIs that are logically grouped into capabilities. These capabilities are namespaces inside the library. The top-level namespace app contains all the APIs you need for the overall app usage.
You can initialize the library by using app.Initialize(). After the library is initialized, you can start using the namespace to access all the APIs and functionalities that are included in the library. To get the basic contextual information of your app, make a call to app.getContext(). To generate and display a copyable link to information for the user to share, call pages.shareDeepLink().
To get the context information of the app, run this code:
await app.initialize();
const context = await app.getContext();
Getting context information about Microsoft Teams helps your Teams app provide a better and more tailored experience for users. For example, with the context information, your app can understand the specific environment in which it's running, like in Teams or in a browser, team, or channel, or even the user that your app is interacting with. These insights are useful for determining how to properly configure and display relevant and customized functionality or capabilities to the user.
Capabilities
The APIs in the SDK are grouped logically and are called capabilities. Examples of capabilities are chat, dialog, and authentication. Each capability has its own namespaces; for example, chat, dialog, or page.
Note
The Teams JavaScript client library version 2.0.0 and later enables Teams apps to run in other host apps like Outlook and Office.com. These extensibility features are currently in preview on these apps.
Think of Microsoft Teams as the current host for your app. The host has some capabilities that can be integrated into your app. For example, your app can initiate a new chat by calling the chat.openChat() function of the Microsoft Teams chat capability. This opens a new 1:1 chat with a user.
You can use <the-capability>.isSupported() function for each capability to check whether the capability is supported by the host. For example, before making the call to chat.openChat(), you might want to check whether chat is supported in the host app where your app is running. To check, you call the function chat.isSupported(). It returns true if chat is supported and false if chat isn't supported. This check allows your app to run only capabilities that are supported in the host apps, so users have a more natural experience in each host.