Updates from: 07/19/2022 01:18:35
Service Microsoft Docs article Related commit history on GitHub Change details
platform API References https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/API-references.md
description: Learn to identify the meeting apps API references with examples and
ms.localizationpriority: medium Last updated : 04/07/2022 # Meeting apps API references
-The meeting extensibility provide APIs to enhance meeting experience. You can perform the following with help of the listed APIs:
+The meeting extensibility provides APIs to enhance meeting experience. You can perform the following with help of the listed APIs:
* Build apps or integrate existing apps within meeting lifecycle. * Use APIs to make your app aware of meeting.
The following table provides a list of APIs available across the Microsoft Teams
|[**Send in-meeting notification**](#send-an-in-meeting-notification)| Provide meeting signals using the existing conversation notification API for user-bot chat and allows to notify user action that shows an in-meeting notification. | [MSBF SDK](/dotnet/api/microsoft.bot.builder.teams.teamsactivityextensions.teamsnotifyuser?view=botbuilder-dotnet-stable&preserve-view=true) | |[**Get meeting details**](#get-meeting-details-api)| Get a meeting's static metadata. | [MSBF SDK](/dotnet/api/microsoft.bot.builder.teams.teamsinfo.getmeetinginfoasync?view=botbuilder-dotnet-stable&preserve-view=true) | |[**Send real-time captions**](#send-real-time-captions-api)| Send real-time captions to an ongoing meeting. | [MSTC SDK](/azure/cognitive-services/speech-service/speech-sdk?tabs=nodejs%2Cubuntu%2Cios-xcode%2Cmac-xcode%2Candroid-studio#get-the-speech-sdk&preserve-view=true) |
-|[**Share app content to stage**](#share-app-content-to-stage-api)| Share specific parts of the app to meeting stage from the app side panel in a meeting. | [MSTC SDK](/javascript/api/@microsoft/teams-js/microsoftteams.meeting?view=msteams-client-js-latest&preserve-view=true) |
-|[**Get app content stage sharing state**](#get-app-content-stage-sharing-state-api)| Fetch information about app's sharing state on the meeting stage. | [MSTC SDK](/javascript/api/@microsoft/teams-js/microsoftteams.meeting.iappcontentstagesharingstate?view=msteams-client-js-latest&preserve-view=true) |
-|[**Get app content stage sharing capabilities**](#get-app-content-stage-sharing-capabilities-api)| Fetch the app's capabilities for sharing to the meeting stage. | [MSTC SDK](/javascript/api/@microsoft/teams-js/microsoftteams.meeting.iappcontentstagesharingcapabilities?view=msteams-client-js-latest&preserve-view=true) |
+|[**Share app content to stage**](#share-app-content-to-stage-api)| Share specific parts of the app to meeting stage from the app side panel in a meeting. | [MSTC SDK](/javascript/api/@microsoft/teams-js/meeting) |
+|[**Get app content stage sharing state**](#get-app-content-stage-sharing-state-api)| Fetch information about app's sharing state on the meeting stage. | [MSTC SDK](/javascript/api/@microsoft/teams-js/meeting.iappcontentstagesharingstate) |
+|[**Get app content stage sharing capabilities**](#get-app-content-stage-sharing-capabilities-api)| Fetch the app's capabilities for sharing to the meeting stage. | [MSTC SDK](/javascript/api/@microsoft/teams-js/meeting.iappcontentstagesharingcapabilities) |
|[**Get real-time Teams meeting events**](#get-real-time-teams-meeting-events-api)|Fetch real-time meeting events, such as actual start and end time.| [MSBF SDK](/dotnet/api/microsoft.bot.builder.teams.teamsactivityhandler.onteamsmeetingstartasync?view=botbuilder-dotnet-stable&preserve-view=true) | ## Get user context API
GET /v1/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId}
| **user.name** | Name of the user. | | **user.givenName** | First Name of the user.| | **user.surname** | Last Name of the user. |
-| **user.email** | Mail Id of the user. |
+| **user.email** | Mail ID of the user. |
| **user.userPrincipalName** | UPN of the user. | | **user.tenantId** | Azure Active Directory tenant ID. | | **user.userRole** | Role of the user e.g. 'admin' or 'user'. |
The JSON response body for Meeting Details API is as follows:
| Property name | Purpose | |||
-| **details.id** | The meeting's Id, encoded as a BASE64 string. |
+| **details.id** | The meeting's ID, encoded as a BASE64 string. |
| **details.msGraphResourceId** | The MsGraphResourceId, used specifically for MS Graph API calls. | | **details.scheduledStartTime** | The meeting's scheduled start time, in UTC. | | **details.scheduledEndTime** | The meeting's scheduled end time, in UTC. |
The JSON response body for Meeting Details API is as follows:
In case of Recurring meeting type,
-**startDate**: Specifies the date to start applying the pattern. The value of startDate must correspond to the date value of the start property on the event resource. Note that the first occurrence of the meeting may not occur on this date if it does not fit the pattern.
+**startDate**: Specifies the date to start applying the pattern. The value of startDate must correspond to the date value of the start property on the event resource. Note that the first occurrence of the meeting may not occur on this date if it doesn't fit the pattern.
-**endDate**: Specifies the date to stop applying the pattern. Note that the last occurrence of the meeting may not occur on this date if it does not fit the pattern.
+**endDate**: Specifies the date to stop applying the pattern. Note that the last occurrence of the meeting may not occur on this date if it doesn't fit the pattern.
## Send real-time captions API
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
description: Learn how to design meeting extensions for your apps in Teams meeti
ms.localizationpriority: medium Last updated : 04/07/2022 # Designing your Microsoft Teams meeting extension
platform Enable And Configure Your App For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md
Title: Enable and configure your apps for Teams meetings
description: Learn how to enable and configure your apps for Teams meetings and different meeting scenarios, update app manifest, configure features and more. + ms.localizationpriority: high Last updated : 04/07/2022 # Enable and configure apps for meetings
During a meeting, you can use the `meetingSidePanel` or in-meeting notification
#### Meeting SidePanel
-The `meetingSidePanel` enables you to customize experiences in a meeting that allow organizers and presenters to have different set of views and actions. In your app manifest, you must add `meetingSidePanel` to the context array. In the meeting and in all scenarios, the app is rendered in an in-meeting tab that is 320 pixels in width. For more information, see [FrameContext interface](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true).
+The `meetingSidePanel` enables you to customize experiences in a meeting that allow organizers and presenters to have different set of views and actions. In your app manifest, you must add `meetingSidePanel` to the context array. In the meeting and in all scenarios, the app is rendered in an in-meeting tab that is 320 pixels in width. For more information, see [FrameInfo interface](/javascript/api/@microsoft/teams-js/frameinfo) (known as `FrameContext` prior to TeamsJS v.2.0.0).
-To use the `userContext` API to route requests, see [Teams SDK](../tabs/how-to/access-teams-context.md#user-context). For more information, see [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md). Authentication flow for tabs is similar to the authentication flow for websites. So tabs can use OAuth 2.0 directly. For more information, see [Microsoft identity platform and OAuth 2.0 authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow).
+You can [use the user's context to route requests](../tabs/how-to/access-teams-context.md#user-context). For more information, see [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md). Authentication flow for tabs is similar to the authentication flow for websites. Tabs can use OAuth 2.0 directly. For more information, see [Microsoft identity platform and OAuth 2.0 authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow).
Message extension works as expected when a user is in an in-meeting view. The user can post compose message extension cards. AppName in-meeting is a tooltip that states the app name in-meeting U-bar.
platform Meeting App Extensibility https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md
description: Learn about Teams meeting lifecycle and users meeting experience in desktop and mobile, User types, integrate bots and message extension in meeting lifecycle. ms.localizationpriority: medium+ Last updated : 04/07/2022 # Unified meetings apps
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
description: In this article, learn how apps works in Microsoft Teams meetings b
ms.localizationpriority: medium Last updated : 04/07/2022 # Apps for Teams meetings and calls
platform Teams Live Share Capabilities https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-capabilities.md
Title: Live Share getting started+ description: In this module, learn more about live share SDK capabilities, RSC permissions and ephermal data structures.-+ ms.localizationpriority: high Last updated : 04/07/2022 --- # Live Share core capabilities The Live Share SDK can be added to your meeting extension's `sidePanel` and `meetingStage` contexts with minimal effort. This article focuses on how to integrate the Live Share SDK into your app and key capabilities of the SDK.
platform Teams Live Share Faq https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-faq.md
Title: Live Share FAQ+ description: In this module, learn more about Live Share Frequently Asked Questions. ms.localizationpriority: high Last updated : 04/07/2022
platform Teams Live Share Media Capabilities https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-media-capabilities.md
Title: Live Share media capabilities+ description: In this module, learn more about Live Share media capabilities, suspensions and wait points, audio ducking, and synchronizing video and audio.-+ ms.localizationpriority: high -- Last updated : 04/07/2022 # Live Share media capabilities
platform Teams Live Share Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-overview.md
Title: Live Share overview+ description: In this module, learn what is Microsoft Live Share SDK and its user scenarios. ms.localizationpriority: high Last updated : 04/07/2022
platform Teams Live Share Quick Start https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-quick-start.md
Title: Live Share quick start+ description: In this module, learn how to quickly try the Dice Roller sample-+ ms.localizationpriority: high - Last updated : 04/07/2022 # Quick start guide
To get started, install:
1. Clone the [Live Share SDK](https://github.com/microsoft/live-share-sdk) repository to test the sample app: ```bash
- $ git clone https://github.com/microsoft/live-share-sdk.git
+ git clone https://github.com/microsoft/live-share-sdk.git
``` 1. Run the following command to go to the Dice Roller sample app folder: ```bash
- $ cd live-share-sdk\samples\01.dice-roller
+ cd live-share-sdk\samples\01.dice-roller
``` 1. Run the following command to install the dependency package: ```bash
- $ npm install
+ npm install
``` 1. Run the following command to start the client and the local server: ```bash
- $ npm start
+ npm start
``` A new browser tab opens a `http://localhost:8080` url and the Dice Roller game appears.
platform Teams Live Share Tutorial https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-tutorial.md
Title: Live Share code tutorial+ description: In this module, learn how to get started with Live Share SDK and how to build Dice Roller sample using Live Share SDK-+ ms.localizationpriority: high - Last updated : 04/07/2022 # Dice Roller code tutorial
platform Teams Together Mode https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-together-mode.md
Title: Custom Together Mode Scenes+ description: Work with custom Together Mode scenes ms.localizationpriority: high+ Last updated : 04/07/2022 # Custom Together Mode scenes in Teams
platform Deep Links https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-links.md
microsoftTeams.executeDeepLink(/*deepLink*/);
> [!NOTE] > In order to open the scheduling dialog in Teams, developers need to continue using the original deep-link URL based method, since Teams does not yet support the calendar capability.
-For more information about working with the calendar, see, the [calendar](/javascript/api/@microsoft/teams-js/calendar?view=msteams-client-js-latest&preserve-view=true) namespace in the API reference documentation.
+For more information about working with the calendar, see [calendar](/javascript/api/@microsoft/teams-js/calendar?view=msteams-client-js-latest&preserve-view=true) namespace in the API reference documentation.
-### tab/Teams JS v1
+# [TeamsJS v2](#tab/teamsjs-v2)
+
+```javascript
+// Open a scheduling dialog from your tab
+if(calendar.isSupported()) {
+ const calendarPromise = calendar.composeMeeting({
+ attendees: ["joe@contoso.com", "bob@contoso.com"],
+ content: "test content",
+ endTime: "2018-10-24T10:30:00-07:00",
+ startTime: "2018-10-24T10:00:00-07:00",
+ subject: "test subject"});
+ calendarPromise.
+ then((result) => {/*Successful operation*/}).
+ catch((error) => {/*Unsuccessful operation*/});
+}
+else { /* handle case where capability isn't supported */ }
+```
+
+# [TeamsJS v1](#tab/teamsjs-v1)
```javascript // Open a scheduling dialog from your tab
microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/meeting/new?subjec
+Alternatively, you can manually create deep links to the Teams built-in scheduling dialog.
+ #### Generate a deep link to the scheduling dialog While it's recommended to use the strongly typed APIs of TeamsJS, it's possible to manually create deep links to the Teams built-in scheduling dialog. Use the following format for a deep link that you can use in a bot, Connector, or message extension card:
platform Location Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/location-capability.md
You can integrate the location capabilities of native device with your Teams app
You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the location APIs, such as [getLocation](/javascript/api/@microsoft/teams-js/location.locationprops) and [showLocation](/javascript/api/@microsoft/teams-js/location.locationprops?) to integrate the capabilities within your app. + ## Advantages of integrating location capabilities The main advantage of integrating location capabilities in your Teams apps is that it allows web app developers on Teams platform to leverage location functionality with Microsoft Teams JavaScript client SDK.
The following image depicts web app experience of location capabilities:
### Code snippets
+# [TeamsJS v2](#tab/teamsjs-v2)
+
+**Calling `getLocation` API to retrieve the location:**
+
+```javascript
+import {location} from "@microsoft/teams-js"
+
+let locationProps = {"allowChooseLocation":true,"showMap":true};
+if(location.isSupported()) {
+ const locationPromise = location.getLocation(locationProps);
+ locationPromise.
+ then((result) => {output(JSON.stringify(result));}.
+ catch((error) => {output(error);});
+}
+else {/*Handle case where capability isn't supported */}
+```
+
+**Calling `showLocation` API to display the location:**
+
+```javascript
+import {location} from "@microsoft/teams-js"
+
+let location = {"latitude":17,"longitude":17};
+if(location.isSupported()) {
+ const locationPromise = location.showLocation(location);
+ locationPromise.
+ then((result) => {/*Successful map display*/}).
+ catch((error) => {/*Failed map display*/});
+}
+else {/*Handle case where capability isn't supported */}
+```
+
+# [TeamsJS v1](#tab/teamsjs-v1)
+ **Calling `getLocation` API to retrieve the location:** ```javascript
microsoftTeams.location.showLocation(location, (err: microsoftTeams.SdkError, re
}); ``` ++ ## Error handling You must ensure to handle these errors appropriately in your Teams app. The following table lists the error codes and the conditions under which the errors are generated:
platform Media Capabilities https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/media-capabilities.md
You can integrate native device capabilities, such as camera and microphone with your Teams app. For integration, you can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) that provides the necessary tools for your app to access a userΓÇÖs [device permissions](native-device-permissions.md). Use suitable media capability APIs to integrate the device capabilities, such as camera and microphone with the Teams platform within your Microsoft Teams app, and build a richer experience. The media capability is available for Teams web client, desktop, and mobile. To integrate media capabilities, you must update the app manifest file and call the media capability APIs.
-For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the respective APIs, which allow you to use native media capabilities. It is important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app.
+For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the respective APIs, which allow you to use native media capabilities. It's important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app.
## Advantages
Update your Teams app [manifest.json](../../resources/schem#
## Media capability APIs
-The [selectMedia](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true), [getMedia](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediachunk?view=msteams-client-js-latest&preserve-view=true), and [viewImages](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageuri?view=msteams-client-js-latest&preserve-view=true) APIs enable you to use native media capabilities as follows:
+The [selectMedia](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-selectmedia), [getMedia](/javascript/api/@microsoft/teams-js/media.media#@microsoft-teams-js-media-media-getmedia), and [viewImages](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-viewimages) APIs enable you to use native media capabilities as follows:
* Use the native **microphone** to allow users to **record audio** (record 10 minutes of conversation) from the device. * Use native **camera control** to allow users to **capture and attach images** on the go.
The [selectMedia](/javascript/api/@microsoft/teams-js/microsoftteams.media.media
> [!IMPORTANT] >
-> * The `selectMedia`, `getMedia`, and `viewImages` APIs can be invoked from multiple Teams surfaces, such as task modules, tabs, and personal apps. For more details, see [Entry points for Teams apps](../extensibility-points.md).</br>
+> * The `selectMedia`, `getMedia`, and `viewImages` APIs can be invoked from multiple Teams surfaces, such as task modules, tabs, and personal apps. For more information, see [Entry points for Teams apps](../extensibility-points.md).</br>
> * `selectMedia` API supports both camera and microphone capabilities through different input configurations. > * The `selectMedia` API for accessing microphone capability supports for mobile clients only.
The following table lists set of APIs to enable your device's media capabilities
| API | Description | | | |
-| [**selectMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true) (**Camera)**| This API allows users to **capture or select media from the device camera** and return it to the web-app. The users can edit, crop, rotate, annotate, or draw over images before submission. In response to `selectMedia`, the web-app receives the media IDs of selected images and a thumbnail of the selected media. This API can be further configured through the [ImageProps](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageprops?view=msteams-client-js-latest&preserve-view=true) configuration. |
-| [**selectMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true) (**Microphone**)| Set the [mediaType](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediatype?view=msteams-client-js-latest&preserve-view=true) to `4` in `selectMedia` API for accessing microphone capability. This API also allows users to record audio from the device microphone and return recorded clips to the web-app. The users can pause, re-record, and play recording preview before submission. In response to **selectMedia**, the web-app receives media IDs of the selected audio recording. <br/> Use `maxDuration`, if you require to configure a duration in minutes for recording the conversation. The current duration for recording is 10 minutes, after which the recording terminates. |
-| [**getMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediachunk?view=msteams-client-js-latest&preserve-view=true)| This API retrieves the media captured by `selectMedia` API in chunks, irrespective of the media size. These chunks are assembled and sent back to the web app as a file or blob. Breaking media into smaller chunks facilitates large file transfer. |
-| [**viewImages**](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageuri?view=msteams-client-js-latest&preserve-view=true)| This API enables the user to view images in full-screen mode as a scrollable list.|
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-selectmedia) (**Camera)**| This API allows users to **capture or select media from the device camera** and return it to the web-app. The users can edit, crop, rotate, annotate, or draw over images before submission. In response to `selectMedia`, the web-app receives the media IDs of selected images and a thumbnail of the selected media. This API can be further configured through the [ImageProps](/javascript/api/@microsoft/teams-js/media.imageprops) configuration. |
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-selectmedia) (**Microphone**)| Set the [mediaType](/javascript/api/@microsoft/teams-js/media.mediatype) to `4` (Audio) in `selectMedia` API for accessing microphone capability. This API also allows users to record audio from the device microphone and return recorded clips to the web app. The users can pause, re-record, and play recording preview before submission. In response to **selectMedia**, the web-app receives media IDs of the selected audio recording. <br/> Use `maxDuration`, if you require to configure a duration in minutes for recording the conversation. The current duration for recording is 10 minutes, after which the recording terminates. |
+| [**getMedia**](/javascript/api/@microsoft/teams-js/media.media#@microsoft-teams-js-media-media-getmedia)| This API retrieves the media captured by `selectMedia` API in chunks, irrespective of the media size. These chunks are assembled and sent back to the web app as a file or blob. Breaking media into smaller chunks facilitates large file transfer. |
+| [**viewImages**](/javascript/api/@microsoft/teams-js/media#@microsoft-teams-js-media-viewimages)| This API enables the user to view images in full-screen mode as a scrollable list.|
# [Mobile](#tab/mobile)
Ensure to handle these errors appropriately in your Teams app. The following tab
|Error code | Error name | Description| | | | -- | | **100** | NOT_SUPPORTED_ON_PLATFORM | API is not supported on the current platform.|
-| **404** | FILE_NOT_FOUND | File specified is not found in the given location.|
+| **404** | FILE_NOT_FOUND | File specified isn't found in the given location.|
| **500** | INTERNAL_ERROR | Internal error is encountered while performing the required operation.| | **1000** | PERMISSION_DENIED |Permission is denied by the user.| | **3000** | NO_HW_SUPPORT | The hardware does not support the capability.| | **4000**| INVALID_ARGUMENTS | One or more arguments are invalid.| | **8000** | USER_ABORT |User aborts the operation.|
-| **9000**| OLD_PLATFORM | Platform code is outdated and does not implement this API.|
+| **9000**| OLD_PLATFORM | Platform code is outdated and doesn't implement this API.|
| **10000**| SIZE_EXCEEDED | Return value is too big and has exceeded the platform size boundaries.| ## Code snippets
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/native-device-permissions.md
For example:
* To prompt the user to access their location, you must call `getCurrentPosition()`: ```JavaScript
- navigator.geolocation.getCurrentPosition (function (position) { /*... */ });
+ navigator.geolocation.getCurrentPosition(function (position) { /*... */ });
``` * To prompt the user to access their camera on desktop or web, you must call `getUserMedia()`:
For example:
* To prompt the user to share location on the map interface, Teams app asks permission when you call `getLocation()`:
+ # [TeamsJS v2](#tab/teamsjs-v2)
+
+ ```JavaScript
+ function getLocation() {
+ location.getLocation({ allowChooseLocation: true, showMap: true }).then((location) => {
+ let currentLocation = JSON.stringify(location);
+ }).catch((error) => { /*Error getting location*/ })}
+ ```
+
+ # [TeamsJS v1](#tab/teamsjs-v1)
+ ```JavaScript function getLocation() { microsoftTeams.location.getLocation({ allowChooseLocation: true, showMap: true }, (error: microsoftTeams.SdkError, location: microsoftTeams.location.Location) => {
For example:
} ```
+ ***
+
+Here's how the device permissions prompts appear to users on mobile and desktop.
+ # [Mobile](#tab/mobile) <!-- ![Tabs mobile device permissions prompt](../../assets/images/tabs/MobileLocationPermission.png) -->
platform People Picker Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/people-picker-capability.md
The People Picker control on web or desktop is launched in a modal window on top
The following code snippet displays use of the `selectPeople` API people from a list:
+# [TeamsJS v2](#tab/teamsjs-v2)
+ ```javascript
-microsoftTeams.people.selectPeople((error: microsoftTeams.SdkError, people: microsoftTeams.people.PeoplePickerResult[]) =>
+people.selectPeople({ setSelected: ["aad id"], openOrgWideSearchInChatOrChannel: true, singleSelect: false, Title: true}).then(people) =>
+ {
+ output(" People length: " + people.length + " " + JSON.stringify(people));
+ }).catch((error) => { /*Unsuccessful operation*/ });
+```
+
+# [TeamsJS v1](#tab/teamsjs-v1)
+
+```javascript
+people.selectPeople((error: microsoftTeams.SdkError, people: microsoftTeams.people.PeoplePickerResult[]) =>
{ if (error) {
microsoftTeams.people.selectPeople((error: microsoftTeams.SdkError, people: micr
{ output(" People length: " + people.length + " " + JSON.stringify(people)); }
- },{ setSelected: ["aad id"], openOrgWideSearchInChatOrChannel: true, singleSelect: false});
+ },{ setSelected: ["aad id"], openOrgWideSearchInChatOrChannel: true, singleSelect: false, Title: true});
```
+***
+ ## Error handling The following table lists the error codes and their descriptions:
platform Sdk Include https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/sdk-include.md
> [!NOTE]
-> This topic reflects version 2.0.0 of the Microsoft Teams JavaScript client SDK. If you are using an earlier version, refer to the [Teams JS SDK overview](msteams-docs/msteams-platform/tabs/how-to/../../../../../tabs/how-to/using-teams-client-sdk.md) for guidance on the differences between v1 and v2.
+> This topic reflects version 2.0.x of the Microsoft Teams JavaScript client SDK. If you are using an earlier version, refer to the [Teams JS SDK overview](msteams-docs/msteams-platform/tabs/how-to/../../../../../tabs/how-to/using-teams-client-sdk.md) for guidance on the differences between the latest TeamsJS and earlier versions.
platform Prerequisites https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/prerequisites.md
Title: Set up your dev environment for extending Teams apps across Microsoft 365
description: Learn about the prerequisites required to run preview builds for extending your Teams apps across Microsoft 365. Last updated 05/24/2022 + ms.localizationpriority: high # Set up your dev environment for extending Teams apps across Microsoft 365
platform Faqs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/faqs.md
Title: Moodle Frequently asked questions description: In this article, fetch answers to some frequently asked questions while using the Moodle LMS. -+ ms.localizationpriority: high
platform M365 Plugins Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/m365-plugins/m365-plugins-overview.md
Title: Microsoft 365 plugins description: In this article, you'll have Microsoft 365 plugins, plugin list and labels, Microsoft 365, and One Note interaction and more.-+ ms.localizationpriority: high
platform Partner Apps For Moodle https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/partner-apps-for-moodle.md
Title: Partner apps for Moodle description: Learn partner apps for Moodle, key benefits of partner apps for Moodle, Saas offerings and mConnect. Enable singe-sign-on SSO for users of Teams.-+ ms.localizationpriority: high
platform Access Teams Context https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/access-teams-context.md
Your tab requires contextual information to display relevant content:
* Basic information about the user, team, or company. * Locale and theme information.
-* Read the `entityId` or `subEntityId` that identifies what is in this tab.
+* The `page.id` and `page.subPageId` that identify what is in this tab (known as `entityId` and `subEntityId` prior to TeamsJS v.2.0.0).
[!INCLUDE [sdk-include](~/includes/sdk-include.md)]
For more information, see [authenticate a user in your Microsoft Teams](~/concep
You can access context information in two ways:
-* Insert URL placeholder values.
-* Use the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
+* Using [URL placeholder values](#get-context-by-inserting-url-placeholder-values).
+* From the Microsoft Teams JavaScript client SDK [context](/javascript/api/@microsoft/teams-js/app.context) object.
### Get context by inserting URL placeholder values
-Use placeholders in your configuration or content URLs. Microsoft Teams replaces the placeholders with the relevant values when determining the actual configuration or content URL. The available placeholders include all fields on the [context](/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-1.12.1&preserve-view=true) object. Common placeholders include the following:
+Use placeholders in your configuration or content URLs. Microsoft Teams replaces the placeholders with the relevant values when determining the actual configuration or content URL. The available placeholders include all fields on the [context](/javascript/api/@microsoft/teams-js/app.context) object. Common placeholders include the following lists:
-* {entityId}: The ID you supplied for the item in this tab when first [configuring the tab](~/tabs/how-to/create-tab-pages/configuration-page.md).
-* {subEntityId}: The ID you supplied when generating a [deep link](~/concepts/build-and-test/deep-links.md) for a specific item within this tab. This must be used to restore to a specific state within an entity; for example, scrolling to or activating a specific piece of content.
-* {loginHint}: A value suitable as a login hint for Azure AD. This is usually the login name of the current user in their home tenant.
-* {userPrincipalName}: The User Principal Name of the current user in the current tenant.
-* {userObjectId}: The Azure AD object ID of the current user in the current tenant.
-* {theme}: The current user interface (UI) theme such as `default`, `dark`, or `contrast`.
-* {groupId}: The ID of the Office 365 group in which the tab resides.
-* {tid}: The Azure AD tenant ID of the current user.
-* {locale}: The current locale of the user formatted as languageId-countryId(en-us).
+* [{page.id}](/javascript/api/@microsoft/teams-js/app.pageinfo#@microsoft-teams-js-app-pageinfo-id): The developer-defined unique ID for the page defined when first [configuring the page](~/tabs/how-to/create-tab-pages/configuration-page.md). (Known as `{entityId}` prior to TeamsJS v.2.0.0).
+* [{page.subPageId}](/javascript/api/@microsoft/teams-js/app.pageinfo#@microsoft-teams-js-app-pageinfo-subpageid): The developer-defined unique ID for the subpage this content points defined when generating a [deep link](~/concepts/build-and-test/deep-links.md) for a specific item within the page. (Known as `{subEntityId}` prior to TeamsJS v.2.0.0).
+* [{user.loginHint}](/javascript/api/@microsoft/teams-js/app.userinfo#@microsoft-teams-js-app-userinfo-loginhint): A value suitable as a login hint for Azure AD. This is usually the login name of the current user in their home tenant. (Known as `{loginHint}` prior to TeamsJS v.2.0.0).
+* [{user.userPrincipalName}](/javascript/api/@microsoft/teams-js/app.userinfo#@microsoft-teams-js-app-userinfo-userprincipalname): The User Principal Name of the current user in the current tenant. (Known as `{userPrincipalName}` prior to TeamsJS v.2.0.0).
+* [{user.id}](/javascript/api/@microsoft/teams-js/app.userinfo#@microsoft-teams-js-app-userinfo-id): The Azure AD object ID of the current user in the current tenant. (Known as `{userObjectId}` prior to TeamsJS v.2.0.0).
+* [{app.theme}](/javascript/api/@microsoft/teams-js/app.appinfo#@microsoft-teams-js-app-appinfo-theme): The current user interface (UI) theme such as `default`, `dark`, or `contrast`. (Known as `{theme}` prior to TeamsJS v.2.0.0).
+* [{team.groupId}](/javascript/api/@microsoft/teams-js/app.teaminfo#@microsoft-teams-js-app-teaminfo-groupid): The ID of the Office 365 group in which the tab resides. (Known as `{groupId}` prior to TeamsJS v.2.0.0)
+* [{user.tenant.id}](/javascript/api/@microsoft/teams-js/app.tenantinfo#@microsoft-teams-js-app-tenantinfo-id): The Azure AD tenant ID of the current user. (Known as `{tid}` prior to TeamsJS v.2.0.0).
+* [{app.locale}](/javascript/api/@microsoft/teams-js/app.appinfo#@microsoft-teams-js-app-appinfo-locale): The current locale of the user formatted as *languageId-countryId*, for example `en-us`. (Known as `{locale}` prior to TeamsJS v.2.0.0).
> [!NOTE]
-> The previous `{upn}` placeholder is now deprecated. For backward compatibility, it is currently a synonym for `{loginHint}`.
+> The previous `{upn}` placeholder is now deprecated. For backward compatibility, it is currently a synonym for `{user.loginHint}`.
-For example, in your tab manifest you set the `configURL` attribute to `"https://www.contoso.com/config?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}"`, the signed-in user has the following attributes:
+For example, in your app manifest if you set your tab *configurationUrl* attribute to `"https://www.contoso.com/config?name={user.loginHint}&tenant={user.tenant.id}&group={team.groupId}&theme={app.theme}"` and the signed-in user has the following attributes:
* Their username is **user@example.com**. * Their company tenant ID is **e2653c-etc**.
-* They're a member of the Office 365 group with id **00209384-etc**.
+* They're a member of the Office 365 group with ID **00209384-etc**.
* The user has set their Teams theme to **dark**.
-When they configure the tab, Teams calls the following URL:
+. . . then Teams will call the following URL when configuring the tab:
`https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=00209384-etc&theme=dark`
When they configure the tab, Teams calls the following URL:
You can also retrieve the information listed above using the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client) by calling `microsoftTeams.getContext(function(context) { /* ... */ })`.
-The following code provides an example of context variable:
-
-```json
-{
- "teamId": "The Microsoft Teams ID in the format 19:[id]@thread.skype",
- "teamName": "The name of the current team",
- "channelId": "The channel ID in the format 19:[id]@thread.skype",
- "channelName": "The name of the current channel",
- "chatId": "The chat ID in the format 19:[id]@thread.skype",
- "locale": "The current locale of the user formatted as languageId-countryId (for example, en-us)",
- "entityId": "The developer-defined unique ID for the entity this content points to",
- "subEntityId": "The developer-defined unique ID for the sub-entity this content points to",
- "loginHint": "A value suitable as a login hint for Azure AD. This is usually the login name of the current user, in their home tenant",
- "userPrincipalName": "The principal name of the current user, in the current tenant",
- "userObjectId": "The Azure AD object id of the current user, in the current tenant",
- "tid": "The Azure AD tenant ID of the current user",
- "groupId": "Guid identifying the current Office 365 Group ID",
- "theme": "The current UI theme: default | dark | contrast",
- "isFullScreen": "Indicates if the tab is in full-screen",
- "teamType": "The type of team",
- "teamSiteUrl": "The root SharePoint site associated with the team",
- "teamSiteDomain": "The domain of the root SharePoint site associated with the team",
- "teamSitePath": "The relative path to the SharePoint site associated with the team",
- "channelRelativeUrl": "The relative path to the SharePoint folder associated with the channel",
- "sessionId": "The unique ID for the current Teams session for use in correlating telemetry data",
- "userTeamRole": "The user's role in the team",
- "isTeamArchived": "Indicates if team is archived",
- "hostClientType": "The type of host client. Possible values are android, ios, web, desktop, surfaceHub, teamsRoomsAndroid, teamsPhones, teamsDisplays rigel (deprecated, use teamsRoomsWindows instead)",
- "frameContext": "The context where tab URL is loaded (for example, content, task, setting, remove, sidePanel)",
- "sharepoint": "The SharePoint context is available only when hosted in SharePoint",
- "tenantSKU": "The license type for the current user tenant. Possible values are enterprise, free, edu, unknown",
- "userLicenseType": "The license type for the current user. Possible values are E1, E3, and E5 enterprise plans",
- "parentMessageId": "The parent message ID from which this task module is launched",
- "ringId": "The current ring ID",
- "appSessionId": "The unique ID for the current session used for correlating telemetry data",
- "isCallingAllowed": "Indicates if calling is allowed for the current logged in user",
- "isPSTNCallingAllowed": "Indicates if PSTN calling is allowed for the current logged in user",
- "meetingId": "The meeting ID used by tab when running in meeting context",
- "defaultOneNoteSectionId": "The OneNote section ID that is linked to the channel",
- "isMultiWindow": "The indication whether the tab is in a pop out window"
+# [TeamsJS v2](#tab/teamsjs-v2)
+
+## TypeScript
+
+```TypeScript
+import { app, Context } from "@microsoft/teams-js";
+
+app.getContext().then((context: Context) => {
+ /*...*/
+});
+```
+
+Equivalent `async/await` pattern:
+
+```TypeScript
+import { app, Context } from "@microsoft/teams-js";
+
+async function example() {
+ const context: Context = await app.getContext();
+ /*...*/
+}
+```
+
+## JavaScript
+
+```js
+import { app, Context } from "@microsoft/teams-js";
+
+app.getContext().then((context) => {
+ /*...*/
+});
+```
+
+Equivalent `async/await` pattern:
+
+```js
+import { app, Context } from "@microsoft/teams-js";
+
+async function example() {
+ const context = await app.getContext();
+ /*...*/
} ```
-You can also retrieve the information listed above using the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client) by calling the `app.getContext()` function. For additional information, see the properties of the [Context interface](/javascript/api/@microsoft/teams-js/app.context?view=msteams-client-js-latest&preserve-view=true).
+# [TeamsJS v1](#tab/teamsjs-v1)
+
+## TypeScript
+
+```TypeScript
+import * as microsoftTeams from "@microsoft/teams-js";
+
+microsoftTeams.getContext((context: microsoftTeams.Context) => {
+ /* ... */
+});
+```
+
+## JavaScript
+
+```js
+import microsoftTeams from "@microsoft/teams-js";
+
+microsoftTeams.getContext((context) => {
+ /* ... */
+});
+```
++
+The following table lists commonly used context properties of the *context* object:
+
+| TeamsJS v2 name | TeamsJS v1 name | Description |
+|--|--|-|
+| team.internalId | teamId | The Microsoft Teams ID for the team with which the content is associated. |
+| team.displayName | teamName | The name for the team with which the content is associated. |
+| channel.id | channelId | The Microsoft Teams ID for the channel with which the content is associated. |
+| channel.displayName | channelName | The name for the channel with which the content is associated. |
+| chat.id | chatId | The Microsoft Teams ID for the chat with which the content is associated. |
+| app.locale | locale | The current locale that the user has configured for the app formatted as languageId-countryId (for example, en-us). |
+| page.id | entityId | The developer-defined unique ID for the page this content points to. |
+| page.subPageId | subEntityId | The developer-defined unique ID for the subpage this content points to. This field should be used to restore to a specific state within a page, such as scrolling to or activating a specific piece of content. |
+| user.loginHint | loginHint | A value suitable for use as a login_hint when authenticating with Azure AD. Because a malicious party can run your content in a browser, this value should be used only as a hint as to who the user is and never as proof of identity. This field is available only when the identity permission is requested in the manifest. |
+| user.userPrincipalName | upn | The UPN of the current user. This may be an externally authenticated UPN (for example, guest users). Because a malicious party runs your content in a browser, this value should be used only as a hint as to who the user is and never as proof of identity. This field is available only when the identity permission is requested in the manifest. |
+| user.id | userObjectId | The Azure AD object ID of the current user. Because a malicious party runs your content in a browser, this value should be used only as a hint as to who the user is and never as proof of identity. This field is available only when the identity permission is requested in the manifest. |
+| user.tenant.id | tid | The Azure AD tenant ID of the current user. Because a malicious party can run your content in a browser, this value should be used only as a hint as to who the user is and never as proof of identity. This field is available only when the identity permission is requested in the manifest. |
+| team.groupId | groupId | The Office 365 group ID for the team with which the content is associated. This field is available only when the identity permission is requested in the manifest. |
+| app.theme | theme | The current UI theme: default, dark, contrast |
+| page.isFullScreen | isFullScreen | Indication whether the page is in full-screen mode. |
+| team.type | teamType | The type of the team. |
+| sharepointSite.teamSiteUrl | teamSiteUrl | The root SharePoint site associated with the team. |
+| sharepointSite.teamSiteDomain | teamSiteDomain | The domain of the root SharePoint site associated with the team. |
+| sharepointSite.teamSitePath | teamSitePath | The relative path to the SharePoint site associated with the team. |
+| channel.relativeUrl | channelRelativeUrl | The relative path to the SharePoint folder associated with the channel. |
+| app.host.sessionId | sessionId | Unique ID for the current Host session for use in correlating telemetry data. |
+| team.userRole | userTeamRole | The user's role in the team. Because a malicious party can run your content in a browser, this value should be used only as a hint as to the user's role, and never as proof of her role. |
+| team.isArchived | isTeamArchived | Indicates whether team is archived. Apps should use this as a signal to prevent any changes to content associated with archived teams. |
+| app.host.clientType | hostClientType | The type of the host client. Possible values are: android, ios, web, desktop, rigel |
+| page.frameContext | frameContext | The context where page url is loaded (content, task, setting, remove, sidePanel) |
+| sharepoint | sharepoint | SharePoint context. This is only available when hosted in SharePoint. |
+| user.tenant.teamsSku | tenantSKU | The license type for the current user tenant. Possible values are enterprise, free, edu, unknown |
+| user.licenseType | userLicenseType | The license type for the current user. Possible values are E1, E3, and E5 enterprise plans |
+| app.parentMessageId | parentMessageId | The ID of the parent message from which this task module was launched. This is only available in task modules launched from bot cards. |
+| app.host.ringId | ringId | Current ring ID. |
+| app.sessionId | appSessionId | Unique ID for the current Host session for use in correlating telemetry data. |
+| user.isCallingAllowed | isCallingAllowed | Represents whether calling is allowed for the current logged-in user. |
+| user.isPSTNCallingAllowed | isPSTNCallingAllowed | Indicates if PSTN calling is allowed for the current user |
+| meeting.id | meetingId | The meeting ID used by tab when running in meeting context. |
+| channel.defaultOneNoteSectionId | defaultOneNoteSectionId | The OneNote section ID that is linked to the channel. |
+| page.isMultiWindow | isMultiWindow | The indication whether the tab is in a pop out window. |
+
+For more information, see [Updates to the *Context* interface](using-teams-client-sdk.md#updates-to-the-context-interface) and the [Context interface](/javascript/api/@microsoft/teams-js/app.context) API reference.
## Retrieve context in private channels
When your content page is loaded in a private channel, the data you receive from
The following fields are changed when your content page is in a private channel:
-* `groupId`: Undefined for private channels
-* `teamId`: Set to the threadId of the private channel
-* `teamName`: Set to the name of the private channel
-* `teamSiteUrl`: Set to the URL of a distinct, unique SharePoint site for the private channel
-* `teamSitePath`: Set to the path of a distinct, unique SharePoint site for the private channel
-* `teamSiteDomain`: Set to the domain of a distinct, unique SharePoint site domain for the private channel
+* `team.groupId`: Undefined for private channels
+* `team.internalId`: Set to the threadId of the private channel
+* `team.displayName`: Set to the name of the private channel
+* `sharepointSite.url`: Set to the URL of a distinct, unique SharePoint site for the private channel
+* `sharepointSite.path`: Set to the path of a distinct, unique SharePoint site for the private channel
+* `sharepointSite.domain`: Set to the domain of a distinct, unique SharePoint site domain for the private channel
-If your page makes use of any of these values, the value of `channelType` field must be `Private` to determine if your page is loaded in a private channel and can respond appropriately.
+If your page makes use of any of these values, the value of `channel.membershipType` field must be `Private` to determine if your page is loaded in a private channel and can respond appropriately.
## Retrieve context in Microsoft Teams Connect shared channels
When your content page is loaded in a Microsoft Teams Connect shared channel, th
The following fields are changed when your content page is in a shared channel:
-* `groupId`: Undefined for shared channels.
-* `teamId`: Set to the `threadId` of the team, the channel is shared for the current user. If the user has access to multiple teams, the `teamId` is set to the team that hosts (creates) the shared channel.
-* `teamName`: Set to the name of the team, the channel is shared for the current user. If the user has access to multiple teams, the `teamName` is set to the team that hosts (creates) the shared channel.
-* `teamSiteUrl`: Set to the URL of a distinct, unique SharePoint site for the shared channel.
-* `teamSitePath`: Set to the path of a distinct, unique SharePoint site for the shared channel.
-* `teamSiteDomain`: Set to the domain of a distinct, unique SharePoint site domain for the shared channel.
+* `team.groupId`: Undefined for shared channels.
+* `team.internalId`: Set to the `threadId` of the team, the channel is shared for the current user. If the user has access to multiple teams, this is set to the team that hosts (creates) the shared channel.
+* `team.displayName`: Set to the name of the team, the channel is shared for the current user. If the user has access to multiple teams, this is set to the team that hosts (creates) the shared channel.
+* `sharepointSite.url`: Set to the URL of a distinct, unique SharePoint site for the shared channel.
+* `sharepointSite.path`: Set to the path of a distinct, unique SharePoint site for the shared channel.
+* `sharepointSite.domain`: Set to the domain of a distinct, unique SharePoint site domain for the shared channel.
-In addition to these field changes, there're two new fields available for shared channels:
+In addition to these field changes, there are two new fields available for shared channels:
-* `hostTeamGroupId`: Set to the `groupId` associated with the hosting team, or the team that created the shared channel. The property can make Microsoft Graph API calls retrieve membership of the shared channel.
-* `hostTeamTenantId`: Set to the `tenantId` associated with the hosting team, or the team that created the shared channel. The property can be cross referenced with the current user's tenant ID found in the `tid` field of `getContext` to determine if the user is internal or external to the hosting team's tenant.
+* `hostTeamGroupId`: Set to the `team.groupId` associated with the hosting team, or the team that created the shared channel. The property can make Microsoft Graph API calls retrieve membership of the shared channel.
+* `hostTeamTenantId`: Set to the `channel.ownerTenantId` associated with the hosting team, or the team that created the shared channel. The property can be cross-referenced with the current user's tenant ID found in the `user.tenant.id` field of the *context* object to determine if the user is internal or external to the hosting team's tenant.
-If your page makes use of any of these values, the value of `channelType` field must be `Shared` to determine if your page is loaded in a shared channel and can respond appropriately.
+If your page makes use of any of these values, the value of `channel.membershipType` field must be `Shared` to determine if your page is loaded in a shared channel and can respond appropriately.
> [!NOTE] > Every time a user restarts or reloads the Teams desktop or web client, a new sessionID is created, which is tracked by Teams session, whereas, when a user exits the Teams apps and reloads it in Teams platform a new app sessionID is created, which is tracked by app session. ## Handle theme change
-You can register your app to be informed if the theme changes by calling `app.registerOnThemeChangeHandler(function(theme) { /* ... */ })`.
+You can register your app to be informed if the theme changes by calling `microsoftTeams.app.registerOnThemeChangeHandler(function(theme) { /* ... */ })`.
The `theme` argument in the function is a string with a value of `default`, `dark`, or `contrast`.
platform Conversational Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/conversational-tabs.md
microsoftTeams.conversations.openConversation(openConversationRequest);
> The **channelId** is optional for channel tabs. However, it is recommended if you want to keep your implementation across channel and static tabs the same. * **title**: The title that is shown to the user in the chat panel.
-Most of these values can also be retrieved from the `getContext` API.
+Most of these values can also be retrieved from the [`app.getContext()`](/javascript/api/@microsoft/teams-js/app?view=msteams-client-js-latest#@microsoft-teams-js-app-getcontext&preserve-view=true) API (`microsoftTeams.getContext()` in TeamsJS v1). For more information, see [PageInfo interface](/javascript/api/@microsoft/teams-js/app?view=msteams-client-js-latest#@microsoft-teams-js-app-pageinfo&preserve-view=true)
```javascript microsoftTeams.conversations.openConversation({ΓÇ£subEntityIdΓÇ¥:ΓÇ¥task-1ΓÇ¥, ΓÇ£entityIdΓÇ¥: ΓÇ£tabInstanceId-1ΓÇ¥, ΓÇ£channelIdΓÇ¥: ΓÇ¥19:baa6e71f65b948d189bf5c892baa8e5a@thread.skypeΓÇ¥, ΓÇ£titleΓÇ¥: "Task TitleΓÇ¥});
platform Create Channel Group Tab https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-channel-group-tab.md
zone_pivot_groups: teams-app-environment
Channel or group tabs deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. + ::: zone pivot="node-java-script" ## Create a custom channel or group tab with Node.js
This project was created from an ASP.NET Core 3.1 web application empty template
```csharp public void ConfigureServices(IServiceCollection services)
- {
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
+{
+ services.AddMvc(options => options.EnableEndpointRouting = false);
+}
+ public void Configure(IApplicationBuilder app)
- {
+{
app.UseStaticFiles(); app.UseMvc();
- }
+}
``` #### wwwroot folder
Ensure that you keep the command prompt with ngrok running and make a note of th
```html <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
- <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
+ <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"></script>
``` > [!IMPORTANT] > Do not copy and paste the `<script src="...">` URLs from this page, as they do not represent the latest version. To get the latest version of the SDK, always go to [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js).
-1. Insert a call to `microsoftTeams.initialize();` in the `script` tag.
+1. Insert a call to `microsoftTeams.app.initialize();` in the `script` tag.
1. In Visual Studio Solution Explorer go to the **Pages** folder and open **Tab.cshtml**
- Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. The parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.
+ Within **Tab.cshtml** the application presents the user with two options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that you have completed the requirements configuration and can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.
1. Update the `websiteUrl` and `contentUrl` values in each function with the HTTPS ngrok URL to your tab.
Ensure that you keep the command prompt with ngrok running and make a note of th
```javascript let saveGray = () => {
- microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
- microsoftTeams.settings.setSettings({
+ microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
+ microsoftTeams.pages.config.setConfig({
websiteUrl: `https://y8rCgT2b.ngrok.io`, contentUrl: `https://y8rCgT2b.ngrok.io/gray/`, entityId: "grayIconTab",
- suggestedDisplayName: "MyNewTab"
+ suggestedDisplayName: "MyNewTab",
+ removeUrl: ""
}); saveEvent.notifySuccess(); }); } let saveRed = () => {
- microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
- microsoftTeams.settings.setSettings({
+ microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
+ microsoftTeams.pages.config.setConfig({
websiteUrl: `https://y8rCgT2b.ngrok.io`, contentUrl: `https://y8rCgT2b.ngrok.io/red/`, entityId: "redIconTab",
- suggestedDisplayName: "MyNewTab"
+ suggestedDisplayName: "MyNewTab",
+ removeUrl: ""
}); saveEvent.notifySuccess();
- });
+ });
} ```
This project was created from an ASP.NET Core 3.1 web application empty template
```csharp public void ConfigureServices(IServiceCollection services)
- {
- services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
- }
+{
+ services.AddMvc(options => options.EnableEndpointRouting = false);
+}
+ public void Configure(IApplicationBuilder app)
- {
+{
app.UseStaticFiles(); app.UseMvc();
- }
+}
``` #### wwwroot folder
Ensure that you keep the command prompt with ngrok running and make a note of th
```html <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
- <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>
+ <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"></script>
``` > [!IMPORTANT] > Do not copy and paste the `<script src="...">` URLs from this page, as they do not represent the latest version. To get the latest version of the SDK, always go to [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js).
-1. Insert a call to `microsoftTeams.initialize();` in the `script` tag.
+1. Insert a call to `microsoftTeams.app.initialize();` in the `script` tag.
1. In Visual Studio Solution Explorer go to the **Tab** folder and open **Tab.cshtml**
- Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. The parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.
+ Within **Tab.cshtml** the application presents the user with two options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that you have completed the requirements configuration and can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved.
1. Update the `websiteUrl` and `contentUrl` values in each function with the HTTPS ngrok URL to your tab.
Ensure that you keep the command prompt with ngrok running and make a note of th
```javascript let saveGray = () => {
- microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
- microsoftTeams.settings.setSettings({
+ microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
+ microsoftTeams.pages.config.setConfig({
websiteUrl: `https://y8rCgT2b.ngrok.io`, contentUrl: `https://y8rCgT2b.ngrok.io/gray/`, entityId: "grayIconTab",
- suggestedDisplayName: "MyNewTab"
+ suggestedDisplayName: "MyNewTab",
+ removeUrl:""
}); saveEvent.notifySuccess(); }); } let saveRed = () => {
- microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
- microsoftTeams.settings.setSettings({
+ microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
+ microsoftTeams.pages.config.setConfig({
websiteUrl: `https://y8rCgT2b.ngrok.io`, contentUrl: `https://y8rCgT2b.ngrok.io/red/`, entityId: "redIconTab",
- suggestedDisplayName: "MyNewTab"
+ suggestedDisplayName: "MyNewTab",
+ removeUrl:""
}); saveEvent.notifySuccess(); });
platform Create Personal Tab https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-personal-tab.md
In Visual Studio Solution Explorer, right-click on the project and select **Edit
```HTML <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
- <script src="https://statics.teams.cdn.office.net/sdk/v2.0.0/js/MicrosoftTeams.min.js"></script>
+ <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>
``` 1. In Visual Studio Solution Explorer open **PersonalTab.cshtml** from **Pages** folder and add `app.initialize()` in the `<script>` tags and save.
The controllers use the `ViewBag` property to transfer values dynamically to the
```HTML <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
- <script src="https://statics.teams.cdn.office.net/sdk/v2.0.0/js/MicrosoftTeams.min.js"></script>
+ <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>
``` 1. In Visual Studio Solution Explorer open **PersonalTab.cshtml** from **Views** > **PersonalTab** folder and add `app.initialize()` inside the `<script>` tags and save.
platform Configuration Page https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/configuration-page.md
A configuration page is a special type of [content page](content-page.md). The u
* A [message extension](~/messaging-extensions/what-are-messaging-extensions.md). * An [Office 365 Connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md). ## Configure a channel or group chat tab
The following code is an example of corresponding code for the configuration pag
```html <head>
- <script src='https://statics.teams.cdn.office.net/sdk/v2.0.0/js/MicrosoftTeams.min.js'></script>
-</head>
+ <script src='https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js'></script>
<body> <button onclick="(document.getElementById('icon').src = '/images/iconGray.png'); colorClickGray()">Select Gray</button> <img id="icon" src="/images/teamsIcon.png" alt="icon" style="width:100px" /> <button onclick="(document.getElementById('icon').src = '/images/iconRed.png'); colorClickRed()">Select Red</button>
- <script>
- app.initialize();
+ <script type="module">
+ import {app, pages} from 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js';
+ await app.initialize();
let saveGray = () => { pages.config.registerOnSaveHandler((saveEvent) => { const configPromise = pages.config.setConfig({
After your page uploads, Teams updates the query string placeholders with releva
```html <script>
- app.initialize();
+ await app.initialize();
const getId = () => { let urlParams = new URLSearchParams(document.location.search.substring(1)); let blueTeamId = urlParams.get('team');
The following code provides an example of adding this function to the configurat
<span id="user"></span> ...
-<script>
+<script type="module">
+ import {app} from 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js';
const contextPromise = app.getContext(); contextPromise. then((context) => {
Microsoft Teams `setConfig()` (formerly `setSettings()`) configuration for remov
# [TeamsJS v2](#tab/teamsjs-v2) ```javascript
+import { pages } from "@microsoft/teams-js";
const configPromise = pages.config.setConfig({ contentUrl: "add content page URL here", entityId: "add a unique identifier here",
platform Content Page https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/content-page.md
This article is specific to using content pages as tabs; however most of the gui
## Tab content and design guidelines
-Your tab's overall objective is to provide access to the meaningful and engaging content that has a practical value and an evident purpose.
+Your tab's overall objective is to provide access to the meaningful and engaging content that has a practical value and an evident purpose.
You need to focus on making your tab design clean, navigation intuitive, and content immersive.For more information, see [tab design guidelines](~/tabs/design/tabs.md) and [Microsoft Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md).
The following code provides an example of how your page and the Teams client com
<html> <head> ...
- <script src= 'https://statics.teams.cdn.office.net/sdk/v2.0.0/js/MicrosoftTeams.min.js'></script>
+ <script src= 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js'></script>
...
-</head>
- <body> ...
- <script>
- app.initialize();
+ <script type="module">
+ import {app} from 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js';
+ await app.initialize();
</script> ... </body>
platform Removal Page https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/removal-page.md
When your tab is uploaded to a channel or group chat, Teams adds a right-click d
## Create a tab removal page for your application
-The optional removal page is an HTML page that you host and is displayed when the tab is removed. The removal page URL is designated by the `setConfig()` method (formerly `setSettings()`) within your configuration page. As with all pages in your app, the removal page must comply with [Teams tab prerequisites](../../../tabs/how-to/tab-requirements.md).
+The optional removal page is an HTML page that you host and is displayed when the tab is removed. The removal page URL is designated by the `setConfig()` method (or `setSettings()` prior to TeamsJS v.2.0.0) within your configuration page. As with all pages in your app, the removal page must comply with [Teams tab prerequisites](../../../tabs/how-to/tab-requirements.md).
### Register a remove handler
You can use `getContext()` to get the current context in which the frame is runn
#### Include authentication
-Authentication is required before allowing a user to delete the tab content. Context information can be used to help construct authentication requests and authorization page URLs. See [Microsoft Teams authentication flow for tabs](~/tabs/how-to/authentication/auth-flow-tab.md). Make sure that all domains used in your tab pages are listed in the `manifest.json` `validDomains` array.
+Authentication is required before allowing a user to delete the tab content. Context information can be used to help construct authentication requests and authorization page URLs. See [Microsoft Teams authentication flow for tabs](~/tabs/how-to/authentication/auth-flow-tab.md). Make sure that all domains used in your tab pages are listed in the `validDomains` array of your app manifest.
The following is a sample tab removal code block:
The following is a sample tab removal code block:
```html <body> <button onclick="onClick()">Delete this tab and all underlying data?</button>
- <script>
- app.initialize();
+ <script type="module">
+ import {app, pages} from 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js';
+ await app.initialize();
pages.config.registerOnRemoveHandler((removeEvent) => { // Here you can designate the tab content to be removed and/or archived. const configPromise = pages.getConfig();
platform Tabs Link Unfurling https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/tabs-link-unfurling.md
ms.localizationpriority: medium
Stage View is a new user interface (UI) component. It allows you to render the content that is opened in full screen in Teams and pinned as a tab. + ## Stage View Stage View is a full screen UI component that you can invoke to surface your web content. The existing link unfurling service is updated so that it's used to turn URLs into a tab using an Adaptive Card and Chat Services. When a user sends a URL in a chat or channel, the URL is unfurled to an Adaptive Card. The user can select **View** in the card, and pin the content as a tab directly from Stage View.
Stage View helps provide a more seamless experience of viewing content in Teams.
|Stage View|Task module| |:--|:--|
-|Stage View is useful when you have rich content to display to the users, such as a page, a dashboard, a file, and so on. It provides rich features that helps to render your content in the full-screen canvas.|[Task module](../task-modules-and-cards/task-modules/task-modules-tabs.md) is especially useful to display messages that require user attention, or collect information required to move to the next step.|
+|Stage View is useful when you have rich content to display to the users, such as a page, a dashboard, a file, and so on. It provides rich features that help to render your content in the full-screen canvas.|[Task module](../task-modules-and-cards/task-modules/task-modules-tabs.md) is especially useful to display messages that require user attention, or collect information required to move to the next step.|
## Invoke Stage View
Following is the process to invoke Stage View:
* The bot responds with a `200` code. > [!NOTE]+ > On Teams mobile clients, invoking Stage View for apps distributed through the [Teams store](/platform/concepts/deploy-and-publish/apps-publish-overview.md) and not having a moblie-optimized experience opens the default web browser of the device. The browser opens the URL specified in the `websiteUrl` parameter of the `TabInfo` object. ## Invoke Stage View through deep link
-To invoke the Stage View through deep link from your tab, you must wrap the deep link URL in the `microsoftTeams.executeDeeplink(url)` API. The deep link can also be passed through an `OpenURL` action in the card.
+To invoke the Stage View through deep link from your tab, you must wrap the deep link URL in the `app.openLink(url)` API. The deep link can also be passed through an `OpenURL` action in the card.
### Syntax
-Following is the deeplink syntax:
+Following is the deep link syntax:
-<https://teams.microsoft.com/l/stage/{appId}/0?context>={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}
+`<https://teams.microsoft.com/l/stage/{appId}/0?context>={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}`
### Examples
Following are the deep link examples to invoke Stage View:
Unencoded URL:
-<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}
+`<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}`
Encoded URL:
-<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D>
+`<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D>`
**Example 2: URL with no threadId** Unencoded URL:
-<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}
+`<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}`
Encoded
-<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D>
+`<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D>`
> [!NOTE]
-> All deeplinks must be encoded before pasting the URL. We don't support unencoded URLs.
+> All deep links must be encoded before pasting the URL. We don't support unencoded URLs.
> > * The `name` is optional in deep link. If not included, the app name replaces it. > * The deep link can also be passed through an `OpenURL` action.
platform Teamsfx SDK https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-SDK.md
dialogs.add(
<br>
+<details>
+<summary><b>Integration with Microsoft Graph Toolkit</b></summary>
+
+The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of various authentication providers and UI components powered by Microsoft Graph.
+
+The `@microsoft/mgt-teamsfx-provider` package exposes the `TeamsFxProvider` class, which uses `TeamsFx` class to sign in users and acquire tokens to use with Graph.
+
+1. Install the required packages.
+
+ ```bash
+ npm install @microsoft/mgt-element @microsoft/mgt-teamsfx-provider @microsoft/teamsfx
+ ```
+
+2. Initialize the provider inside your component.
+
+ ```ts
+ // Import the providers and credential at the top of the page
+ import {Providers} from '@microsoft/mgt-element';
+ import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
+ import {TeamsUserCredential} from "@microsoft/teamsfx";
+
+ const scope = ["User.Read"];
+ const teamsfx = new TeamsFx();
+ const provider = new TeamsFxProvider(teamsfx, scope);
+ Providers.globalProvider = provider;
+ ```
+
+3. Use the `teamsfx.login(scopes)` method to get required access token.
+
+ ```ts
+ // Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups.
+ await teamsfx.login(this.scope);
+ Providers.globalProvider.setState(ProviderState.SignedIn);
+ ```
+
+4. Now, you can add any component in your HTML page or in your `render()` method with React to use the `TeamsFx` context to access Microsoft Graph.
+
+ ```html
+ <mgt-person query="me" view="threeLines"></mgt-person>
+ ```
+
+ ```ts
+ public render(): void {
+ return (
+ <div>
+ <Person personQuery="me" view={PersonViewType.threelines}></Person>
+ </div>
+ );
+ }
+ ```
+
+For more information on sample to initialize the TeamsFx provider, see the [Contacts Exporter sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-tab-with-backend).
+
+</details>
+
+<br>
+ ## Advanced Customization ### Configure log
platform Teamsfx Multi Env https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-multi-env.md
description: In this module, learn about TeamsFX multi environment such as, create a new environment, select target environment and more ms.localizationpriority: medium-+ Last updated 11/29/2021
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
With Microsoft Teams apps, you can add your existing Office 365 Connector or bui
See the following video to learn how to create an Office 365 Connectors: <br>
-> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4OIzv]
+> [!VIDEO <https://www.microsoft.com/en-us/videoplayer/embed/RE4OIzv>]
<br> ## Add a connector to Teams app
You can reuse your existing web configuration experience or create a separate ve
To integrate the configuration experience:
-1. Initialize the SDK by calling `microsoftTeams.initialize()`.
-1. Call `microsoftTeams.settings.setValidityState(true)` to enable **Save**.
+> [!NOTE]
+> Starting with Teams JavaScript client SDK (TeamsJS) v.2.0.0, APIs in the *settings* namespace have been deprecated in favor of equivalent APIs in the *pages* namespace, including `pages.getConfig()` and other APIs in the `pages.config` sub-namespace. For more information, see [What's new in TeamsJS version 2.0](../../tabs/how-to/using-teams-client-sdk.md#whats-new-in-teamsjs-version-20)
+
+1. Initialize the SDK by calling `app.initialize()`.
+1. Call `pages.config.setValidityState(true)` to enable **Save**.
> [!NOTE]
- > You must call `microsoftTeams.settings.setValidityState(true)` as a response to user selection or field update.
+ > You must call `microsoftTeams.pages.config.setValidityState(true)` as a response to user selection or field update.
-1. Register `microsoftTeams.settings.registerOnSaveHandler()` event handler, which is called when the user selects **Save**.
-1. Call `microsoftTeams.settings.setSettings()` to save the connector settings. The saved settings are also shown in the configuration dialog if the user tries to update an existing configuration for your connector.
-1. Call `microsoftTeams.settings.getSettings()` to fetch webhook properties, including the URL.
+1. Register `microsoftTeams.pages.config.registerOnSaveHandler()` event handler, which is called when the user selects **Save**.
+1. Call `microsoftTeams.pages.config.setConfig()` to save the connector settings. The saved settings are also shown in the configuration dialog if the user tries to update an existing configuration for your connector.
+1. Call `microsoftTeams.pages.getConfig()` to fetch webhook properties, including the URL.
> [!NOTE]
- > You must call `microsoftTeams.settings.getSettings()` when your page is first loaded in case of reconfiguration.
+ > You must call `microsoftTeams.pages.getConfig()` when your page is first loaded in case of reconfiguration.
-1. Register `microsoftTeams.settings.registerOnRemoveHandler()` event handler, which is called when the user removes connector.
+1. Register `microsoftTeams.pages.config.registerOnRemoveHandler()` event handler, which is called when the user removes connector.
This event gives your service an opportunity to perform any cleanup actions.
The following code provides a sample HTML to create a connector configuration pa
</section> </div>
-<script src="https://statics.teams.microsoft.com/sdk/v1.5.2/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
+<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-Q2Z9S56exI6Oz/ThvYaV0SUn8j4HwS8BveGPmuwLXe4CvCUEGlL80qSzHMnvGqee" crossorigin="anonymous"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
-<script type="text/javascript">
-
+<script type="module">
+ import {app, pages} from 'https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js';
+
function onClick() {
- microsoftTeams.settings.setValidityState(true);
+ pages.config.setValidityState(true);
}
- microsoftTeams.initialize();
- microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
+ await app.initialize();
+ pages.config.registerOnSaveHandler(function (saveEvent) {
var radios = document.getElementsByName('notificationType'); var eventType = '';
The following code provides a sample HTML to create a connector configuration pa
eventType = radios[1].value; }
- microsoftTeams.settings.setSettings({
- entityId: eventType,
+ await pages.config.setConfig({
+ entityId: eventType,
contentUrl: "https://YourSite/Connector/Setup", removeUrl:"https://YourSite/Connector/Setup",
- configName: eventType
+ configName: eventType
});
- microsoftTeams.settings.getSettings(function (settings) {
- // We get the Webhook URL in settings.webhookUrl which needs to be saved.
+ pages.getConfig().then(async (config) {
+ // We get the Webhook URL from config.webhookUrl which needs to be saved.
// This can be used later to send notification. }); saveEvent.notifySuccess(); });
- microsoftTeams.settings.registerOnRemoveHandler(function (removeEvent) {
+ pages.config.registerOnRemoveHandler(function (removeEvent) {
alert("Removed" + JSON.stringify(removeEvent)); });
The following code provides a sample HTML to create a connector configuration pa
To authenticate the user as part of loading your page, see [authentication flow for tabs](~/tabs/how-to/authentication/auth-flow-tab.md) to integrate sign in when your page is embedded. > [!NOTE]
-> Due to cross client compatibility reasons, your code must call `microsoftTeams.authentication.registerAuthenticationHandlers()` with the URL and success or failure callback methods before calling `authenticate()`.
+> Prior to TeamsJS v.2.0.0, your code must call `microsoftTeams.authentication.registerAuthenticationHandlers()` with the URL and success or failure callback methods before calling `authenticate()` due to cross-client compatibility reasons. Starting with TeamsJS v.2.0.0, *registerAuthenticationHandlers* has been deprecated in favor of directly calling [authenticate()](/javascript/api/@microsoft/teams-js/authentication#@microsoft-teams-js-authentication-authenticate) with the required authentication parameters.
-#### `GetSettings` response properties
+#### `getConfig` response properties
>[!NOTE]
->The parameters returned by the `getSettings` call are different when you invoke this method from a tab and differ from those documented in [js settings](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings).
+>The parameters returned by the `getConfig` call are different when you invoke this method from a tab and differ from those documented in the [reference](/javascript/api/@microsoft/teams-js/pages#@microsoft-teams-js-pages-getconfig).
-The following table provides the parameters and the details of `GetSetting` response properties:
+The following table provides the parameters and the details of `getConfig` response properties:
| Parameters | Details | |-||
-| `entityId` | The entity ID, as set by your code when calling `setSettings()`. |
-| `configName` | The configuration name, as set by your code when calling `setSettings()`. |
-| `contentUrl` | The URL of the configuration page, as set by your code when calling `setSettings()`. |
+| `entityId` | The entity ID, as set by your code when calling `setConfig()`. |
+| `configName` | The configuration name, as set by your code when calling `setConfig()`. |
+| `contentUrl` | The URL of the configuration page, as set by your code when calling `setConfig()`. |
| `webhookUrl` | The webhook URL created for the connector. Use the webhook URL to POST structured JSON to send cards to the channel. The `webhookUrl` is returned only when the application returns data successfully. | | `appType` | The values returned can be `mail`, `groups`, or `teams` corresponding to the Office 365 Mail, Office 365 Groups, or Teams respectively. | | `userObjectId` | The unique ID corresponding to the Office 365 user who initiated the set up of the connector. It must be secured. This value can be used to associate the user in Office 365, who has set up the configuration in your service. | #### Handle edits
-Your code must handle users who return to edit an existing connector configuration. To do this, call `microsoftTeams.settings.setSettings()` during the initial configuration with the following parameters:
+Your code must handle users who return to edit an existing connector configuration. To do this, call `microsoftTeams.pages.config.setConfig()` during the initial configuration with the following parameters:
* `entityId` is the custom ID that represents what the user has configured and understood by your service. * `configName` is a name that configuration code can retrieve. * `contentUrl` is a custom URL that gets loaded when a user edits an existing connector configuration.
-This call is made as part of your save event handler. Then, when the `contentUrl` is loaded, your code must call `getSettings()` to pre populate any settings or forms in your configuration user interface.
+This call is made as part of your save event handler. Then, when the `contentUrl` is loaded, your code must call `getConfig()` to pre populate any settings or forms in your configuration user interface.
#### Handle removals
-You can execute an event handler when the user removes an existing connector configuration. You register this handler by calling `microsoftTeams.settings.registerOnRemoveHandler()`. This handler is used to perform cleanup operations, such as removing entries from a database.
+You can execute an event handler when the user removes an existing connector configuration. You register this handler by calling `microsoftTeams.pages.config.registerOnRemoveHandler()`. This handler is used to perform cleanup operations, such as removing entries from a database.
### Include the connector in your Manifest
-Download the auto generated `Teams app manifest` from the portal. Perform the following steps, before testing or publishing the app:
+Download the auto-generated *Teams app manifest* from the Developer Portal (<https://dev.teams.microsoft.com>). Perform the following steps, before testing or publishing the app:
1. [Include two icons](../../concepts/build-and-test/apps-package.md#app-icons). 1. Modify the `icons` portion of the manifest to include the file names of the icons instead of URLs.
-The following manifest.json file contains the elements needed to test and submit the app:
+The following *manifest.json* file contains the elements needed to test and submit the app:
> [!NOTE] > Replace `id` and `connectorId` in the following example with the GUID of the connector.
Follow the [step-by-step guide](../../sbs-teams-connectors.yml) to create and te
1. [Set up an Incoming Webhook](~/webhooks-and-connectors/how-to/add-incoming-webhook.md#create-an-incoming-webhook) directly for your team.
-1. Add a [configuration page](~/webhooks-and-connectors/how-to/connectors-creating.md?#integrate-the-configuration-experience) and publish your Incoming Webhook in a Office 365 Connector.
+1. Add a [configuration page](~/webhooks-and-connectors/how-to/connectors-creating.md?#integrate-the-configuration-experience) and publish your Incoming Webhook in an Office 365 Connector.
1. Package and publish your connector as part of your [AppSource](~/concepts/deploy-and-publish/office-store-guidance.md) submission.
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md
ms.localizationpriority: high
Discover Microsoft Teams platform features that are generally available (GA) and in developer preview. You can now get latest Teams platform updates by subscribing to the RSS feed [![download feed](~/assets/images/RSSfeeds.png)](https://aka.ms/TeamsPlatformUpdates). For more information, see [configure RSS feed](#get-latest-updates).
-## Microsoft Build 2022 :::image type="icon" source="assets/images/bullhorn.png"
-
-| Date | Feature | Find it here |
-| | | |
-| 05/24/2022| [*Developer preview*] <br> Enhanced collaboration with Live Share SDK | Build apps for Teams meetings > Enhanced collaboration with Live Share > [Overview](apps-in-teams-meetings/teams-live-share-overview.md) |
-|05/24/2022| Submit your Outlook- and Office-enabled apps to the Teams store | Extend your app across Microsoft 365 > [Overview](m365-apps/overview.md) |
-|05/24/2022| App guidance and what's new in TeamsJS version 2.0.0| Tools and SDKs > [Teams JavaScript client SDK](tabs/how-to/using-teams-client-sdk.md) |
-| 05/24/2022 | Teams Toolkit version 4.0.0 for Visual Studio Code is now GA | Tools and SDKs > Teams Toolkit for Visual Studio Code > <br> ΓÇó [Teams Toolkit Overview](toolkit/teams-toolkit-fundamentals.md) <br> ΓÇó [Build command bot with JavaScript](toolkit/add-capability.md) <br> ΓÇó [Build notification bot with JavaScript](toolkit/add-capability.md) <br> ΓÇó [Preview and customize Teams app manifest](toolkit/TeamsFx-preview-and-customize-app-manifest.md) <br> ΓÇó [Connect to existing APIs](toolkit/add-API-connection.md) <br> ΓÇó [Add capabilities to your Teams apps](toolkit/add-capability.md) <br> ΓÇó [Add single sign-on experience](toolkit/add-single-sign-on.md) <br> ΓÇó [Add cloud resources to Teams app](toolkit/add-resource.md) |
-| 05/24/2022 | Introduced app manifest version 1.13 | App manifest > [Manifest schema for Microsoft Teams](resources/schem) |
-| 05/24/2022 | Bots and Message extensions in GCC and GCCH | ΓÇó Plan your app > [Overview](concepts/app-fundamentals-overview.md#government-community-cloud) </br> ΓÇó Build bots > [Overview](bots/what-are-bots.md) </br> ΓÇó Build message extensions > [Overview](messaging-extensions/what-are-messaging-extensions.md) |
- <!-- ## Latest updates ![bullhorn icon](~/assets/images/bullhorn.png)