Updates from: 03/15/2022 02:29:38
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
The meeting extensibility provide APIs to enhance meeting experience. You can pe
* Use APIs to make your app aware of meeting. * Select required APIs to improve the meeting experience.
+> [!NOTE]
+> Use Teams [JavaScript SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) (*Version*: 1.10 and later) for SSO to work in meeting side panel.
+ The following table provides a list of APIs available across the Microsoft Teams Client (MSTC) and Microsoft Bot Framework (MSBF) SDKs: |Method| Description| Source|
To identify and retrieve contextual information for your tab content, see [get c
## Get participant API
+The `GetParticipant` API must have a bot registration and ID to generate auth tokens. For more information, see [bot registration and ID](../build-your-first-app/build-bot.md).
+ > [!NOTE] > > * Do not cache participant roles since the meeting organizer can change the roles any time.
To identify and retrieve contextual information for your tab content, see [get c
### Query parameters > [!TIP]
-> Get participant IDs and tenant IDs from the Tab SSO.
+> Get participant IDs and tenant IDs from the [tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
+
+The `Meeting` API must have `meetingId`, `participantId`, and `tenantId` as URL parameters. The parameters are available as part of the Teams Client SDK and bot activity.
The following table includes the query parameters:
export class MyBot extends TeamsActivityHandler {
GET /v1/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId} ``` -- ```json { "user":{
GET /v1/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId}
} ``` ++ ### Response codes The following table provides the response codes:
All users in a meeting receive the notifications sent through in-meeting notific
> > * When an in-meeting notification is invoked, the content is presented as a chat message. > * Currently, sending targeted notifications and support for webapp are not supported.
-> * You must invoke the [submitTask()](../task-modules-and-cards/task-modules/task-modules-bots.md#submit-the-result-of-a-task-module) function to dismiss automatically after a user takes an action in the web view. This is a requirement for app submission. For more information, see [Teams SDK task module](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest#submittask-stringobject--stringstring&preserve-view=true).
+> * You must invoke the [submitTask()](../task-modules-and-cards/task-modules/task-modules-bots.md#submit-the-result-of-a-task-module) function to dismiss automatically after a user takes an action in the web view. This is a requirement for app submission. For more information, see [Teams SDK task module](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest#submittask-stringobject--stringstring&preserve-view=true).
> * If you want your app to support anonymous users, initial invoke request payload must rely on `from.id` request metadata in `from` object, not `from.aadObjectId` request metadata. `from.id` is the user ID and `from.aadObjectId` is the Microsoft Azure Active Directory (Azure AD) ID of the user. For more information, see [using task modules in tabs](../task-modules-and-cards/task-modules/task-modules-tabs.md) and [create and send the task module](../messaging-extensions/how-to/action-commands/create-task-module.md?tabs=dotnet#the-initial-invoke-request).
->
+ ### Query parameter The following table includes the query parameters:
await context.sendActivity(replyActivity);
```http POST /v3/conversations/{conversationId}/activities
+```
+
+```json
{ "type": "message",
The following table includes the response codes:
The Meeting Details API enables your app to get a meeting's static metadata. The metadata provides data points that don't change dynamically. The API is available through Bot Services. Currently, both private scheduled or recurring meetings and channel scheduled or recurring meetings support API with different RSC permissions respectively.
+The `Meeting Details` API must have a bot registration and bot ID. It requires Bot SDK to get `TurnContext`. To use the Meeting Details API, you must obtain different RSC permission based on the scope of any meeting, such as private meeting or channel meeting.
+ ### Prerequisite To use the Meeting Details API, you must obtain different RSC permission based on the scope of any meeting, such as private meeting or channel meeting.
Not available
GET /v1/meetings/{meetingId} ``` -- The JSON response body for Meeting Details API is as follows: ```json
The JSON response body for Meeting Details API is as follows:
} ``` ++ ## Send real-time captions API The send real-time captions API exposes a POST endpoint for Microsoft Teams communication access real-time translation (CART) captions, human-typed closed captions. Text content sent to this endpoint appears to end users in a Microsoft Teams meeting when they have captions enabled.
The `shareAppContentToStage` API enables you to share specific parts of your app
### Prerequisite
-To use the `shareAppContentToStage` API, you must obtain the RSC permissions. In the app manifest, configure the `authorization` property, and the `name` and `type` in the `resourceSpecific` field. For example:
+* To use the `shareAppContentToStage` API, you must obtain the RSC permissions. In the app manifest, configure the `authorization` property, and the `name` and `type` in the `resourceSpecific` field. For example:
-```json
-"authorization": {
- "permissions": {
- "resourceSpecific": [
- {
- "name": "MeetingStage.Write.Chat",
- "type": "Delegated"
- }
- ]
- }
-}
- ```
+ ```json
+ "authorization": {
+ "permissions": {
+ "resourceSpecific": [
+ {
+ "name": "MeetingStage.Write.Chat",
+ "type": "Delegated"
+ }
+ ]
+ }
+ }
+ ```
+* `appContentUrl` must be allowed by `validDomains` array inside manifest.json, else API would return 501.
### Query parameter
The following table provides the response codes:
The user can receive real-time meeting events. As soon as any app is associated with a meeting, the actual meeting start and end time are shared with the bot. The actual start and end time of a meeting are different from scheduled start and end time. The Meeting Details API provides the scheduled start and end time. The event provides the actual start and end time.
+You must be familiar with the `TurnContext` object available through the Bot SDK. The `Activity` object in `TurnContext` contains the payload with the actual start and end time. Real-time meeting events require a registered bot ID from the Teams platform. The bot can automatically receive meeting start or end event by adding `ChannelMeeting.ReadBasic.Group` in the manifest.
+ ### Prerequisite Your app manifest must have the `webApplicationInfo` property to receive the meeting start and end events. Use the following examples to configure your manifest:
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
- Title: Prerequisites for apps in Teams meetings-
-description: Identify prerequisites with apps for Teams meetings
--
-keywords: teams apps meetings user participant role api
--
-# Prerequisites for apps in Teams meetings
-
-With apps for Teams meetings, you can expand the capabilities of your apps across the meeting lifecycle. Before you work with apps for Teams meetings, you must fulfill the following prerequisites:
-
-* Know how to develop Teams apps. For more information on how to develop Teams app, see [Teams app development](../overview.md).
-
-* Update the Teams app manifest to indicate that the app is available for meetings. For more information, see [app manifest](enable-and-configure-your-app-for-teams-meetings.md#update-your-app-manifest).
-
-* Use your app that supports configurable tabs in the groupchat scope. For more information, see [group chat scope](../resources/schem).
-
-* Adhere to general Teams tab design guidelines for pre- and post-meeting scenarios. For experiences during meetings, refer to the in-meeting tab and in-meeting dialog design guidelines. For more information, see [Teams tab design guidelines](../tabs/design/tabs.md), [in-meeting tab design guidelines](../apps-in-teams-meetings/design/designing-apps-in-meetings.md#use-an-in-meeting-tab), and [in-meeting dialog design guidelines](../apps-in-teams-meetings/design/designing-apps-in-meetings.md#use-an-in-meeting-dialog).
-
-* Support the `groupchat` scope to enable your app in pre-meeting and post-meeting chats. With the pre-meeting app experience, you can find and add meeting apps and do the pre-meeting tasks. With the post-meeting app experience, you can view the results of the meeting, such as poll survey results or fee
-* Meeting API URL parameters must have `meetingId`, `userId`, and `tenantId`. The parameters are available as part of the Teams Client SDK and bot activity. Also, you can retrieve reliable information for user ID and tenant ID using [tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
-
-* The `GetParticipant` API must have a bot registration and ID to generate auth tokens. For more information, see [bot registration and ID](../build-your-first-app/build-bot.md).
-
-* For your app to update in real time, it must be up-to-date based on event activities in the meeting. These events can be within the in-meeting dialog box and other stages across the meeting lifecycle. For the in-meeting dialog box, see completion `bot Id` parameter in `NotificationSignal` API.
-
-* The `Meeting Details` API must have a bot registration and bot ID. It requires Bot SDK to get `TurnContext`. To use the Meeting Details API, you must obtain different RSC permission based on the scope of any meeting, such as private meeting or channel meeting.
-
-* For real-time meeting events, you must be familiar with the `TurnContext` object available through the Bot SDK. The `Activity` object in `TurnContext` contains the payload with the actual start and end time. Real-time meeting events require a registered bot ID from the Teams platform. The bot can automatically receive meeting start or end event by adding `ChannelMeeting.ReadBasic.Group` in the manifest.
-
-* Have parameters `meetingId`, `userId`, and `tenantId` in meeting API URL. The parameters are available as part of the Teams Client SDK and bot activity. Also, you can retrieve reliable information for user ID and tenant ID using [tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
-
-* Have a bot registration and ID in the `GetParticipant` API to generate auth tokens. For more information, see [bot registration and ID](../build-your-first-app/build-bot.md).
-
-* Keep your app up-to-date based on event activities in the meeting. These events can be within the in-meeting dialog box and other stages across the meeting lifecycle. For the in-meeting dialog box, check the completion `bot Id` parameter in `NotificationSignal` API.
-
-* Have a bot registration and bot ID in the `MeetingDetails` API. It requires Bot SDK to get `TurnContext`.
-
-* Be familiar with the `TurnContext` object available through the Bot SDK. The `Activity` object in `TurnContext` contains the payload with the actual start and end time. Real-time meeting events require a registered bot ID from the Teams platform.
-
-After you've gone through the prerequisites, you can use the meeting apps API references `GetUserContext`, `GetParticipant`, `NotificationSignal`, and `Meeting Details` that enable you to access information using attributes and display relevant content.
-
-> [!NOTE]
-> Teams JavaScript SDK (_Version_: 1.10 and later) for SSO to work in meeting side panel.
-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Enable and configure your apps for Teams meetings](enable-and-configure-your-app-for-teams-meetings.md)
-
-## See also
-
-* [In-meeting dialog design guidelines](design/designing-apps-in-meetings.md#use-an-in-meeting-dialog)
-* [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md)
-* [Apps for Teams meetings](teams-apps-in-meetings.md)
-* [Teams bot API changes to fetch team or chat members](~/resources/team-chat-member-api-changes.md)
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
ms.localizationpriority: none
Every team has a different way of communicating and collaborating tasks. To achieve these different tasks, customize Teams with apps for meetings. Enable your apps for Teams meetings and configure the apps to be available in meeting scope within their app manifest.
+## Prerequisites
+
+With apps for Teams meetings, you can expand the capabilities of your apps across the meeting lifecycle. Before you work with apps for Teams meetings, you must fulfill the following prerequisites:
+
+* Know how to develop Teams apps. For more information on how to develop Teams app, see [Teams app development](../overview.md).
+
+* Use your app that supports configurable tabs in the groupchat scope. For more information, see [group chat scope](../resources/schem).
+
+* Adhere to general [Teams tab design guidelines](../tabs/design/tabs.md) for pre- and post-meeting scenarios. For experiences during meetings, refer to the [in-meeting tab design guidelines](../apps-in-teams-meetings/design/designing-apps-in-meetings.md#use-an-in-meeting-tab) and [in-meeting dialog design guidelines](../apps-in-teams-meetings/design/designing-apps-in-meetings.md#use-an-in-meeting-dialog).
+
+* For your app to update in real time, it must be up-to-date based on event activities in the meeting. These events can be within the in-meeting dialog box and other stages across the meeting lifecycle. For the in-meeting dialog box, see `completionBotId` parameter in [in-meeting notification payload](API-references.md#send-an-in-meeting-notification).
+ ## Enable your app for Teams meetings To enable your app for Teams meetings, update your app manifest and use the context properties to determine where your app must appear.
The app manifest must include the following code snippet:
### Context property
-The `context` property determines what must be shown when a user invokes an app in a meeting depending on where the user invokes the app. The tab `context` and `scopes` properties enable you to determine where your app must appear. The tabs in the `team` or `groupchat` scope can have more than one context. Following are the values for the `context` property from which you can use all or some of the values:
+The `context` property determines what must be shown when a user invokes an app in a meeting depending on where the user invokes the app. The tab `context` and `scopes` properties enable you to determine where your app must appear. The tabs in the `team` or `groupchat` scope can have more than one context.
+
+Support the `groupchat` scope to enable your app in pre-meeting and post-meeting chats. With the pre-meeting app experience, you can find and add meeting apps and do the pre-meeting tasks. With the post-meeting app experience, you can view the results of the meeting, such as poll survey results or fee.
+
+ Following are the values for the `context` property from which you can use all or some of the values:
|Value|Description| |||
platform Meeting App Extensibility https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md
After adding the tabs to an existing meeting on mobile, you can see the same app
#### In-meeting app experience
-With the in-meeting app experience, you can engage participants during the meeting by using apps and the in-meeting dialog box. Meeting apps are hosted on the toolbar of the meeting window as an in-meeting tab. Use the in-meeting dialog box to showcase actionable content for meeting participants. For more information, see [create apps for Teams meetings](create-apps-for-teams-meetings.md).
+With the in-meeting app experience, you can engage participants during the meeting by using apps and the in-meeting dialog box. Meeting apps are hosted on the toolbar of the meeting window as an in-meeting tab. Use the in-meeting dialog box to showcase actionable content for meeting participants. For more information, see [Enable and configure your apps for Teams meetings](enable-and-configure-your-app-for-teams-meetings.md).
For mobile, meeting apps are available from **Apps** > ellipses ●●● in the meeting. Select **Apps** to view all the apps available in the meeting.
The following table provides the user types and lists the features that each use
## Next step > [!div class="nextstepaction"]
-> [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
+> [Enable and configure your apps for Teams meetings](enable-and-configure-your-app-for-teams-meetings.md)
## See also
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
The new custom Together Mode scenes feature enables users to collaborate in a me
## See also
-* [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
* [Designing your Microsoft Teams meeting extension](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md) * [Meeting apps API references - Teams](~/apps-in-teams-meetings/api-references.md) * [Custom Together Mode scenes](~/apps-in-teams-meetings/teams-together-mode.md)
platform Add Authentication https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/add-authentication.md
To add the Microsoft Teams channel:
![Bot home page](~/assets/images/adaptive-cards/bot-home-page.png) 1. Open your bot, which is listed in the **Recent resources** section.
-1. Select **Channels** in the left pane and select **Teams** <img src="~/assets/images/bots/teamsicon.png" alt="Teams icon" width="20"/>.
- ![Channel Teams](~/assets/images/adaptive-cards/channel-teams.png)
+1. Select **Channels** in the left pane and select **Microsoft Teams** :::image type="icon" source="../../../assets/icons/teams-icon.png" border="false":::.
+
+ :::image type="content" source="../../../assets/images/adaptive-cards/channel-teams.png" alt-text="Channel Teams":::
1. Select the checkbox to accept the terms of service and select **Agree**.</br>
platform Design Teams App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-overview.md
Design Adaptive Cards in our web-based tool.
## See also
-* [Prerequisites and API references for apps in Teams meetings](~/apps-in-teams-meetings/create-apps-for-teams-meetings.md)
+* [Enable and configure your apps for Teams meetings](../../apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md)
* [Designing your Microsoft Teams bot](~/bots/design/bots.md) * [Create Virtual Assistant](~/samples/virtual-assistant.md) * [Designing task modules for your Microsoft Teams app](~/task-modules-and-cards/task-modules/design-teams-task-modules.md)
platform Glossary https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/glossary.md
Common terms and definitions used in Teams Developer Documentation.
| [Meeting stage](../sbs-meetings-stage-view.yml) | A feature of meeting extension app. It's a shared space accessible to all participants during the meeting. It helps participants interact and collaborate with app content in real time. <br>**See also**: [Stage view](#s) | | [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md) | Messaging extensions are shortcuts for inserting app content or acting on a message. You can use a messaging extension without navigating away from the conversation. <br>**See also**: [Search commands](#s); [Action commands](#a) | | [Meeting extension](../apps-in-teams-meetings/design/designing-apps-in-meetings.md) | An app that is designed to be used during the meeting lifecycle to make it more productive, such as whiteboard, dashboard, and more. |
-| [Microsoft 365 account](../toolkit/accounts.md#microsoft-365-account) | Microsoft 365 account includes 25 user licenses, including the administrator, for development purposes only. |
-| [Microsoft 365 developer program](../toolkit/accounts.md#join-microsoft-365-developer-program) | The Microsoft 365 Developer Program helps you build apps that extend Microsoft 365. |
+| [Microsoft 365 account](../toolkit/accounts.md#microsoft-365-developer-account-types) | Microsoft 365 account includes 25 user licenses, including the administrator, for development purposes only. |
+| [Microsoft 365 developer program](../toolkit/accounts.md)| The Microsoft 365 Developer Program helps you build apps that extend Microsoft 365. |
| [Microsoft Graph Explorer](../graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md) | The gateway to data and intelligence in Microsoft 365. It provides a unified programmability model that you can use to access data in Microsoft 365, Windows 10, and Enterprise Mobility + Security. | | [Microsoft Teams](../overview.md) | Microsoft Teams is a group collaboration software that can be used to help teams work together remotely. | | [Microsoft Teams Platform](../concepts/app-fundamentals-overview.md) | The Microsoft Teams developer platform makes it easy for developers to integrate their own apps and services with Teams. |
platform Developer Preview Intro https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/dev-preview/developer-preview-intro.md
Developer Preview is a public program for developers which provides early access
## Developer preview app manifest
-Many features enabled in developer preview will require alterations to your app manifest JSON file. To do so you'll need to use the [developer preview manifest schema](~/resources/schem) to make these changes, nor will you be able to use it to upload your app for testing. To upload your app you'll need to click the `More apps` icon on the app bar, then select the `Upload a custom app link`. Using this method you can only upload a zipped version of your app package.
+Many features enabled in developer preview will require alterations to your app manifest JSON file. To do so, you'll need to use the [developer preview manifest schema](~/resources/schem) to make these changes, nor will you be able to use it to upload your app for testing. To upload your app you'll need to click the `More apps` icon on the app bar, then select the `Upload a custom app link`. Using this method you can only upload a zipped version of your app package.
-You may find it useful to use App Studio to create the non-developer preview portions of your app package, then export that package and manually edit the `manifest.json` file to add the developer preview features you wish to use. Once you've added developer preview features to the `manifest.json` file you will not be able to re-import the package into App Studio.
+You may find it useful to use App Studio to create the non-developer preview portions of your app package, then export that package and manually edit the `manifest.json` file to add the developer preview features you wish to use. Once you've added developer preview features to the `manifest.json` file you won't be able to re-import the package into App Studio.
## Enable developer preview Developer preview is enabled on a per-client basis, but the option to turn on developer preview is controlled at the organization level. To enable the option to turn on developer preview for an individual, you must ensure that they have the ability to upload custom apps. See [setting up your tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) for additional information.
-Using an app that contains developer preview features may cause clients that have not enabled developer preview to behave unexpectedly. If you do not see an entry for developer preview the most likely reason is your organization is not configured for app uploading.
+Using an app that contains developer preview features may cause clients that haven't enabled developer preview to behave unexpectedly. If you don't see an entry for developer preview the most likely reason is your organization isn't configured for app uploading.
### On a desktop or web client
-To enable the public developer preview on a desktop or web client, you need to do the following:
+To enable the public developer preview on a desktop or web client:
-1. Enabling uploading of apps in the admin console of your tenant as described [here](~/concepts/build-and-test/prepare-your-o365-tenant.md).
-1. Click on your profile (either in the upper right or lower left of the Teams interface) to display the Teams menu.
-1. Select About → Developer preview.
+1. Enable custom app uploading or sideloading for your developer tenant. For more information, see [Enable custom Teams apps](../../concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
+1. Select the ellipsis (...) menu next to your user profile to display the Teams menu.
+1. Select **About** > **Developer preview**.
1. Select **Switch to Developer preview**. ### On a mobile client
-To enable the public developer preview on a mobile client, you need to do the following:
+To enable the public developer preview on a mobile client:
-1. Enabling uploading of apps in the admin console of your tenant as described [here](~/concepts/build-and-test/prepare-your-o365-tenant.md).
+1. Enable app uploading or sideloading for your developer tenant. For more information, see [Enable custom Teams apps](../../concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
1. Open the hamburger menu on the top left, then select **Settings**. 1. Select **About**.
-1. Click the Developer preview toggle.
+1. Turn on the **Developer preview** toggle.
## Disable developer preview
platform Auth Oauth Provider https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-oauth-provider.md
The following image provides the flow to add authentication to external browsers
:::image type="content" source="../../../assets/images/tabs/tabs-authenticate-OAuth.PNG" alt-text="authenticate-OAuth" border="true":::
-### Steps to perform authentication to external browsers
+**To add authentication to external browsers**
-<!-- #### 1. Pass `isExternal` and placeholders in `url` -->
-**1. Initiate the external auth-login process**
+1. Initiate the external auth-login process.
-The 3P app calls the SDK function `microsoftTeams.authentication.authenticate` with `isExternal` set as true to initiate the external auth-login process.
+ The 3P app calls the SDK function `microsoftTeams.authentication.authenticate` with `isExternal` set as true to initiate the external auth-login process.
-The passed `url` contains placeholders for `{authId}`, and `{oauthRedirectMethod}`.
+ The passed `url` contains placeholders for `{authId}`, and `{oauthRedirectMethod}`.
-```JavaScript
-microsoftTeams.authentication.authenticate({
- url: 'https://3p.app.server/auth?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}',
- isExternal: true,
- successCallback: function (result) {
- //sucess
- } failureCallback: function (reason) {
- //failure
- }
-});
-```
+ ```JavaScript
+ microsoftTeams.authentication.authenticate({
+ url: 'https://3p.app.server/auth?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}',
+ isExternal: true,
+ successCallback: function (result) {
+ //sucess
+ } failureCallback: function (reason) {
+ //failure
+ }
+ });
+ ```
-**2. Teams link in an external browser**
+2. Teams link opens in an external browser.
-The Teams clients open the URL in an external browser after replacing the placeholders for `oauthRedirectMethod` and `authId` with suitable values.
+ The Teams clients open the URL in an external browser after replacing the placeholders for `oauthRedirectMethod` and `authId` with suitable values.
-#### Example
+ #### Example
-```http
- https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890
-```
+ ```http
+ https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890
+ ```
-**3. The 3P app server response**
+3. The 3P app server responds.
-The 3P app server receives and saves the `url` with the following two query parameters:
+ The 3P app server receives and saves the `url` with the following two query parameters:
-| Parameter | Description|
-| | |
-| `oauthRedirectMethod` |Indicates how the 3P app must send the response of authentication request back to Teams, with one of the two values: deeplink or page.|
-|`authId` | The request-id Teams created for this specific authentication request that needs to be sent back to Teams through deeplink.|
+ | Parameter | Description|
+ | | |
+ | `oauthRedirectMethod` |Indicates how the 3P app must send the response of authentication request back to Teams, with one of the two values: deeplink or page.|
+ |`authId` | The request-id Teams created for this specific authentication request that needs to be sent back to Teams through deeplink.|
-> [!TIP]
-> The 3P app can marshal `authId`, `oauthRedirectMethod` in the OAuth `state` query parameter while generating the login URL for the OAuthProvider. The `state` contains the passed `authId` and `oauthRedirectMethod`, when OAuthProvider redirects back to the 3P server and the 3P app uses the values for sending authentication response back to Teams as described in **6. The 3P app server response to Teams**.
+ > [!TIP]
+ > The 3P app can marshal `authId`, `oauthRedirectMethod` in the OAuth `state` query parameter while generating the login URL for the OAuthProvider. The `state` contains the passed `authId` and `oauthRedirectMethod`, when OAuthProvider redirects back to the 3P server and the 3P app uses the values for sending authentication response back to Teams as described in **6. The 3P app server response to Teams**.
-**4. The 3P app server redirects to specified `url`**
+4. The 3P app server redirects to specified `url`.
-The 3P app server redirects to OAuth providers auth page in the external browser. The `redirect_uri` is a dedicated route on the 3P app server. You can register `redirect_uri` in the OAuth providerΓÇÖs dev console as static, the parameters need to be sent through the state object.
+ The 3P app server redirects to OAuth providers auth page in the external browser. The `redirect_uri` is a dedicated route on the 3P app server. You can register `redirect_uri` in the OAuth providerΓÇÖs dev console as static, the parameters need to be sent through the state object.
-#### Example
+ #### Example
-```http
-https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…"}&client_id=…&response_type=code&access_type=offline&scope= …
-```
+ ```http
+ https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…"}&client_id=… &response_type=code&access_type=offline&scope= …
+ ```
-**5. Sign in to external browser**
+5. Sign in to external browser.
-User signs in to the external browser. The OAuth providers redirects back to the `redirect_uri` with the auth code and the state object.
+ User signs in to the external browser. The OAuth providers redirects back to the `redirect_uri` with the auth code and the state object.
-**6. The 3P app server response to Teams**
+6. The 3P app server checks and responds to Teams.
-The 3P app server handles the response and checks `oauthRedirectMethod`, which is returned from external OAuth provider in the state object to determine whether the response needs to be returned through the auth-callback deeplink or through web page that calls `notifySuccess()`.
+ The 3P app server handles the response and checks `oauthRedirectMethod`, which is returned from external OAuth provider in the state object to determine whether the response needs to be returned through the auth-callback deeplink or through web page that calls `notifySuccess()`.
-```JavaScript
-const state = JSON.parse(req.query.state)
-if (state.oauthRedirectMethod === 'deeplink') {
- return res.redirect('msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&code=${req.query.code}')
-}
-else {
-// continue redirecting to a web-page that will call notifySuccsss() ΓÇô usually this method is used in Teams-Web
-…
-```
-
-**7. The 3P app generates a deeplink**
-
-The 3P app generates a deeplink for Teams mobile in the following format, and sends the auth code with the session ID back to Teams.
-
-```JavaScript
-return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&code=${req.query.code}`)
-```
+ ```JavaScript
+ const state = JSON.parse(req.query.state)
+ if (state.oauthRedirectMethod === 'deeplink') {
+ return res.redirect('msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&code=${req.query.code}')
+ }
+ else {
+ // continue redirecting to a web-page that will call notifySuccsss() ΓÇô usually this method is used in Teams-Web
+ …
+ ```
- **8. Teams success callback results**
+7. The 3P app generates a deeplink.
-Teams calls the success callback and sends the result (auth code) to the 3P app. The 3P app receives the code in the success callback and use the code to retrieve the token, then the user information and update the user interface.
+ The 3P app generates a deeplink for Teams mobile in the following format, and sends the auth code with the session ID back to Teams.
-```JavaScript
-successCallback: function (result) {
-…
-}
-```
+ ```JavaScript
+ return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&code=${req.query.code}`)
+ ```
+
+ 8. Teams calls success callback and sends result.
+
+ Teams calls the success callback and sends the result (auth code) to the 3P app. The 3P app receives the code in the success callback and use the code to retrieve the token, then the user information and update the user interface.
+
+ ```JavaScript
+ successCallback: function (result) {
+ …
+ }
+ ```
## See also
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md
# Build Tabs for Microsoft Teams
-Tabs are Teams-aware webpages embedded in Microsoft Teams. They are simple HTML `<iframe\>` tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. For more information, see [Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
+Tabs are Teams-aware webpages embedded in Microsoft Teams. They're simple HTML `<iframe\>` tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. For more information, see [Teams JavaScript client SDK](/javascript/api/overview/msteams-client).
> [!IMPORTANT] > Currently, custom tabs are available in Government Community Cloud (GCC), GCC-High, and Department of Defense (DOD). The following image shows personal tabs:
-![Personal tabs](../assets/images/tabs/personaltab.png)
The following image shows Contoso channel tabs:
-![Channel or group tabs](../assets/images/tabs/tabs.png)
There are few prerequisites that you must go through before working on tabs.
-There are two types of tabs available in Teams, personal and channel or group. [Personal tabs](~/tabs/how-to/create-personal-tab.md), along with personally-scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left navigation bar for easy access. [Channel or group tabs](~/tabs/how-to/create-channel-group-tab.md) deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content.
+There are two types of tabs available in Teams, personal and channel or group. [Personal tabs](~/tabs/how-to/create-personal-tab.md), along with personal-scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left navigation bar for easy access. [Channel or group tabs](~/tabs/how-to/create-channel-group-tab.md) deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content.
You can [create a content page](~/tabs/how-to/create-tab-pages/content-page.md) as part of a personal tab, channel or group tab, or task module. You can [create a configuration page](~/tabs/how-to/create-tab-pages/configuration-page.md) that enables users to configure Microsoft Teams app and use it to configure a channel or group chat tab, a messaging extension, or an Office 365 Connector. You can permit users to reconfigure your tab after installation and [create a tab removal page](~/tabs/how-to/create-tab-pages/removal-page.md) for your application. When you build a Teams app that includes a tab, you must test how your [tab functions on both the Android and iOS Teams clients](~/tabs/design/tabs-mobile.md). Your tab must [get context](~/tabs/how-to/access-teams-context.md) through basic information, locale and theme information, and `entityId` or `subEntityId` that identifies what is in the tab.
-You can build tabs with Adaptive Cards and centralize all Teams app capabilities by eliminating the need for a different backend for your bots and tabs. [Stage View](~/tabs/tabs-link-unfurling.md) is a new UI component that allows you to render the content opened in full screen in Teams and pinned as a tab. The existing [link unfurling](~/tabs/tabs-link-unfurling.md) service is updated, so that it is used to turn URLs into a tab using an Adaptive Card and Chat Services. You can [create conversational tabs](~/tabs/how-to/conversational-tabs.md) using conversational sub-entities that allow users to have conversations about sub-entities in your tab, such as specific task, patient, and sales opportunity, instead of discussing the entire tab. You can make changes to [tab margins](~/resources/removing-tab-margins.md) to enhance the developer's experience when building apps. You can drag the tab and place it in the desired position to interchange the tab positions within your personal apps and channel or group chats.
+You can build tabs with Adaptive Cards and centralize all Teams app capabilities by eliminating the need for a different backend for your bots and tabs. [Stage View](~/tabs/tabs-link-unfurling.md) is a new UI component that allows you to render the content opened in full screen in Teams and pinned as a tab. The existing [link unfurling](~/tabs/tabs-link-unfurling.md) service is updated, so that it's used to turn URLs into a tab using an Adaptive Card and Chat Services. You can [create conversational tabs](~/tabs/how-to/conversational-tabs.md) using conversational sub-entities that allow users to have conversations about sub-entities in your tab, such as specific task, patient, and sales opportunity, instead of discussing the entire tab. You can make changes to [tab margins](~/resources/removing-tab-margins.md) to enhance the developer's experience when building apps. You can drag the tab and place it in the desired position to interchange the tab positions within your personal apps and channel or group chats.
> [!NOTE] > **Posts** and **Files** can't be moved from their positions.
You can use one of the following methods to create tabs:
### Declare custom tab in app manifest
-A custom tab is declared in the app manifest of your app package. For each webpage you want included as a tab in your app, you define a URL and a scope. Additionally, you can add the [Teams JavaScript client SDK](/javascript/api/overview/msteams-client) to your page, and call `microsoftTeams.initialize()` after your page loads. Teams displays your page and provides access to Teams-specific information, for example the Teams client is running the dark theme.
+A custom tab is declared in the app manifest of your app package. For each webpage you want included as a tab in your app, you define a URL and a scope. Additionally, you can add the [Teams JavaScript client SDK](/javascript/api/overview/msteams-client) to your page, and call `microsoftTeams.initialize()` after your page loads. Teams displays your page and provides access to Teams-specific information, for example, the Teams client is running the dark theme.
Whether you choose to expose your tab within the channel or group, or personal scope, you must present an <iframe\> HTML [content page](~/tabs/how-to/create-tab-pages/content-page.md) in your tab. For personal tabs, the content URL is set directly in your Teams app manifest by the `contentUrl` property in the `staticTabs` array. Your tab's content is the same for all users.
platform Accounts https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/accounts.md
Title: Prepare Accounts to Build Teams Apps
+ Title: Prepare accounts to build Teams apps
-description: Prepare Accounts to Build Teams Apps
-
+description: Prepare accounts to build Teams apps
+
+ms.localizationpriority: high
Previously updated : 11/29/2021 Last updated : 03/14/2022 -- # Prepare accounts to build Teams apps
-To develop Teams app, you require at least one Microsoft 365 account with valid subscription. If you want to host your backend resources on Azure, you need an Azure account. Azure account is optional if your existing application is hosted on other cloud provider and you want to integrate the existing application to Teams platform.
+To create a Teams app and upload, you need to prepare the following accounts:
-## Microsoft 365 account
+* [Microsoft 365 account with valid subscription.](accounts.md#microsoft-365-account)
+* [Azure account to host the backend resources on Azure](accounts.md#azure-account-to-host-backend-resources).
-If you donΓÇÖt have an existing Microsoft 365 account with a valid subscription, you can create one by joining the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program). The Microsoft 365 developer program includes a Microsoft 365 E5 developer subscription that you can use to create your own sandbox and develop solutions independent of your production environment.
+## Microsoft 365 account
-## Azure account
+To create a Microsoft 365 account, sign up for a Microsoft 365 developer program subscription. The subscription is free for 90 days and continues to renew as long as you're using it for development activity.
-If you want to host your app related resources or access resources within Azure, you must have an Azure subscription. You can [create a free account](https://azure.microsoft.com/free/) before you begin.
+If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It's active as long as your Visual Studio subscription is active. For more information, see [Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program).
-## Join Microsoft 365 developer program
+### Microsoft 365 developer program
-If you don't have a Microsoft 365 account, you must sign up for a [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program) subscription. The subscription is free for 90 days and continues to renew as long as you are using it for development activity. If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 [developer subscription](https://aka.ms/MyVisualStudioBenefits). It is active as long as your Visual Studio subscription is active. For more information, see [set up a Microsoft 365 developer subscription](https://developer.microsoft.com/microsoft-365/dev-program).
+To get a free Teams developer account join the Microsoft 365 developer program and perform the following steps:
1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program). 2. Select **Join Now**. 3. Select **Set up E5 subscription**.
-4. Set up your administrator account. After you finish, you should see the following screen:
+4. Set up your administrator account.
+
+ The following image is shown after you complete the subscription:
+ :::image type="content" source="./images/m365-developer-program.png" alt-text="Diagram that shows Microsoft 365 program":::
-## Accounts for Microsoft 365 developer program
+### Microsoft 365 developer account types
You can sign up for the developer program by using one of the following account types:
-* **Microsoft account for personal use**
+- **Microsoft account for personal use**
- Provides access to all consumer oriented Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365. Signing up for an Outlook.com mailbox automatically creates a Microsoft account. After a Microsoft account is created, it can be used to access consumer-related Microsoft cloud services or Azure.
+ The Microsoft account provides you access to Microsoft products and cloud services, such as Outlook, Messenger, OneDrive, MSN, Xbox Live, or Microsoft 365. You can sign up for an Outlook.com mailbox to create a Microsoft account, which can be used to access consumer-related Microsoft cloud services or Azure.
-* **Work account for business**
+- **Microsoft work account for business**
- Provides access to all small, medium, and enterprise business-level Microsoft cloud services, such as Azure, Microsoft Intune, or Microsoft 365. When you sign up to one of these services as an organization, a cloud-based directory is automatically provisioned in Microsoft Azure Active Directory (Azure AD) to represent your organization.
+ This account provides access to all small, medium, and enterprise business-level Microsoft cloud services, such as Azure, Microsoft Intune, or Microsoft 365. When you sign up to one of these services as an organization, a cloud-based directory is automatically provisioned in Microsoft Azure Active Directory (Azure AD) to represent your organization.
-* **Visual Studio ID**
+- **Visual Studio user id**
- You can create for your Visual Studio Professional or Enterprise subscriptions - We recommend that you use this option to join the developer program from within the Visual Studio Gallery to get the full benefits as a Visual Studio subscriber.
+ The user id created to use Visual Studio Professional or Enterprise subscription can be used to join the developer program within the Visual Studio Gallery to avail full benefits as a Visual Studio subscriber.
-## Teams customer app upload or sideload permission
+## Azure account to host backend resources
+
+Azure account is optional if your existing application is hosted on other cloud provider and you want to integrate the existing application on Teams platform.
+
+**Visual Studio ID**
+
+If you want to host your application related resources or access resources within Azure, you can [create a free account](https://azure.microsoft.com/free/) before you begin. Alternatively you can select to host your backend resources using another cloud provider, or on your own servers if they are available from the public domain.
+
+## Teams custom app upload or sideload permission
> [!IMPORTANT]
-> During development, you must load your app within your Teams without distributing it. This is known as **sideloading**.
+> After creating the app, you must load your app in Teams without distributing it. This process is known as **sideloading**.
-The following list provides steps to check whether sideloading app permission is enabled. The two different ways are as follows:
+ You can verify if the sideloading permission is enabled using either Visual Studio Code or Teams client.
-* **To use Microsoft Visual studio code**
+* **Verify sideloading permission using Visual Studio Code**
1. Open **Visual Studio Code**.
- 1. Select **Teams Toolkit** from left panel.
+ 1. Select **Teams Toolkit** from the left panel. If you are unable to see the option ensure that you have installed Teams Toolkit extension.
1. Select **Accounts** and log in to your Microsoft 365 account.
- 1. Check whether you can see the option **Sideloading enabled** as shown in the image:
+ 1. Check whether you can view the option **Sideloading enabled** as shown in the following image:
- :::image type="content" source="../assets/images/teams-toolkit-v2/sideloading.png" alt-text="Enable sideloading":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/sideloading.png" alt-text="Enable sideloading" border="true":::
-* **To use Teams account**
+* **Verify sideloading permission using Teams client**
1. Open **Microsoft Teams**.
- 2. Select **Apps** in left bar.
+ 2. Select **Apps** in left panel.
3. Select **Publish an app**.
- :::image type="content" source="../assets/images/teams-toolkit-v2/publish.png" alt-text="Publish an app":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/publish.png" alt-text="Publish an app" border="true":::
- 4. Check whether you can see the option **Upload a custom app** as shown in the image:
+ 4. Check whether you can see the option **Upload a custom app** as shown in the following image:
- :::image type="content" source="../assets/images/teams-toolkit-v2/upload.png" alt-text="Upload a custom app":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/upload.png" alt-text="Upload a custom app" border="true":::
-If you can't see **Upload a custom app** option, this indicates that you don't have permission for sideloading. Without sideloading permission, you wonΓÇÖt be able to do any local or remote debugging. So itΓÇÖs very important to get the sideloading permission for your account before you do any debugging for your Teams app. If you are admin for your tenant, you can open the sideloading setting for your tenant or organization. If you are not an admin, contact your tenant admin for the permission.
+ If you are unable to view the option **Upload a custom app** then, it indicates that you don't have the required permission for sideloading.
+ * For a tenant admin, enable the sideloading setting for your tenant or organization in the Teams admin center.
+ * If you aren't a tenant admin, you'll need to contact your tenant admin to enable sideloading.
-## Enable custom app uploading for your organization
+### Upload your custom app
> [!IMPORTANT]
-> To turn on the custom app uploading or sideloading for your developer tenant, you must be the admin for your tenant.
+> To turn on custom app uploading or sideloading for your developer tenant, you must be the admin for your tenant.
+
+**To upload the custom app**
1. Sign in to [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials. 2. Select **Show All** > **Teams**.
- :::image type="content" source="../assets/images/teams-toolkit-v2/5.png" alt-text="show all":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/5.png" alt-text="show all" border="true":::
-> [!NOTE]
-> It can take **up to 24 hours** for the **Teams** option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation in that time.
+ > [!Note]
+ > It can take **up to 24 hours** for the **Teams** option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation.
-3. Navigate to **Teams apps** > **Setup Policies** > **Global**.
+3. Navigate to **Teams apps** > **Setup policies**.
- :::image type="content" source="../assets/images/teams-toolkit-v2/3.png" alt-text="set olicies":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/3.png" alt-text="set policies":::
-4. Toggle Upload custom apps to the **On** position.
+4. Set toggle **Upload custom apps** to **On** position.
:::image type="content" source="../assets/images/teams-toolkit-v2/4.png" alt-text="toggle"::: 5. Select **Save**.
-> [!Note]
-> It can take up to 24 hours for the sideloading to be active. In the meantime, you can use **upload for your tenant** to test your app. To upload the .zip package file of the app, see [upload custom apps](/microsoftteams/teams-app-setup-policies).
+ > [!Note]
+ > It can take up to 24 hours for sideloading to become active. In the meantime, you can use **upload for your tenant** to test your app. To upload the .zip package file of the app, see [Upload custom apps](/microsoftteams/teams-app-setup-policies).
-For more information, see [manage custom app policies and settings in Teams](/microsoftteams/teams-custom-app-policies-and-settings) and [manage app setup policies in Teams](/microsoftteams/teams-app-setup-policies).
+For more information, see [Manage custom app policies and settings in Teams](/microsoftteams/teams-custom-app-policies-and-settings) and [Manage app setup policies in Teams](/microsoftteams/teams-app-setup-policies).
## See also
-* [Create new Teams project](create-new-project.md)
+* [Create a new Teams app using Teams Toolkit](create-new-project.md)
* [Provision cloud resources](provision.md)
+* [Deploy Teams app to the cloud](deploy.md)
+* [Publish your Teams app](TeamsFx-collaboration.md)
+* [Manage multiple environments](TeamsFx-multi-env.md)
platform Create New Project https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/create-new-project.md
Title: Create new Teams project Using Teams Toolkit
+ Title: Create a new Teams app using Teams Toolkit
-description: Create new Teams project Using Teams Toolkit
-
+description: Create new Teams app using Teams Toolkit
+
+ms.localizationpriority: high
Previously updated : 11/29/2021 Last updated : 03/14/2022
-# Create new Teams project using Teams Toolkit
+# Create a new Teams app using Teams Toolkit
-To create new Teams project using Teams Toolkit, select **Create a new Teams app project** or **Start from a sample**.
+To create a new Teams app using Teams Toolkit, you can select from one of the following options:
-## Create new project
+* [Create a new Teams app](create-new-project.md#create-a-new-teams-app)
+* [View samples](create-new-project.md#create-a-new-teams-app-using-view-samples)
-The following guides helps you to create a new Teams app project using Teams Toolkit:
+### Create a new Teams app
-* [Create new Teams Tab app (React)](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=2)
-* [Create new Teams Bot app](/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&branch)
-* [Create new Message Extension app](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=6&branch)
-* [Create new Teams Tab app (SharePoint Framework)](/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&branch)
+1. Open Visual Studio Code.
+1. Select the Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.PNG" border="true"::: icon in the Visual Studio Code sidebar.
+1. Select **Create a new Teams app**.
+1. Select from the available capabilities tab, bot, messaging extension, or a tab using SharePoint Framework (SPFx).
+1. Select at least one option to start creating the Teams app.
-## Create from samples
+### Create a new Teams app using view samples
- You can create new project from **sample gallery**. Select the required sample to create apps. The following steps guide you to create apps from samples:
+You can create a new app by exploring **View samples** and selecting an existing sample. The selected sample may already have some functionality, for example a to-do list with an Azure backend, or an integration with the Microsoft Graph Toolkit.
1. Open **Teams Toolkit** from Microsoft Visual Studio Code.
- 1. Select **DEVELOPMENT** section in Tree View.
+ 1. Select **DEVELOPMENT** section in Treeview.
1. Select **View samples**. The sample gallery appears as shown in the following image:
- :::image type="content" source="../assets/images/teams-toolkit-v2/manual/view samples.png" alt-text="samples":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/view-samples.png" alt-text="View samples":::
-You can explore and download samples and either run apps locally or remotely to preview in Teams web client. Follow the instructions of each sample or browse the source code of samples by selecting **View on GitHub** to access open source repo for samples.
+You can explore and download samples and either run your app locally or remotely to preview in Teams web client. Follow the instructions for each sample, or select **View on GitHub** to open the sample within the `TeamsFx Samples repository` and browse the source code.
+
+For more information, see [Create a new Teams Tab app (React)](/microsoftteams/platform/sbs-gs-javascript?tabs=vscode%2Cvsc%2Cviscode%2Cvcode&tutorial-step=2).
## See also
You can explore and download samples and either run apps locally or remotely to
* [Deploy Teams app to the cloud](deploy.md) * [Publish your Teams app](TeamsFx-collaboration.md) * [Manage multiple environments](TeamsFx-multi-env.md)
-* [Collaborate with other developers on Teams project](TeamsFx-collaboration.md)
+* [Collaborate with other developers on Teams project](TeamsFx-collaboration.md)
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
After you upload the app, open the connectors list from any channel. Scroll to t
To verify that `HttpPOST` action is working correctly, [send messages to your connector](~/webhooks-and-connectors/how-to/connectors-using.md).
+Follow the [step-by-step guide](../../sbs-teams-connectors.yml) to create and test the connectors in your Microsoft Teams.
+ ## Publish connectors for the organization If you want the connector to be available only to the users in your organization, you can upload your custom connector app to your [organization's app catalog](~/concepts/deploy-and-publish/apps-publish.md).
The following table provides the sample name and its description:
| Connectors | Sample Office 365 Connector generating notifications to Teams channel.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-todo-notification/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-github-notification/nodejs)| | Generic connectors sample |Sample code for a generic connector that is easy to customize for any system that supports webhooks.| | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-generic/nodejs)|
+## Step-by-step guide
+
+Follow the [step-by-step guide](../../sbs-teams-connectors.yml) to build and test connector in Teams.
+ ## See also * [Create and send messages](~/webhooks-and-connectors/how-to/connectors-using.md)
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md
Discover Microsoft Teams platform features that are generally available (GA) and
| Date | Update | Find here | | | | |
+|03/14/2022| Introduced step-by-step guide to build and test a connector in Microsoft Teams. | Build webhooks and connectors > Create Office 365 Connectors > [Build Teams connectors](sbs-teams-connectors.yml)|
|03/10/2022| Added information on Moodle LMS and Microsoft 365 plugins | Integrate with Teams > Moodle LMS > [Moodle learning management system](resources/moodle-overview.md)| |03/03/2022 | How to add authentication using external OAuth provider| Add authentication > Tabs > [Use external OAuth providers](tabs/how-to/authentication/auth-oauth-provider.md) | |02/25/2022| Introduced step-by-step guide to invoke task modules in Teams| Build cards and task modules > Build task modules > Use task modules from bots > [Invoke task module from Teams](sbs-botbuilder-taskmodule.yml)|
Discover Microsoft Teams platform features that are generally available (GA) and
|02/08/2022| Introduced step-by-step guide to create Calling and Meeting bot| Build bots > Calls and meetings bots > Register calls and meetings bot > [Step-by-step guide to create Calling and Meeting bot](sbs-calling-and-meeting.yml) | |02/07/2022| Tools and SDKs |Teams Toolkit for Visual Studio Code > </br> ΓÇó Add capabilities to Teams app> [Add capabilities to your Teams apps](toolkit/add-capability.md) </br> ΓÇó Add cloud resources to Teams app> [Add cloud resources to your Teams app](toolkit/add-resource.md) | |02/03/2022| Introduced app manifest version 1.12 | ΓÇó App manifest > [App manifest schema](resources/schem) |
-|02/03/2022| Test preview for monetized apps (developer preview)| Monetize your app > [Test preview for monetized apps](concepts/deploy-and-publish/appsource/prepare/Test-preview-for-monetized-apps.md)|
-|02/03/2022| In-app purchase flow for monetization of apps (developer preview) | Monetize your app > [In-app purchases](concepts/deploy-and-publish/appsource/prepare/in-app-purchase-flow.md) |
## GA features
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Update** | **Find here** | | -- | | -|
+|03/14/2022| Introduced step-by-step guide to build and test a connector in Microsoft Teams. | Build webhooks and connectors > Create Office 365 Connectors > [Build Teams connectors](sbs-teams-connectors.yml)|
|03/10/2022 | Added information on Moodle LMS and Microsoft 365 plugins | Integrate with Teams > Moodle LMS > [Moodle learning management system](resources/moodle-overview.md)| |03/03/2022 | How to add authentication using external OAuth provider| Add authentication > Tabs > [Use external OAuth providers](tabs/how-to/authentication/auth-oauth-provider.md) | | 02/25/2022| Introduced step-by-step guide to invoke task modules in Teams| Build cards and task modules > Build task modules > Use task modules from bots > [Invoke task module from Teams](sbs-botbuilder-taskmodule.yml)|
Explore updates from the previous GA releases listed here.
|11/10/2020|Teams bot design guidelines |[Bot design guidelines](bots/design/bots.md)| |09/30/2020|Sending and receiving files to bots on mobile devices is now supported |[Send and receive files through your bot](resources/bot-v3/bots-files.md)| |09/22/2020|New information for getting started with Teams development |[Build your first Teams app overview](build-your-first-app/build-first-app-overview.md)|
-|09/18/2020|Support for in-meeting Teams apps (Release Preview) |[Create apps for Teams meetings](apps-in-teams-meetings/create-apps-for-teams-meetings.md) and [Apps in Teams meetings](apps-in-teams-meetings/teams-apps-in-meetings.md)|
+|09/18/2020|Support for in-meeting Teams apps (Release Preview) |[Apps in Teams meetings](apps-in-teams-meetings/teams-apps-in-meetings.md)|
|08/19/2020|Import Teams messages with Microsoft Graph |[Import third-party platform messages to Teams using Microsoft Graph](graph-api/import-messages/import-external-messages-to-teams.md) |08/12/2020 |Adaptive Cards support in incoming webhook moved to GA |[Send adaptive cards using an incoming webhook](~/webhooks-and-connectors/how-to/connectors-using.md#send-adaptive-cards-using-an-incoming-webhook) | |08/10/2020|Get started building Teams apps with the Visual Studio Toolkit |[Build apps with the Microsoft Teams Toolkit and Visual Studio Code](toolkit/visual-studio-overview.md) |