Updates from: 05/26/2021 03:29:08
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
Title: Create apps for teams meetings
+ Title: Prerequisites and API references for apps in Teams meetings
-description: create apps for teams meetings
+description: Work with apps for Teams meetings
localization_priority: Normal keywords: teams apps meetings user participant role api
-# Create apps for Teams meetings
-## Prerequisites and considerations
+# Prerequisites and API references for apps in Teams meetings
-Before you create apps for Teams meetings, you must have an understanding of the following:
+To expand the capabilities of your apps across the meeting lifecycle, Teams enables you to work with apps for Teams meetings. You must go through the prerequisites and you can use the meeting apps API references to enhance the meeting experience.
+
+## Prerequisites
+
+Before you work with apps for Teams meetings, you must have an understanding of the following:
* You must have knowledge of how to develop Teams apps. For more information, see [Teams app development](../overview.md).
-* You must update the Teams app manifest to indicate that the app is available for meetings. For more information, see [app manifest](#update-your-app-manifest).
+* You must 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).
-* For your app to function in the meeting lifecycle as a tab, it must support configurable tabs in the groupchat scope. For more information, see [groupchat scope](../resources/schem).
+* Your app must support configurable tabs in the groupchat scope, for your app to function in the meeting lifecycle as a tab. For more information, see [groupchat scope](../resources/schem).
-* You must 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).
+* You must 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).
* You must 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 perform pre-meeting tasks. With post-meeting app experience, you can view the results of the meeting, such as poll survey results or feedback.
-* Meeting API URL parameters must have `meetingId`, `userId`, and `tenantId`. These are available as part of the Teams client SDK and bot activity. In addition, reliable information for user ID and tenant ID can be retrieved using [Tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
+* Meeting API URL parameters must have `meetingId`, `userId`, and `tenantId`. These are available as part of the Teams Client SDK and bot activity. In addition, 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 `Notification Signal API`.
+* 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.
+
+* Meeting Details API must have a bot registration and bot ID. It requires Bot SDK to get `TurnContext`.
+
+* 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.
+
+After you have gone through the prerequisites, you can use the meeting apps API references `GetUserContext`, `GetParticipant`, `NotificationSignal`, and Meeting Details API that enable you to access information using attributes and display relevant content.
-## Meeting apps API reference
+## Meeting apps API references
+
+The new meeting extensibilities provide you with APIs that transform the meeting experience. With this new capability, you can build apps or integrate existing apps within the meeting lifecycle. You can use the APIs to make your app aware of the meeting. You can choose which APIs you want to use to enhance the meeting experience.
+
+The following table provides a list of these APIs:
|API|Description|Request|Source| |||-||
-|**GetUserContext**| This API enables you to get contextual information to display relevant content in a Teams tab. |_**microsoftTeams.getContext( ( ) => { /*...*/ } )**_|Microsoft Teams client SDK|
+|**GetUserContext**| This API enables you to get contextual information to display relevant content in a Teams tab. |_**microsoftTeams.getContext( ( ) => { /*...*/ } )**_|Microsoft Teams Client SDK|
|**GetParticipant**| This API allows a bot to fetch participant information by meeting ID and participant ID. |**GET** _**/v1/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId}**_ |Microsoft Bot Framework SDK| |**NotificationSignal** | This API enables you to provide meeting signals that are delivered using the existing conversation notification API for user-bot chat. It allows you to signal based on user action that shows an in-meeting dialog box. |**POST** _**/v3/conversations/{conversationId}/activities**_|Microsoft Bot Framework SDK|
+|**Meeting Details** | This API enables you to get static meeting metadata. |**GET** _**/v1/meetings/{meetingId}**_| Bot SDK |
-### GetUserContext
+### GetUserContext API
To identify and retrieve contextual information for your tab content, see [get context for your Teams tab](../tabs/how-to/access-teams-context.md#getting-context-by-using-the-microsoft-teams-javascript-library). `meetingId` is used by a tab when running in the meeting context and is added for the response payload. ### GetParticipant API > [!NOTE]
-> * Do not cache participant roles since the meeting organizer can change a role any time.
+> * Do not cache participant roles since the meeting organizer can change the roles any time.
> * Teams does not currently support large distribution lists or roster sizes of more than 350 participants for the `GetParticipant` API.
+The `GetParticipant` API allows a bot to fetch participant information by meeting ID and participant ID. The API includes query parameters, examples, and response codes.
+ #### Query parameters
+The `GetParticipant` API includes the following query parameters:
+ |Value|Type|Required|Description| |||-||
-|**meetingId**| string | Yes | The meeting identifier is available through Bot Invoke and Teams Client SDK.|
-|**participantId**| string | Yes | The participant ID is the user ID. It is available in Tab SSO, Bot Invoke, and Teams Client SDK. It is recommended to get a participant ID from the Tab SSO. |
-|**tenantId**| string | Yes | The tenant ID is required for the tenant users. It is available in Tab SSO, Bot Invoke, and Teams Client SDK. It is recommended to get a tenant ID from the Tab SSO. |
+|**meetingId**| String | Yes | The meeting identifier is available through Bot Invoke and Teams Client SDK.|
+|**participantId**| String | Yes | The participant ID is the user ID. It is available in Tab SSO, Bot Invoke, and Teams Client SDK. It is recommended to get a participant ID from the Tab SSO. |
+|**tenantId**| String | Yes | The tenant ID is required for the tenant users. It is available in Tab SSO, Bot Invoke, and Teams Client SDK. It is recommended to get a tenant ID from the Tab SSO. |
#### Example
+The `GetParticipant` API includes the following examples:
+ # [C#](#tab/dotnet) ```csharp
The JSON response body for `GetParticipant` API is:
#### Response codes
+The `GetParticipant` API includes the following response codes:
+ |Response code|Description| ||| | **403** | The app is not allowed to get participant information. This is the most common error response and is triggered if the app is not installed in the meeting. For example, if the app is disabled by tenant admin or blocked during live site migration.| | **200** | The participant information is successfully retrieved.| | **401** | The app responds with an invalid token.| | **404** | The meeting has either expired or participant cannot be found.|
-| **500** | The meeting has either expired more than 60 days since the meeting ended or the participant does not have permissions based on their role.|
+| **500** | The meeting has either expired (more than 60 days) since the meeting ended or the participants do not have permissions based on their role.|
### NotificationSignal API
All users in a meeting receive the notifications sent through the `NotificationS
> * When an in-meeting dialog box is invoked, the content is presented as a chat message. > * Currently, sending targeted notifications is not supported.
-#### Query parameters
+`NotificationSignal` API enables you to provide meeting signals that are delivered using the existing conversation notification API for user-bot chat. This API allows you to signal based on user action that shows an in-meeting dialog box. The API includes query parameter, examples, and response codes.
+
+#### Query parameter
+
+The `NotificationSignal` API includes the following query parameter:
|Value|Type|Required|Description| |||-||
-|**conversationId**| string | Yes | The conversation identifier is available as part of bot invoke. |
+|**conversationId**| String | Yes | The conversation identifier is available as part of Bot Invoke. |
-#### Example
+#### Examples
The `Bot ID` is declared in the manifest and the bot receives a result object.
The `Bot ID` is declared in the manifest and the bot receives a result object.
> * The `externalResourceUrl` width and height parameters must be in pixels. To ensure the dimensions are within the allowed limits, see [design guidelines](design/designing-apps-in-meetings.md). > * The URL is the page loaded as an `<iframe>` in the in-meeting dialog box. The domain must be in the app's `validDomains` array in your app manifest.
+The `NotificationSignal` API includes the following examples:
+ # [C#](#tab/dotnet) ```csharp
POST /v3/conversations/{conversationId}/activities
} ```
-* * *
+ #### Response codes
+The `NotificationSignal` API includes the following response codes:
+ |Response code|Description| ||| | **201** | The activity with signal is successfully sent. |
POST /v3/conversations/{conversationId}/activities
| **403** | The app is unable to send the signal. This can happen due to various reasons such as the tenant admin disables the app, the app is blocked during live site migration, and so on. In this case, the payload contains a detailed error message. | | **404** | The meeting chat does not exist. |
-## Enable your app for Teams meetings
-
-### Update your app manifest
-
-The meetings app capabilities are declared in your app manifest using the `configurableTabs`, `scopes`, and `context` arrays. Scope defines to whom and context defines where your app is available.
-
-> [!NOTE]
-> Try updating your app manifest with the [manifest schema](../resources/schem).
-> Apps in meetings need *groupchat* scope. The *team* scope works for tabs in channels only.
-
-```json
-
-"configurableTabs": [
- {
- "configurationUrl": "https://contoso.com/teamstab/configure",
- "canUpdateConfiguration": true,
- "scopes": [
- "team",
- "groupchat"
- ],
- "context":[
- "channelTab",
- "privateChatTab",
- "meetingChatTab",
- "meetingDetailsTab",
- "meetingSidePanel",
- "meetingStage"
- ]
- }
- ]
-```
-> [!NOTE]
-> `meetingStage` is currently available in developer preview only.
-
-### Context property
-
-The tab `context` and `scopes` properties enable you to determine where your app must appear. 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:
-
-|Value|Description|
-|||
-| **channelTab** | A tab in the header of a team channel. |
-| **privateChatTab** | A tab in the header of a group chat between a set of users not in the context of a team or meeting. |
-| **meetingChatTab** | A tab in the header of a group chat between a set of users in the context of a scheduled meeting. |
-| **meetingDetailsTab** | A tab in the header of the meeting details view of the calendar. |
-| **meetingSidePanel** | An in-meeting panel opened via the unified bar (U-bar). |
-| **meetingStage** | An app from the sidepanel can be shared to the meeting stage. |
+### Meeting Details API
> [!NOTE]
-> `Context` property is currently not supported on mobile clients.
+> This feature is currently available in [public developer preview](../resources/dev-preview/developer-preview-intro.md) only.
-## Configure your app for meeting scenarios
+The Meeting Details API enables your app to get static meeting metadata. These are data points that do not change dynamically.
+The API is available through Bot Services.
-> [!NOTE]
-> * For your app to be visible in the tab gallery it must support configurable tabs and the group chat scope.
-> * Mobile clients support tabs only in pre and post meeting stages.
-> * The in-meeting experiences that is in-meeting dialog box and tab is currently not supported on mobile clients. For more information, see [guidance for tabs on mobile](../tabs/design/tabs-mobile.md) when creating your tabs for mobile.
-
-### Before a meeting
+#### Query parameter
-Before a meeting, users can add tabs, bots and messaging extensions to a meeting. Users with organizer and presenter roles can add tabs to a meeting.
+The Meeting Details API includes the following query parameter:
-**To add a tab to a meeting**
-
-1. In your calendar, select a meeting to which you want to add a tab.
-1. Select the **Details** tab and select plus <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>. The tab gallery appears.
+|Value|Type|Required|Description|
+|||-||
+|**meetingId**| String | Yes | The meeting identifier is available through Bot Invoke and Teams Client SDK. |
- ![Pre-meeting experience](../assets/images/apps-in-meetings/PreMeeting.png)
+#### Example
-1. In the tab gallery, select the app that you want to add and follow the steps as required. The app is installed as a tab.
- > [!NOTE]
- > Currently, in meetings tab, getting meeting details and participant information is not supported.
+The Meeting Details API includes the following examples:
-**To add a messaging extension to a meeting**
+# [C#](#tab/dotnet)
-1. Select the ellipses or overflow menu &#x25CF;&#x25CF;&#x25CF; located in the compose message area in the chat.
-1. Select the app that you want to add and follow the steps as required. The app is installed as a messaging extension.
+```csharp
+var connectorClient = parameters.TurnContext.TurnState.Get<IConnectorClient>();
+var creds = connectorClient.Credentials as AppCredentials;
+var bearerToken = await creds.GetTokenAsync().ConfigureAwait(false);
+var request = new HttpRequestMessage(HttpMethod.Get, new Uri(new Uri(connectorClient.BaseUri.OriginalString), $"v1/meetings/{meetingId}"));
+request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", bearerToken);
+HttpResponseMessage response = await (connectorClient as ServiceClient<ConnectorClient>).HttpClient.SendAsync(request, CancellationToken.None).ConfigureAwait(false);
+string content;
+if (response.Content != null)
+{
+ content = await response.Content.ReadAsStringAsync().ConfigureAwait(false);
+}
+```
-**To add a bot to a meeting**
+# [JavaScript](#tab/javascript)
-In a meeting chat enter the **@** key and select **Get bots**.
+Not available
-> [!NOTE]
-> * The user identity must be confirmed using [Tabs SSO](../tabs/how-to/authentication/auth-aad-sso.md). After authentication, the app can retrieve the user role using the `GetParticipant` API.
-> * Based on the user role, the app has the capability to provide role specific experiences. For example, a polling app allows only organizers and presenters to create a new poll.
-> * Role assignments can be changed while a meeting is in progress. For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
+# [JSON](#tab/json)
-### During a meeting
+```http
+GET /v1/meetings/{meetingId}
+```
-#### sidePanel
+
-With the sidePanel, you can customize experiences in a meeting that enable organizers and presenters to have different set of views and actions. In your app manifest, you must add sidePanel 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 JSON response body for Meeting Details API is as follows:
-To use the `userContext` API to route requests accordingly, see [Teams SDK](../tabs/how-to/access-teams-context.md#user-context). See [Teams authentication flow for tabs](../tabs/how-to/authentication/auth-flow-tab.md). Authentication flow for tabs is very similar to the auth flow for websites. So tabs can use OAuth 2.0 directly. See, [Microsoft identity platform and OAuth 2.0 authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow).
+```json
+{
+ "details": {
+ "id": "meeting ID",
+ "msGraphResourceId": "",
+ "scheduledStartTime": "2020-08-21T02:30:00+00:00",
+ "scheduledEndTime": "2020-08-21T03:00:00+00:00",
+ "joinUrl": "https://teams.microsoft.com/l/xx",
+ "title": "All Hands",
+ "type": "Scheduled"
+ },
+ "conversation": {
+ "isGroup": true,
+ ΓÇ£conversationTypeΓÇ¥: ΓÇ£groupchatΓÇ¥,
+ "id": "meeting chat ID"
+ },
+ "organizer": {
+ "id": "<organizer user ID>",
+ "aadObjectId": "<AAD ID>",
+ "tenantId": "<Tenant ID>"
+ }
+}
+```
-Messaging extension works as expected when a user is in an in-meeting view and the user can post compose message extension cards. AppName in-meeting is a tooltip that states the app name in-meeting U-bar.
+## Real-time Teams meeting events
> [!NOTE]
-> Use version 1.7.0 or higher of [Teams SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), as versions prior to it do not support the side panel.
+> This feature is currently available in [public developer preview](../resources/dev-preview/developer-preview-intro.md) only.
-#### In-meeting dialog
+The user can receive real-time meeting events. As soon as any app is associated with a meeting, the actual meeting start and meeting end time are shared with the bot.
-The in-meeting dialog box can be used to engage participants during the meeting and collect information or feedback during the meeting. Use the [`NotificationSignal`](/graph/api/resources/notifications-api-overview?view=graph-rest-beta&preserve-view=true) API to signal that a bubble notification must be triggered. As part of the notification request payload, include the URL where the content to be shown is hosted.
+Actual start and end time of a meeting are different from the scheduled start and end time. The meeting details API provides the scheduled start and end time while the event provides the actual start and end time.
-In-meeting dialog must not use task module. Task module is not invoked in a meeting chat. An external resource URL is used to display content bubble in a meeting. You can use the `submitTask` method to submit data in a meeting chat.
+### Example of meeting start event payload
-> [!NOTE]
-> * You must invoke the [submitTask()](../task-modules-and-cards/task-modules/task-modules-bots.md#submitting-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?view=msteams-client-js-latest&preserve-view=true).
-> * If you want your app to support anonymous users, your initial invoke request payload must rely on the `from.id` request metadata in the `from` object, not the `from.aadObjectId` request metadata. `from.id` is the user ID and `from.aadObjectId` is the Azure Active Directory (AAD) 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).
+The following code provides an example of meeting start event payload:
-#### Share to stage
+```json
+{
+ "name": "Microsoft/MeetingStart",
+ "type": "event",
+ "timestamp": "2021-04-29T16:10:41.1252256Z",
+ "id": "123",
+ "channelId": "msteams",
+ "serviceUrl": "https://microsoft.com",
+ "from": {
+ "id": "userID",
+ "name": "",
+ "aadObjectId": "aadOnjectId"
+ },
+ "conversation": {
+ "isGroup": true,
+ "tenantId": "tenantId",
+ "id": "thread id"
+ },
+ "recipient": {
+ "id": "user Id",
+ "name": "user name"
+ },
+ "entities": [
+ {
+ "locale": "en-US",
+ "country": "US",
+ "type": "clientInfo"
+ }
+ ],
+ "channelData": {
+ "tenant": {
+ "id": "channel id"
+ },
+ "source": null,
+ "meeting": {
+ "id": "meeting id"
+ }
+ },
+ "value": {
+ "MeetingType": "Scheduled",
+ "Title": "Meeting Start/End Event",
+ "Id":"meeting id",
+ "JoinUrl": "url"
+ "StartTime": "2021-04-29T16:17:17.4388966Z"
+ },
+ "locale": "en-US"
+}
+```
-> [!NOTE]
-> * This capability is currently available in developer preview only.
-> * To use this feature, the app must support an in-meeting sidepanel.
+### Example of meeting end event payload
+The following code provides an example of meeting end event payload:
-This capability gives developers the ability to share an app to the meeting stage. By enabling share to the meeting stage, meeting participants can collaborate in real-time.
+```json
+{
+ "name": "Microsoft/MeetingEnd",
+ "type": "event",
+ "timestamp": "2021-04-29T16:17:17.4388966Z",
+ "id": "123",
+ "channelId": "msteams",
+ "serviceUrl": "https://microsoft.com",
+ "from": {
+ "id": "user id",
+ "name": "",
+ "aadObjectId": "aadObjectId"
+ },
+ "conversation": {
+ "isGroup": true,
+ "tenantId": "tenantId",
+ "id": "thread id"
+ },
+ "recipient": {
+ "id": "user id",
+ "name": "user name"
+ },
+ "entities": [
+ {
+ "locale": "en-US",
+ "country": "US",
+ "type": "clientInfo"
+ }
+ ],
+ "channelData": {
+ "tenant": {
+ "id": "channel id"
+ },
+ "source": null,
+ "meeting": {
+ "id": "meeting Id"
+ }
+ },
+ "value": {
+ "MeetingType": "Scheduled",
+ "Title": "Meeting Start/End Event in Canary",
+ "Id": "19:meeting_NTM3ZDJjOTUtZGRhOS00MzYxLTk5NDAtMzY4M2IzZWFjZGE1@thread.v2",
+ "JoinUrl": "url",
+ "EndTime": "2021-04-29T16:17:17.4388966Z"
+ },
+ "locale": "en-US"
+}
+```
-The required context is `meetingStage` in the app manifest. A prerequisite for this is to have the `meetingSidePanel` context. This enables the **Share** button in the sidepanel as depecited in the following image:
+### Example of getting metadata of a meeting
- ![share_to_stage_during_meeting experience](~/assets/images/apps-in-meetings/share_to_stage_during_meeting.png)
+Your bot receives the event through the `OnEventActivityAsync` handler.
-The manifest change that is needed to enable this capability is as follows:
+To deserialize the json payload, a model object is introduced to get the metadata of a meeting. The metadata of a meeting resides in the `value` property in the event payload. The `MeetingStartEndEventvalue` model object is created, whose member variables correspond to the keys under the `value` property in the event payload.
-```json
+The following code shows how to capture the metadata of a meeting that is `MeetingType`, `Title`, `Id`, `JoinUrl`, `StartTime`, and `EndTime` from a meeting start and end event:
-"configurableTabs": [
- {
- "configurationUrl": "https://contoso.com/teamstab/configure",
- "canUpdateConfiguration": true,
- "scopes": [
- "groupchat"
- ],
- "context":[
-
- "meetingSidePanel",
- "meetingStage"
- ]
- }
- ]
+```csharp
+protected override async Task OnEventActivityAsync(
+ITurnContext<IEventActivity> turnContext, CancellationToken cancellationToken)
+{
+ // Event Name is either `Microsoft/MeetingStart` or `Microsoft/MeetingEnd`
+ var meetingEventName = turnContext.Activity.Name;
+ // Value contains meeting information (ex: meeting type, start time, etc).
+ var meetingEventInfo = turnContext.Activity.Value as JObject;
+ var meetingEventInfoObject =
+meetingEventInfo.ToObject<MeetingStartEndEventValue>();
+ // Create a very simple adaptive card with meeting information
+var attachmentCard = createMeetingStartOrEndEventAttachment(meetingEventName,
+meetingEventInfoObject);
+ await turnContext.SendActivityAsync(MessageFactory.Attachment(attachmentCard));
+}
```
+The MeetingStartEndEventvalue.cs includes the following code:
-
-### After a meeting
-
-The post-meeting and pre-meeting configurations are equivalent.
+```csharp
+public class MeetingStartEndEventValue
+{
+ public string Id { get; set; }
+ public string Title { get; set; }
+ public string MeetingType { get; set; }
+ public string JoinUrl { get; set; }
+ public string StartTime { get; set; }
+ public string EndTime { get; set; }
+}
+```
## Code sample
The post-meeting and pre-meeting configurations are equivalent.
|-|--|--|--| | Meetings extensibility | Microsoft Teams meeting extensibility sample for passing tokens. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/nodejs) | | Meeting content bubble bot | Microsoft Teams meeting extensibility sample for interacting with content bubble bot in a meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/nodejs)|
-| Meeting SidePanel | Microsoft Teams meeting extensibility sample for iteracting with the side panel in-meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-sidepanel/csharp) |
+| Meeting meetingSidePanel | Microsoft Teams meeting extensibility sample for interacting with the side panel in-meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-sidepanel/csharp) | |
## 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)
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Enable and configure your apps for Teams meetings](enable-and-configure-your-app-for-teams-meetings.md)
platform Enable And Configure Your App For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/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: Enable and configure your apps for Teams meetings
+++
+# Enable and configure your apps for Teams meetings
+
+Every team has a different way of communicating and collaborating tasks. You can achieve these different tasks by customizing Teams with apps for meetings. To customize and to achieve different tasks, you must enable your apps for Teams meetings and configure your apps to be available in meeting scope within their app manifest.
+
+## Enable your app for Teams meetings
+
+To enable your app for Teams meetings, you must update your app manifest and use the context properties to determine where your app must appear.
+
+### Update your app manifest
+
+The meetings app capabilities are declared in your app manifest using the `configurableTabs`, `scopes`, and `context` arrays. Scope defines to whom and context defines where your app is available.
+
+> [!NOTE]
+> * Try updating your app manifest with the [manifest schema](../resources/schem).
+> * Apps in meetings require groupchat scope. The team scope works for tabs in channels only.
+
+The app manifest must include the following code snippet:
+
+```json
+
+"configurableTabs": [
+ {
+ "configurationUrl": "https://contoso.com/teamstab/configure",
+ "canUpdateConfiguration": true,
+ "scopes": [
+ "team",
+ "groupchat"
+ ],
+ "context":[
+ "channelTab",
+ "privateChatTab",
+ "meetingChatTab",
+ "meetingDetailsTab",
+ "meetingSidePanel",
+ "meetingStage"
+ ]
+ }
+ ]
+```
+
+> [!NOTE]
+> `meetingStage` is currently available in [developer preview](../resources/dev-preview/developer-preview-intro.md) only.
+
+### 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. 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:
+
+|Value|Description|
+|||
+| **channelTab** | A tab in the header of a team channel. |
+| **privateChatTab** | A tab in the header of a group chat between a set of users, not in the context of a team or meeting. |
+| **meetingChatTab** | A tab in the header of a group chat between a set of users in the context of a scheduled meeting. |
+| **meetingDetailsTab** | A tab in the header of the meeting details view of the calendar. |
+| **meetingSidePanel** | An in-meeting panel opened through the unified bar (U-bar). |
+| **meetingStage** | An app from the meetingSidePanel can be shared to the meeting stage. |
+
+> [!NOTE]
+> `Context` property is currently not supported on mobile clients.
+
+After you enable your app for Teams meetings, you must configure your app before a meeting, during a meeting, and after a meeting.
+
+## Configure your app for meeting scenarios
+
+> [!NOTE]
+> * For your app to be visible in the tab gallery, it must support configurable tabs and the group chat scope.
+> * Mobile clients support tabs only in pre and post meeting stages.
+> * The in-meeting experiences that is in-meeting dialog box and tab is currently not supported on mobile clients. For more information, see [guidance for tabs on mobile](../tabs/design/tabs-mobile.md) while creating your tabs for mobile.
+
+Teams meetings provides a unique collaborative experience for your organization. It provides the opportunity to configure your app for different meeting scenarios. You can configure your apps to enhance the meeting experience based on participant role or user type. Now you can identify what actions can be taken in the following meeting scenarios:
+* [Pre-meeting](#pre-meeting)
+* [In-meeting](#in-meeting)
+* [Post-meeting](#post-meeting)
+
+### Pre-meeting
+
+Before a meeting, users can add tabs, bots, and messaging extensions. Users with organizer and presenter roles can add tabs to a meeting.
+
+**To add a tab to a meeting**
+
+1. In your calendar, select a meeting to which you want to add a tab.
+1. Select the **Details** tab and select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>.
+
+ ![Pre-meeting experience](../assets/images/apps-in-meetings/PreMeeting.png)
+
+1. In the tab gallery that appears, select the app that you want to add and follow the steps as required. The app is installed as a tab.
+
+ > [!NOTE]
+ > Currently, in meetings tab, getting meeting details and participant information is not supported.
+
+**To add a messaging extension to a meeting**
+
+1. Select the ellipses &#x25CF;&#x25CF;&#x25CF; located in the compose message area in the chat.
+1. Select the app that you want to add and follow the steps as required. The app is installed as a messaging extension.
+
+**To add a bot to a meeting**
+
+In a meeting chat, enter the **@** key and select **Get bots**.
+
+> [!NOTE]
+> * The user identity must be confirmed using [Tabs SSO](../tabs/how-to/authentication/auth-aad-sso.md). After authentication, the app can retrieve the user role using the `GetParticipant` API.
+> * Based on the user role, the app has the capability to provide role specific experiences. For example, a polling app allows only organizers and presenters to create a new poll.
+> * Role assignments can be changed while a meeting is in progress. For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
+
+### In-meeting
+
+During a meeting, you can use the meetingSidePanel or the in-meeting dialog box to build unique experiences for your apps.
+
+#### meetingSidePanel
+
+With the meetingSidePanel, you can customize experiences in a meeting that enable 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).
+
+To use the `userContext` API to route requests accordingly, 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 very 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).
+
+Messaging extension works as expected when a user is in an in-meeting view, and the user can post compose message extension cards. AppName in-meeting is a tooltip that states the app name in-meeting U-bar.
+
+> [!NOTE]
+> Use version 1.7.0 or higher of [Teams SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), as versions prior to it do not support the side panel.
+
+#### In-meeting dialog box
+
+The in-meeting dialog box can be used to engage participants during the meeting and collect information or feedback during the meeting. Use the [`NotificationSignal`](/graph/api/resources/notifications-api-overview?view=graph-rest-beta&preserve-view=true) API to signal that a bubble notification must be triggered. As part of the notification request payload, include the URL where the content to be shown is hosted.
+
+In-meeting dialog must not use task module. Task module is not invoked in a meeting chat. An external resource URL is used to display content bubble in a meeting. You can use the `submitTask` method to submit data in a meeting chat.
+
+> [!NOTE]
+> * You must invoke the [submitTask()](../task-modules-and-cards/task-modules/task-modules-bots.md#submitting-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, your initial invoke request payload must rely on the `from.id` request metadata in the `from` object, not the `from.aadObjectId` request metadata. `from.id` is the user ID and `from.aadObjectId` is the Azure Active Directory (AAD) 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).
+
+#### Share to stage
+
+> [!NOTE]
+> * This capability is currently available in [developer preview](../resources/dev-preview/developer-preview-intro.md) only.
+> * To use this feature, the app must support an in-meeting meetingSidePanel.
+
+This capability gives developers the ability to share an app to the meeting stage. By enabling share to the meeting stage, meeting participants can collaborate in real-time.
+
+The required context is `meetingStage` in the app manifest. A prerequisite for this is to have the `meetingSidePanel` context. This enables **Share** in the meetingSidePanel.
+
+![Share to stage during meeting experience](~/assets/images/apps-in-meetings/share_to_stage_during_meeting.png)
+
+The manifest change that is needed to enable this capability is as follows:
+
+```json
+"configurableTabs": [
+ {
+ "configurationUrl": "https://contoso.com/teamstab/configure",
+ "canUpdateConfiguration": true,
+ "scopes": [
+ "groupchat"
+ ],
+ "context":[
+ "meetingSidePanel",
+ "meetingStage"
+ ]
+ }
+ ]
+```
+
+### Post-meeting
+
+The post-meeting and [pre-meeting](#pre-meeting) configurations are the same.
+
+## Code sample
+
+|Sample name | Description | Sample |
+|-|--|--|-|--|
+| Meeting app | Demonstrates how to use the Meeting Token Generator app to request a token, which is generated sequentially so that each participant has a fair opportunity to interact. This can be useful in situations like scrum meetings, Q&A sessions, and so on. | [View](https://github.com/OfficeDev/microsoft-teams-sample-meetings-token) |
+
+## 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)
platform Meeting App Extensibility https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md
+
+ Title: Meeting app extensibility
+
+description: Understand the meeting app extensibility
+++
+# Meeting app extensibility
+
+TeamsΓÇÖ meeting app extensibility is based on the following concepts:
+
+* Meeting lifecycle has different stages such as pre-meeting, in-meeting, and post-meeting.
+* There are three distinct participant roles in a meeting: organizer, presenter, and attendee. For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
+* There are various [user types](/microsoftteams/non-standard-users#:~:text=An%20anonymous%20user%20is%20a,their%20Microsoft%20or%20organization's%20account.) in a meeting: in-tenant, [guest](/microsoftteams/guest-access), [federated](/microsoftteams/manage-external-access), and anonymous users.
+
+This article covers information about meeting lifecycle and how to integrate tabs, bots, and messaging extensions in the meeting. It provides information to identify different participant roles and different user types to perform tasks.
+
+## Meeting lifecycle
+
+Meeting lifecycle consists of pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and messaging extensions in each stage of the meeting lifecycle.
+
+### Integrate tabs into the meeting lifecycle
+
+Tabs allow team members to access services and content in a specific space within a meeting. The team works directly with tabs and has conversations about the tools and data available within tabs. In Teams meeting, users can add a tab by selecting <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>, and choosing the app that they want to install.
+
+> [!IMPORTANT]
+> If you have integrated a tab with your meeting, then your app must follow the Teams [single sign-on (SSO) authentication flow for tabs](../tabs/how-to/authentication/auth-aad-sso.md).
+
+> [!NOTE]
+> * Mobile clients support tabs only in pre and post meeting stages. The in-meeting experiences that is in-meeting dialog and panel are currently not available on mobile.
+> * Apps are supported only in private scheduled meetings.
+
+#### Pre-meeting app experience
+
+With the pre-meeting app experience, you can find and add meeting apps and perform pre-meeting tasks, such as developing a poll to survey meeting participants.
+
+**To add tabs to an existing meeting**
+
+1. In your calendar, select a meeting to which you want to add a tab.
+1. Select the **Details** tab and select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>. The tab gallery appears.
+
+ ![Pre-meeting experience](../assets/images/apps-in-meetings/PreMeeting.png)
+
+1. In the tab gallery, select the app that you want to add and follow the steps as required. The app is installed as a tab.
+
+ ![Pre-meeting tab view](../assets/images/apps-in-meetings/PreMeetingTab.png)
+
+ > [!NOTE]
+ > * You can also add a tab using the meeting **Chat** tab in an existing meeting.
+ > * Tab layout must be in an organized state, if there are more than ten polls or surveys.
+
+#### 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 in the top upper bar 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).
+
+**To use tabs during a meeting**
+
+1. After entering the meeting, from the top upper bar of the chat window, select the app you want to use. An app is visible in a Teams meeting in the side panel or the in-meeting dialog box.
+1. In the in-meeting dialog box, enter your response as a feedback.
+
+ ![Dialog box view](../assets/images/apps-in-meetings/in-meeting-dialog-view.png)
+
+ > [!NOTE]
+ > * Apps can leverage the Teams Client SDK to access the `meetingId`, `userMri`, and `frameContext` to render the experience appropriately.
+ > * If the in-meeting dialog box is rendered successfully, you are notified that the results successfully downloaded.
+ > * Your app manifest specifies the places where you want them to appear. The context field is used for this purpose. It can also be part of a share-tray experience, subject to specified design guidelines.
+
+ The following image illustrates the in-meeting side panel:
+
+ ![In-meeting side panel](../assets/images/apps-in-meetings/in-meeting-dialog.png)
+
+#### Post-meeting app experience
+
+With post-meeting app experience, you can view the results of the meeting such as poll survey results or feedback. Select <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/> to add a tab and get meeting notes and results on which organizers and attendees must take action.
+
+The following image displays the **Contoso** tab with results of poll and feedback received from meeting attendees:
+
+![Post meeting view](../assets/images/apps-in-meetings/PostMeeting.png)
+
+> [!NOTE]
+> Tab layout must be organized when there are more than ten polls or surveys.
+
+### Integrate bots into the meeting lifecycle
+
+Bots enabled in groupchat scope start functioning in meetings. To implement bots, start with [build a bot](../build-your-first-app/build-bot.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-references).
+
+### Integrate messaging extensions into the meeting lifecycle
+
+To implement messaging extensions, start with [build a messaging extension](../messaging-extensions/how-to/create-messaging-extension.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-references).
+
+The Teams meeting app extensibility allows you to design your app based on participant roles in a meeting.
+
+## Participant roles in a meeting
+
+![Participants in a meeting](../assets/images/apps-in-meetings/participant-roles.png)
+
+Default participant settings are determined by an organization's IT administrator. The following are the participant roles in a meeting:
+
+* **Organizer**: The organizer schedules a meeting, sets the meeting options, assigns meeting roles, and starts the meeting. Only users with M365 account and Teams license can be organizers, and control attendee permissions. A meeting organizer can change the settings for a specific meeting. Organizers can make these changes on the **Meeting options** web page.
+* **Presenter**: Presenters have same capabilities of organizers with exclusions. A presenter cannot remove an organizer from the session or modify meeting options for the session. By default, participants joining a meeting have the presenter role.
+* **Attendee**: An attendee is a user who has been invited to attend a meeting but is not authorized to act as a presenter. Attendees can interact with other meeting members but cannot manage any of the meeting settings or share content.
+
+> [!NOTE]
+> Only an organizer or presenter can add, remove, or uninstall apps.
+
+For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
+
+After you design your app based on participant roles in a meeting, you can identify each user type for meetings and select what they can access.
+
+## User types in a meeting
+
+> [!NOTE]
+> The user type is not included in the **getParticipantRole** API.
+
+User types, such as, organizer, presenter, or attendee in a meeting can perform one of the [participant roles in a meeting](#participant-roles-in-a-meeting).
+
+The following list details the different user types along with their accessibility and performance:
+
+* **In-tenant**: In-tenant users belong to the organization and have credentials in Azure Active Directory (AAD) for the tenant. They are usually full-time, onsite, or remote employees. An in-tenant user can be an organizer, presenter, or attendee.
+* **Guest**: A guest is a participant from another organization invited to access Teams or other resources in the organization's tenant. Guests are added to the organizationΓÇÖs AAD and have same Teams capabilities as a native team member with access to team chats, meetings, and files. A guest user can be an organizer, presenter, or attendee. For more information, see [guest access in Teams](/microsoftteams/guest-access).
+* **Federated or external**: A federated user is an external Teams user in another organization who has been invited to join a meeting. Federated users have valid credentials with federated partners and are authorized by Teams. They do not have access to your teams or other shared resources from your organization. Guest access is a better option for external users to have access to teams and channels. For more information, see [manage external access in Teams](/microsoftteams/manage-external-access).
+
+ > [!NOTE]
+ > Your Teams users can add apps when they host meetings or chats with other organizations. The users can use apps shared by external users when your users join meetings or chats hosted by other organizations. The data policies of the hosting user's organization, as well as the data sharing practices of the third-party apps shared by that user's organization, will be in effect.
+
+* **Anonymous**: Anonymous users do not have an AAD identity and are not federated with a tenant. The anonymous participants are like external users, but their identity is not projected in the meeting. Anonymous users are not able to access apps in a meeting window. An anonymous user cannot be an organizer but can be a presenter or attendee.
+
+ > [!NOTE]
+ > Anonymous users inherit the global default user-level app permission policy. For more information, see [manage Apps](/microsoftteams/non-standard-users#anonymous-user-in-meetings-access).
+
+A guest or anonymous user cannot add, remove, or uninstall apps.
+
+The following table provides the user types and what features each user can access:
+
+| User type | Tabs | Bots | Messaging extensions | Adaptive Cards | Task modules | In-meeting dialog |
+| :-- | :-- | :-- | :-- | :-- | :-- | :-- |
+| Anonymous user | Not available | Not available | Not available | Interactions in the meeting chat are allowed. | Interactions in the meeting chat from an Adaptive Card are allowed. | Not available |
+| Guest that is part of the tenant AAD | Interaction is allowed. Creating, updating, and deleting are not allowed. | Not available | Not available | Interactions in the meeting chat are allowed. | Interactions in the meeting chat from an Adaptive Card are allowed. | Available |
+| Federated | Not available | Not available | Not available | Not available | Not available | Not available |
+
+## See also
+
+* [Tab](../tabs/what-are-tabs.md#understand-how-tabs-work)
+* [Bot](../bots/what-are-bots.md)
+* [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md)
+* [Design your app](../apps-in-teams-meetings/design/designing-apps-in-meetings.md)
+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
Title: Apps in Teams meetings
+ Title: Apps for Teams meetings
description: overview of apps in Teams meetings based on participant and user role
localization_priority: Normal
keywords: teams apps meetings user participant role api
-# Apps in Teams meetings
+# Apps for Teams meetings
-Meetings enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. The meeting app can deliver a user experience for each stage of the meeting lifecycle including pre-meeting, in-meeting and post-meeting app experience, depending on the attendee's status.
+Meetings enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. The meeting app can deliver a user experience for each stage of the meeting lifecycle including pre-meeting, in-meeting, and post-meeting app experience, depending on the attendee's status.
-Teams end-users can access apps during meetings using the tab gallery, for example:
+The users can access apps during meetings using the tab gallery, for example:
-* Pre-stage a Kanban board
-* Launch an in-meeting actionable dialog
-* Create a post-meeting poll
+* Pre-stage a Kanban board.
+* Launch an in-meeting actionable dialog.
+* Create a post-meeting survey.
-TeamsΓÇÖ meeting app extensibility is based on the following concepts:
+> [!VIDEO https://www.youtube-nocookie.com/embed/nKAy5rNDus4]
-Γ£ö Meeting lifecycle has stages such as before, during, and after meeting time frame.
-Γ£ö Participant roles in a meeting such as meeting organizer, presenter, or attendee.
-Γ£ö User types in a meeting such as in-tenant, guest, federated, or anonymous Teams user.
+This article provides an overview of meeting app extensibility, API references, enable and configure apps for meetings, and Together Mode in Teams.
-This article covers information about the meeting lifecycle and how to integrate tabs, bots, and messaging extensions in your meeting. It also enables you to identify participant roles and also use different user types to perform tasks.
+You can enhance your meeting experience by using the meeting extensibility feature, which enables you to integrate your apps within meetings. It also includes different stages of a meeting lifecycle, where you can integrate tabs, bots, and messaging extensions. With meetings extensibility APIs, you can identify different participant roles and user types, get meeting events, generate in-meeting dialogs, and so on.
-> [!NOTE]
-> To work with the meeting app extensibility features, you must have the appropriate permissions.
+To customize Teams with apps for meetings, you can enable your apps for Teams meetings by updating your app manifest and you can also configure your apps for meeting scenarios.
-### Meeting lifecycle
-
-Meeting lifecycle consists of pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and messaging extensions in each stage of the meeting lifecycle.
-
-## Integrate tabs into the meeting lifecycle
-
-Tabs allow team members to access services and content in a specific space within a channel or chat. This lets the team work directly with tabs and have conversations about the tools and data available within tabs. In Teams meeting, users can add a tab by selecting plus <img src="~/assets/images/apps-in-meetings/plusbutton.png" alt="Plus button" width="30"/>, and choosing the app that they want to install as a tab.
-
-> [!IMPORTANT]
-> If you have integrated a tab with your meeting, then your app must follow the Teams [single sign-on (SSO) authentication flow](../tabs/how-to/authentication/auth-aad-sso.md) for tabs.
-
-> [!NOTE]
-> * Mobile clients support tabs only in pre and post meeting stages. The in-meeting experiences that is in-meeting dialog and panel are currently not available on mobile.
-> * Apps are supported only in private scheduled meetings.
-
-### Pre-meeting app experience
-
-**Pre-meeting experience:**
-
-![pre-meeting experience](../assets/images/apps-in-meetings/PreMeeting.png)
-
-**Pre-meeting tab:**
-
-![pre-meeting tab view](../assets/images/apps-in-meetings/PreMeetingTab.png)
-
-Γ£ö Permissioned users are users who can add apps to a meeting during different stages of the meeting lifecycle. These users can add apps to a meeting through the tab gallery in two ways:
-
- * Using the **Details** tab on the Teams scheduling form.
-
- * Using the meeting **Chat** tab in an existing meeting.
-
-Γ£ö Tab apps are accessible in meetings **Details** and **Chats** pages using a plus Γ₧ò button.
-
-Γ£ö Tab layout must be in an organized state if there are multiple (more than ten) polls or surveys.
-
-### In-meeting app experience
-
-Γ£ö Meeting apps are hosted in the top upper bar of the chat window and as in-meeting tab experience using the in-meeting tab. When users add a tab to a meeting through the tab gallery, apps that are **during meeting** experiences are shown.
-
-Γ£ö Permissioned users can add apps while in the meeting.
-
-Γ£ö When loaded in the context of a meeting, apps can leverage the Teams client SDK to access the `meetingId`, `userMri`, and `frameContext` to appropriately render the experience.
-
-Γ£ö Exporting a result of a survey or poll notifies the users that the results successfully downloaded.
-
-Γ£ö An app is visible in a Teams meeting in the side panel or the in-meeting dialog box. 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).
-
- > [!NOTE]
- > Your app manifest specifies that your tab is [optimized for side panel](create-apps-for-teams-meetings.md#during-a-meeting), that is where it is displayed. It can also be part of a share-tray experience, subject to specified design guidelines.
-
-The following images display the app as an in-meeting dialog box and as a separate side panel:
-
-![In-meeting experience](../assets/images/apps-in-meetings/in-meeting-experience.png)
-
-![In-meeting-dialog view](../assets/images/apps-in-meetings/in-meeting-dialog.png)
-
-#### In-meeting actionable dialog for users
-
-![Dialog view](../assets/images/apps-in-meetings/in-meeting-dialog-view.png)
-
-### Post-meeting app experience
-
-![Post meeting view](../assets/images/apps-in-meetings/PostMeeting.png)
-
-Γ£ö The post-meeting app scenario is similar to the current post-meeting experience with the added benefit of having tabs that exist within the surface.
-
-Γ£ö Permissioned users can add apps from the tab gallery to a meeting using the **Details** tab on the Teams scheduling form and the meeting **Chat** tab in an existing meeting.
-
-Γ£ö Tab layout must be organized when there are more than ten polls or surveys.
-
-### Integrate bots into the meeting lifecycle
-
-For bot implementation, start with [build a bot](../build-your-first-app/build-bot.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-reference).
-
-### Integrate messaging extensions into the meeting lifecycle
-
-For messaging extension implementation, start with [build a messaging extension](../messaging-extensions/how-to/create-messaging-extension.md) and then continue with [create apps for Teams meetings](../apps-in-teams-meetings/create-apps-for-teams-meetings.md#meeting-apps-api-reference).
-
-## Participant roles and user types in a meeting
-
-![Participants in a meeting](../assets/images/apps-in-meetings/participant-roles.png)
-
-### Participant roles
-
-Default participant settings are determined by an organization's IT administrator. The following are the participant roles in a meeting:
-
-* **Organizer**: The organizer schedules a meeting, sets the meeting options, assigns meeting roles, and starts the meeting. Only users with a M365 account with a Teams license can be organizers and control attendee permissions. A meeting organizer can change the settings for a specific meeting. Organizers can make these changes on the **Meeting options** web page.
-* **Presenter**: Presenters have the same capabilities as organizer. However, a presenter cannot remove an organizer from the session or modify meeting options for the session. By default, participants joining a meeting have the presenter role.
-* **Attendee**: An attendee is a user who has been invited to attend a meeting but who is not authorized to act as a presenter. Attendees can interact with other meeting members but cannot manage any of the meeting settings or share content.
-
-Only an organizer or presenter can add, remove, or uninstall apps. Only organizer or presenter can create polls in a meeting.
-
-For more information, see [roles in a Teams meeting](https://support.microsoft.com/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
-
-You can access the **Meeting options** page as follows:
-
-* In Teams, go to **Calendar** ![calendar logo](../assets/images/apps-in-meetings/calendar-logo.png), select a meeting, and then **Meeting options**.
-
-* In a meeting invitation, select **Meeting options**.
-
-* During a meeting, select **Show participants** ![show participants icon](../assets/images/apps-in-meetings/show-participants.png) in the meeting controls. Then, above the list of participants, choose **Manage permissions**.
-
-### User types
-
-> [!NOTE]
-> Users with specific user types assigned to them can join meetings and assume one of the participant roles described in [participant roles](#participant-roles). The user type is not included in the **getParticipantRole** API.
-
-The following user types identify what each user can do and what they can access:
-
-* **In-tenant**: In-tenant users belong to the organization and have credentials in Azure Active Directory (AAD) for the tenant. They are usually full-time, onsite, or remote employees. An in-tenant user can be an organizer, presenter, or attendee.
-* **Guest**: A guest is a participant from another organization invited to access Teams or other resources in the organization's tenant. Guests are added to your organizationΓÇÖs AAD and have the same Teams capabilities as a native team member with access to team chats, meetings, and files. A guest user can be an organizer, presenter, or attendee. For more information, see [guest access in Teams](/microsoftteams/guest-access).
-* **Federated or external**: A federated user is an external Teams user in another organization who has been invited to join a meeting. These users have valid credentials with federated partners and are authorized by Teams. They do not have access to your teams or other shared resources from your organization. Guest access is a better option for external users to have access to teams and channels. For more information, see [manage external access in Teams](/microsoftteams/manage-external-access).
-* **Anonymous**: Anonymous users do not have an AAD identity and are not federated with a tenant. The anonymous participant is like an external user, but their identity is not projected in the meeting. An anonymous user cannot be an organizer but can be a presenter or an attendee.
-
-> [!NOTE]
-> Anonymous users inherit the global default user-level app permission policy. For more information, see [Manage Apps](/microsoftteams/non-standard-users#anonymous-user-in-meetings-access).
-
-The following table provides the user types and what features each user can access:
-
-| User type | Tabs | Bots | Messaging extensions | Adaptive Cards | Task modules | In-meeting dialog |
-| :-- | :-- | :-- | :-- | :-- | :-- | :-- |
-| Anonymous user | Not available | Not available | Not available | Interactions in the meeting chat are allowed. | Interactions in the meeting chat from an Adaptive Card are allowed. | Not available |
-| Guest that is part of the tenant AAD | Interaction is allowed. Creating, updating, and deleting are not allowed. | Not available | Not available | Interactions in the meeting chat are allowed. | Interactions in the meeting chat from an Adaptive Card are allowed. | Available |
-| Federated | Not available | Not available | Not available | Not available | Not available | Not available |
+The new Together Mode feature enables users to collaborate in a meeting with their team in one place without being separated by boxes.
## See also
The following table provides the user types and what features each user can acce
* [Bot](../bots/what-are-bots.md) * [Messaging extension](../messaging-extensions/what-are-messaging-extensions.md) * [Design your app](../apps-in-teams-meetings/design/designing-apps-in-meetings.md)
+* [Prerequisites and API references for apps in Teams meetings](create-apps-for-teams-meetings.md)
+* [Together Mode](~/apps-in-teams-meetings/teams-together-mode.md)
## Next step > [!div class="nextstepaction"]
-> [Build your app](create-apps-for-teams-meetings.md)
+> [Meeting app extensibility](meeting-app-extensibility.md)
platform Teams Together Mode https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/teams-together-mode.md
+
+ Title: Together Mode in Teams
+description: Work with Together Mode
+++
+# Together Mode in Teams
+
+> [!NOTE]
+> This feature is currently available in [public developer preview](../resources/dev-preview/developer-preview-intro.md) only.
+
+Microsoft Teams Together Mode provides an immersive and engaging meeting environment that brings people together and encourages them to turn on their video. It digitally combines participants into a single virtual scene and places their video streams in pre-determined seats designed and fixed by the scene creator.
+
+> [!VIDEO https://www.youtube-nocookie.com/embed/MGsNmYKgeTA]
+
+A scene in Together Mode is an artifact created by the scene developer using the Microsoft Scene studio. In a conceived scene setting, participants have designated seats with video streams rendered in those seats.
+
+> [!NOTE]
+> Scene only apps are recommended as the acquisition experience for such apps is more seamless.
+
+The following process gives an overview to create a scene only app:
++
+> [!NOTE]
+> * A scene only app is still an app in Microsoft Teams. The Scene studio handles the app package creation in the background.
+> * Multiple scenes in a single app package appear as a flat list of scenes to users.
+
+## Prerequisites
+
+You must have a basic understanding of the following to use Together Mode:
+
+* Definition of scene and seats in a scene.
+* Have a Microsoft Developer account and be familiar with the Microsoft Teams [Developer Portal](../concepts/build-and-test/teams-developer-portal.md) and App Studio.
+* [Concept of app sideloading](../concepts/deploy-and-publish/apps-upload.md).
+* Ensure that the Administrator has granted permission to **Upload a custom app** and to select all filters as part of App Setup and Meeting policies respectively.
+
+## Best practices
+
+Prior to building a scene, consider the following to have a seamless scene building experience:
+
+* Ensure that all images are in PNG format.
+* Ensure that the final package with all the images put together must not exceed 1920x1080 resolution.
+
+ > [!NOTE]
+ > The resolution is an even number. This is a requirement for scenes to be lit up successfully.
+
+* Ensure that the maximum scene size is 10 MB.
+* Ensure that the maximum size of each image is 5 MB.
+
+ > [!NOTE]
+ > * A scene is a collection of multiple images. The limit is for each individual image.
+ > * The individual image resolution must also be an even number.
+
+* Ensure that the **Transparent** checkbox is selected if the image is transparent. This checkbox is available on the right panel when an image is selected.
+
+ > [!NOTE]
+ > Overlapping images need to be marked as **Transparent** to indicate that they are overlapping images in the scene.
+
+## Build a scene using the Scene studio
+
+Microsoft has a Scene studio that allows you to build scenes. It is available on [Scenes Editor - Teams Developer Portal](https://dev.teams.microsoft.com/scenes).
+
+> [!NOTE]
+> This document is referring to Scene studio in the Microsoft Teams Developer Portal. The interface and functionalities are all the same in App Studio Scene Designer.
+
+A scene in the context of the Scene studio is an artifact that contains the following:
+
+* Seats reserved for meeting organizer and meeting presenters.
+
+ > [!NOTE]
+ > Presenter does not refer to the user who is actively sharing. It refers to the [meeting role](https://support.microsoft.com/en-us/office/roles-in-a-teams-meeting-c16fa7d0-1666-4dde-8686-0a0bfe16e019).
+
+* Seat and image for each participant with an adjustable width and height.
+
+ > [!NOTE]
+ > PNG is the only supported format.
+
+* XYZ coordinates of all the seats and images.
+* Collection of images that are camouflaged as one image.
+
+The seat dimensions become the canvas for rendering the participant video stream. The following image shows each seat represented as an avatar for building scenes:
+
+![Scene studio](../assets/images/apps-in-meetings/scene-design-studio.png)
+
+**To build a scene using the Scene studio**
+
+1. Go to [Scenes Editor - Teams Developer Portal](https://dev.teams.microsoft.com/scenes).
+
+ >[!NOTE]
+ > * To open Scene studio, you can navigate to the home page of [Teams Developer Portal](https://dev.teams.microsoft.com/home) and select **Create custom scenes for meetings**.
+ > * To open Scene studio, you can navigate to the home page of [Teams Developer Portal](https://dev.teams.microsoft.com/home), select **Tools** from the left hand section, and select **Scene studio** from the **Tools** section.
+
+1. In the **Scenes Editor** page, select **Create a new scene**.
+
+1. In the **Scene** box, enter a name for the scene.
+
+ >[!NOTE]
+ > * You can select **Close** to toggle between closing or reopening the right pane.
+ > * You can zoom in or zoom out of the scene using the zoom bar for a better view of the scene.
+
+1. Drag and drop the image into the environment as displayed in the following image:
+
+ >[!NOTE]
+ > * You can download the [SampleScene.zip](https://github.com/MicrosoftDocs/msteams-docs/tree/master/msteams-platform/apps-in-teams-meetings/SampleScene.zip) and [SampleApp.zip](https://github.com/MicrosoftDocs/msteams-docs/tree/master/msteams-platform/apps-in-teams-meetings/SampleApp.zip) files with the images.
+ > * Alternately, you can add background images to the scene using **Add images**.
+
+ ![Drag into the scene](../assets/images/apps-in-meetings/drag-and-drop-scene.png)
+
+1. Select the image that you have placed.
+
+1. From the right pane, select an alignment for the image or use the **Resize** slider to adjust the image size.
+
+ ![Alignment for images](../assets/images/apps-in-meetings/image-alignment.png)
+
+1. Select an area outside of the image.
+
+1. In the upper-right corner, select **Participants** under **Layers**.
+
+1. Select the number of participants for the scene from the **Number of participants** box, and select **Add**.
+
+ >[!NOTE]
+ > * After the scene is shipped, the avatar placements are replaced with actual participant's video streams.
+ > * You can drag the participant images around the scene and place them in the required position and resize them using the resize arrow.
+
+1. Select any participant image, and choose the **Assign Spot** check box to assign the spot to the participant.
+
+1. Select **Meeting Organizer** or **Presenter** role for the participant.
+
+ >[!NOTE]
+ > In a meeting, one participant must be assigned the role of a meeting organizer.
+
+ ![Assign spot](../assets/images/apps-in-meetings/assign-spot.png)
+
+1. Select **Save** and select **View in Teams** to quickly test your scene in Microsoft Teams.
+
+ >[!NOTE]
+ > To delete a scene you created, select **Delete scene** on the top bar.
+
+1. In the **View in Teams** dialog box, select **Preview in Teams**.
+1. In the dialog box that appears, select **Add**.
+
+ The scene can be tested or accessed by creating a test meeting and launching Together Mode. For more information, see [activate the Together Mode](#activate-the-together-mode).
+
+ ![Launch Together Mode](../assets/images/apps-in-meetings/launchtogethermode.png)
+
+ >[!NOTE]
+ > * Selecting **Preview** automatically creates a Microsoft Teams app that can be viewed in the **Apps** page in the Teams Developer Portal.
+ > * Selecting **Preview** automatically creates an app package that is appmanifest.json behind the scene. As stated earlier, this is abstracted, but you can access the automatically created app package by navigating to **Apps** from the menu.
+ > * The scene can then be viewed in the Together Mode scene gallery.
+
+1. Optionally, you can select **Share** from the **Save** drop-down menu to create a shareable link to easily distribute your scenes for others to use. Opening this link installs the scene for the user and they can start using it.
+
+1. After preview, the scene can be shipped as an app to Teams by following the steps for app submission.
+
+ >[!NOTE]
+ > This step requires the app package that is different from the scene package, for the scene that was designed. The app package created automatically can be found in the **Apps** section in the Teams Developer Center.
+
+1. Optionally, the scene package can be retrieved by selecting **Export** from the **Save** drop-down menu. A .zip file, that is the scene package, is downloaded.
+
+ ![Export a scene](../assets/images/apps-in-meetings/build-a-scene.png)
+
+ >[!NOTE]
+ > Scene package comprises of a scene.json and the PNG assets used to build a scene. The scene package can be reviewed for incorporating other changes as described in the Sample scene.json section of this document.
+
+A more complex scene that leverages the Z-axis is demonstrated in the step-by-step getting started sample.
+
+## Sample scene.json
+
+Scene.json along with the images indicate the exact position of the seats. A scene consists of bitmap images, sprites, and rectangles to put participant videos in. These sprites and participant boxes are defined in a world coordinate system with the X-axis pointing to the right and the Y-axis pointing downwards. Together mode supports zooming in on the current participants. This is helpful for small meetings in a large scene. A sprite is a static bitmap image positioned in the world. The Z value of the sprite determines the position of the sprite. Rendering starts with the sprite with lowest Z value, so higher Z value means it is closer to the camera. Each participant has its own video feed, which is segmented so that only the foreground is rendered.
+
+Following is the scene.json sample:
+
+```json
+{
+ "protocolVersion": "1.0",
+ "id": "A",
+ "autoZoom": true,
+ "mirrorParticipants ": true,
+ "extent":{
+ "left":0.0,
+ "top":0.0,
+ "width":16.0,
+ "height":9.0
+ },
+ "sprites":[
+ {
+ "filename":"background.png",
+ "cx":8.0,
+ "cy":4.5,
+ "width":16.0,
+ "height":9.0,
+ "zOrder":0.0,
+ "isAlpha":false
+ },
+ {
+ "filename":"table.png",
+ "cx":8.0,
+ "cy":7.0,
+ "width":12.0,
+ "height":4.0,
+ "zOrder":3.0,
+ "isAlpha":true
+ },
+ {
+ "filename":"row0.png",
+ "cx":12.0,
+ "cy":15.0,
+ "width":8.0,
+ "height":4.0,
+ "zOrder":2.0,
+ "isAlpha":true
+ }
+
+ ],
+ "participants":[
+ {
+ "cx":5.0,
+ "cy":4.0,
+ "width":4.0,
+ "height":2.25,
+ "zOrder":1.0,
+ "seatingOrder":0
+ },
+ {
+ "cx":11.0,
+ "cy":4.0,
+ "width":4.0,
+ "height":2.25,
+ "zOrder":1.0,
+ "seatingOrder":1
+ }
+ ]
+}
+```
+
+Each scene has a unique ID and name. The scene JSON also contains information on all the assets used for the scene. Each asset contains a filename, width, height, and position on the X and Y-axis. Similarly, each seat contains a seat ID, width, height, and position on the X and Y-axis. The seating order is generated automatically and can be altered as per preference.
+
+> [!NOTE]
+> Seating order number corresponds to the order of people joining the call.
+
+The zOrder represents the order of placing images and seats along the Z-axis. In many cases, it gives a sense of depth or partition if required. For more information, see the step-by-step getting started sample. The sample leverages the zOrder.
+
+Now that you have gone through the sample scene.json, you can activate the Together Mode to engage in scenes.
+
+## Activate the Together Mode
+
+Get end-to-end information of how an end user engages with scenes in Together Mode.
+
+**To choose scenes and activate the Together Mode**
+
+1. Create a new test meeting.
+
+ >[!NOTE]
+ > On selecting **Preview** in the Scene studio, the scene is installed as an app in Microsoft Teams. This is the model for a developer to test and try out scenes from the Scene studio. After a scene is shipped as an app, users see these scenes in the scene gallery.
+
+1. From the **Gallery** drop-down in the upper-left corner, select **Together Mode**. The **Picker** dialog box appears and the scene that is added is available.
+
+1. Select **Change scene** to change the default scene.
+
+1. From the **Scene Gallery**, select the scene you want to use for your meeting.
+
+1. Optionally, the meeting organizer and presenter can choose **Switch all participants to together mode** in the meeting.
+
+ >[!NOTE]
+ > At any point in time, only one scene can be used homogeneously for the meeting. If a presenter or organizer changes a scene, it changes for all. Switching in or out of Together Mode is up to individual participants, but while in Together Mode, all participants have the same scene.
+
+1. Select **Apply**. Teams installs the app for the user and applies the scene.
+
+## Open a Together Mode Scene Package
+
+You can share the Scene Package that is a .zip file retrieved from the Scene studio to other creators to further enhance the scene. The **Import a Scene** functionality can be leveraged. This tool helps unwrap a scene package to let the creator continue building the scene.
+
+![Scene zip file](../assets/images/apps-in-meetings/scene-zip-file.png)
+
+## See also
+
+[Apps for Teams meetings](teams-apps-in-meetings.md)
platform Build And Run https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-and-run.md
- Title: Get started - Build and run your first app-
-description: Quickly create a Microsoft Teams app that displays a "Hello, World!" message using the Microsoft Teams Toolkit.
- Previously updated : 03/22/2021--
-# Create your first Microsoft Teams app
-
-This quickstart teaches you to build and run Microsoft Teams app that displays "Hello, World!"
-
-## Prerequisites
-
-Before you begin, you need to [set up your Teams development tenant](#set-up-your-teams-development-tenant) and [install your Teams development tools](#install-your-development-tools).
-
-### Set up your Teams development tenant
-
-A **tenant** is like a container for an organization. In Teams terms, a tenant is where people from that org chat, share files, and run meetings. As a developer, you need a tenant to sideload and test the Teams apps that you are building.
-
-# [Do not have a tenant](#tab/do-not-have-a-tenant)
-
-You can get a free Teams test account, which includes a tenant that allows app sideloading, by joining the Microsoft 365 developer program. The registration process takes approximately two minutes.
-
-**To get a tenant**
-
-1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).
-1. Select **Join Now** and follow the onscreen instructions.
-1. In the Welcome screen, select **Set up E5 subscription**.
-1. Set up your Microsoft 365 developer account.
- After you finish, the following screen appears:
-
- :::image type="content" source="../assets/images/build-your-first-app/dev-program-subscription.png" alt-text="Example of what you see after signing up for the Microsoft 365 developer program.":::
-
-1. Sign in to Teams with your new account.
-1. In the Teams client, select **Apps**.
-1. Verify that you can see the **Upload a custom app** option. If you do, this means you can sideload apps.
-
- :::image type="content" source="../assets/images/build-your-first-app/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
-
-# [Have a tenant](#tab/have-a-tenant)
-
-If you already have a tenant, verify if you can sideload apps in Teams.
-
-**Verify that you can sideload your apps**
-
-1. In the Teams Client, select **Apps**.
-1. Verify that you can see the **Upload a custom app** option. If you do, this means you can sideload apps.
-
- :::image type="content" source="../assets/images/build-your-first-app/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
---
-### Install your development tools
-
-To build this app, you'll use the Teams Toolkit for Visual Studio Code to quickly get started. You can also build Teams apps with any of your preffered tools.
-
-> [!NOTE]
-> Teams displays app content only through HTTPS connections. To debug certain types of apps locally, such as a bot, you'll learn how to use ngrok to set up a secure tunnel between Teams and your app.
->
-> Production Teams apps are hosted in the cloud.
-
-**To install Microsoft Teams tools**
-
-1. Install [Node.js](https://nodejs.org/en/).
-1. If you plan to build a bot or messaging extension, install [ngrok](https://ngrok.com/download) and [expose your localhost to the Internet using ngrok](../tutorials/get-started-dotnet-app-studio.md#tunnel-using-ngrok).
-1. Install the latest version of [Visual Studio Code](https://code.visualstudio.com/download).
-
- > [!NOTE]
- > The toolkit does not support earlier versions of Visual Studio Code.
-
-1. In the left activity bar, select **Extensions** :::image type="icon" source="../assets/icons/vs-code-extensions.png":::.
-1. In **Microsoft Teams Toolkit**, select **Install**.
-
- :::image type="content" source="../assets/images/build-your-first-app/vsc-install-toolkit.png" alt-text="Illustration showing where in Visual Studio Code you can install the Microsoft Teams Toolkit extension.":::
-
-## 1. Create your app project
-
-1. Open Visual Studio Code.
-1. Select **Microsoft Teams Toolkit** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: > **Create a new Teams app**.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-02.png" alt-text="Screenshot showing how to create your app project with the Visual Studio Code Teams Toolkit.":::
-
-1. Sign in with your Microsoft 365 development account. Either the one you just created or the account you already had that allows app sideloading.
-1. On the **Select project** screen, go to **Personal app** and select **JS** (JavaScript) > **Next**.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-03.png" alt-text="Screenshot showing how to configure your app project with the Visual Studio Code Teams Toolkit.":::
-
-1. Enter a name for your Teams app.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-04.png" alt-text="Screenshot showing how to add a name to your app project with the Visual Studio Code Teams Toolkit.":::
-
-1. Select **Finish**.
- Your project is now configured.
-
-## 2. Understand your app project components
-
-After the toolkit configures your app project, you have the components to build your "Hello, World!" Teams app. The project's directories and files are located in the Visual Studio Code Explorer.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-05.png" alt-text="Screenshot showing the scaffolding in your app project with the Visual Studio Code Teams Toolkit.":::
-
-The toolkit automatically creates app scaffolding in the `src` directory based on the capabilities you added during setup.
-Since you created a tab during setup, the `App.js` file in the `src/components` directory handles the initialization and routing of your app. The file also calls the Microsoft Teams JavaScript client SDK to establish communication between your app and Teams.
-
-## 3. Build and run your app
-
-Build and run your app locally to save time.
-
-**To build and run your app**
-
-1. In Visual Studio Code, select **View** > **Terminal**.
-1. Run `npm install`.
-1. Run `npm start`.
-
- A **Compiled successfully!** message appears in the terminal. Your app is now running on your localhost at `https://localhost:3000`.
-
-## 4. Sideload your app in Teams
-
-Sideloading is the process of installing an app in Teams that hasn't been approved by your admin or Microsoft. Sideloading is common when testing and debugging Teams apps.
-
-By default, Teams doesn't allow app sideloading. You can change this setting in the Teams admin center.
-
-**To enable app sideloading in Teams**
-
-1. Sign in to the [Microsoft 365 admin center](https://admin.microsoft.com/Adminportal/Home?source=applauncher#/homepage#/) with your admin credentials.
-1. Select **Show All** > **Teams**.
-
- ![image of admin center menu](~/assets/images/prepare-test-tenant/admin-center.png)
-
- > [!Note]
- > It can take up to 24 hours for the **Teams** option to appear.
-
-1. Go to **Teams apps** > **Setup policies** > **Global** (Org-wide default).
-
- ![turn on sideload view](~/assets/images/prepare-test-tenant/turn-on-sideload.png)
-
-1. Turn on the **upload custom apps** toggle.
-
-1. Select **Save** to save the changes.
-
- Your test tenant now allows custom app sideloading.
-
- > [!Note]
- > Check for issues before sideloading your app using the validation feature in App Studio, which is included in the toolkit. Fix the errors to successfully sideload the app.
--
-### Sideload your app
-
-1. In Visual Studio Code, open the Teams Toolkit.
-1. Go to **App Studio**.
-1. Select **Test and Distribute** > **Install**.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-appstudio.png" alt-text="Screenshot showing how to sideload your app to Teams client with the Visual Studio Code Teams Toolkit.":::
-
-**Alternatively**
-
-1. Select the **F5** key to open browser window to install. This will skip the installation process in the **App Studio** and lauch Teams in your browser.
-1. In the installation dialog, select **Add** to install your app to Teams.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-install.png" alt-text="Screenshot showing how to sideload your app to Teams client.":::
-
- > [!Note]
- > App Studio is also available as a stand-alone app for Teams client.
-
-### Troubleshoot sideloading issues
-
-**Installation failed**
-
-If the `Manifest parsing has failed` error message appears while installing your app, verify that the app information is correctly entered.
-
-**To verify the app information**
-
-* In the Teams Toolkit, go to **App Studio** > **App details** and verify that all the required information is correctly entered.
-* If you manually edited the `manifest.json` file, verify that the JSON is well-defined in the **App Manifest** tool in App Studio.
-
-**Tab content not displayed**
-
-Verify that your app is running. If it isn't, go to the terminal and run `npm start`.
-
-## See also
-
-* [Prepare your Microsoft 365 tenant](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant)
-* [Choosing a setup to test and debug your Microsoft Teams app](../concepts/build-and-test/debug.md)
-* [Building tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md)
-* [Prepare for AppSource submission](../concepts/deploy-and-publish/appsource/prepare/submission-checklist.md)
-* [Quickly develop apps with App Studio for Microsoft Teams](../concepts/build-and-test/app-studio-overview.md)
-* [Build a channel tab](../build-your-first-app/build-channel-tab.md)
-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Build a personal tab for Microsoft Teams](../build-your-first-app/build-personal-tab.md)
platform Build Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-bot.md
- Title: Get started - Build a bot-
-description: Quickly create a Microsoft Teams bot using the Microsoft Teams Toolkit.
- Previously updated : 04/14/2020--
-# Create your first bot for Teams
-
-This tutorial teaches you to build a basic bot app. A bot acts as an intermediary between Teams users and your web app or service with a conversational interface. People can chat with a bot to quickly get information or initiate workflows and tasks performed by your service.
-
-## What you'll learn
-
-* Create an app project and bot using the Microsoft Teams Toolkit for Visual Studio Code.
-* Understand the Teams app configurations relevant to bots.
-* Host and run an app locally using a localhost tunneling solution.
-* Sideload and test a bot in Teams.
-
-## Prerequisites
-
-Ensure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
-
-## 1. Create your app project
-
-The Microsoft Teams Toolkit helps you set up the following components for your app:
-
-* **App configurations and scaffolding** relevant to bots.
-* **Bot** that's automatically registered with the Microsoft Azure Bot Service.
-
-**To create your app project**
-
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-01.png" alt-text="Screenshot showing how to create an app in the Teams Toolkit.":::
-
-1. When prompted, sign in with your Microsoft 365 development account.
-1. On the Select project screen, select Conversation bots:
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-02.png" alt-text="Screenshot showing how to create a new bot in the Teams Toolkit.":::
-
-1. On the **Configure project** screen, enter a name for your bot. This is the default name for your app and also the name of the app project directory on your local machine.
-1. Select **Create a new Bot** > **Create Bot Registration** as shown in the following image:
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-03.png" alt-text="Screenshot showing naming new bot in the Teams Toolkit.":::
-
- If successful, your new bot will have a **Registered** status. Now your bot is automatically registered with the Microsoft Azure Bot Service.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-04.png" alt-text="Screenshot showing registering new bot in the Teams Toolkit.":::
-
-1. Select **Finish** at the bottom of the screen and save your project on your machine.
-
-## 2. Understand your app project components
-
-Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Let's look at the main components for building a bot:
--
-If you created a tab in another tutorial, the app scaffolding for the bot is different. Unlike tabs, bot development doesn't require you to build any front-end web components or use the Teams JavaScript client SDK. Instead, the scaffolding uses the [Microsoft Bot Framework](https://dev.botframework.com/), which is an open-source SDK for building intelligent, enterprise-grade bots that can work on the web, mobile, and of course Teams!
-
-The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, is the Teams-specific handler that handles bot activities such as, how the bot responds to specific messages.
-
-## 3. Securely expose your localhost to the internet
-
-Take a look at the `index.js` file, which creates an HTTP server and handles routing to listen for incoming requests to your bot. The `/api/messages` is your app's endpoint URL to respond to client requests:
-
-```JavaScript
-server.post('/api/messages', (req, res) => {
- adapter.processActivity(req, res, async (context) => {
- await botActivityHandler.run(context);
- });
-});
-```
-
-To forward the requests to your bot's logic, you must set up a publicly accessible URL, such as `https://example.com/api/messages`, instead of `https://localhost`. Because your app is running from your localhost currently, you must *tunnel* the network.
-
-Tunneling is a protocol that allows you to transport data across a network. And localhost tunneling gives you a connection between your local machine and a remote connection. To securely expose your localhost to the internet, we recommend you to use the 3rd party tool called, **ngrok**. This will give you a secure URL.
-
-1. Go to the [ngrok.com](https://ngrok.com/download) site and follow the instruction to install and set up ngrok in your environment.
-
- Add the full path to the ngrok.exe file that you installed to the system PATH environment variable. The exact steps are specific to the shell that you are using.
-
-1. After you have finished setting it up, open a terminal and run `ngrok http -host-header=rewrite 3978`.
-
- Now ngrok provides you a public, secure URL that forwards to your localhost at port 3978, so copy the HTTPS URL, for example, `https://287a4f4223bc.ngrok.io` as shown in the screenshot below, since Teams requires HTTPS connections:
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-ngrok-06.png" alt-text="Screenshot showing tunnelling of localhost with ngrok.":::
-
-1. Register the URL in your app manifest.
-
-## 4. Register your bot endpoint
-
-To use a bot in Teams, you must register it with the Azure Bot Service. This is done automatically when you set up your app using the Teams Toolkit.
-
-You must still specify an endpoint address to receive and process user messages, or requests sent to the bot. Typically, the URL looks like `https://HOST_URL/api/messages`. You can configure this in the toolkit.
-
-1. In Visual Studio Code, open **Microsoft Teams Toolkit**.
-1. Select **Bots** > **Existing bot registrations** and select the bot you created during setup.
-1. In the **Bot endpoint address** field, enter the ngrok URL, for example, `https://287a4f4223bc.ngrok.io`, where you're hosting the bot and append `/api/messages` to it:
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-bots-07.png" alt-text="Screenshot showing how to tunnel localhost with ngrok.":::
-
- Your bot will be able to respond to messages in Teams, after you set up the endpoint correctly.
-
-## 5. Build and run your app
-
-You've set up a URL to host your bot and configured it to handle messages. It's time to get your app up and running.
-
-1. In a terminal, go to the root directory of your app project and run `npm install`.
-1. Run `npm start`.
-
- If successful, you see the following message indicating your bot is listening for activity at your `localhost`:
-
- `Bot/ME service listening at http://localhost:3978`
-
-## 6. Sideload your bot in Teams
-
-With your bot running, you can install it in Teams.
-
-> [!TIP]
-> If you haven't sideloaded a Teams app before and run into issues, follow these [instructions](../build-your-first-app/build-and-run.md#4-sideload-your-app-in-teams).
-
-1. In Visual Studio Code, select the **F5** key to launch a Teams web client.
-1. In the app install dialog, select **Add for me**.
-
- > [!Note]
- > By default, the app is added to your 1:1 direct chat message, however you can choose to install it to a team or chat by clicking the little arrow beside **Add for me**. In this tutorial, letΓÇÖs just click Add.
-
- :::image type="content" source="../assets/images/build-your-first-app/vscode-teams-toolkit-install-08.png" alt-text="Screenshot showing tunnelling localhost with ngrok.":::
-
-## 7. Test your bot
-
-Let's say "Hello" to your bot.
-
-* In the compose box, send a `Hello` message.
- Your bot replies with something like the following message:
-
- :::image type="content" source="../assets/images/build-your-first-app/teams-client-bot.png" alt-text="A screenshot showing a user say 'Hello' to a Teams bot and getting a response.":::
-
- You have now created a basic Teams bot that can communicate with users one-on-one or in group settings (channels and chats) 🎉.
-
-## Troubleshoot your bot
-
-The following information may help if you had issues completing this tutorial.
-
-### Bot isn't connected to Teams
--
-If you installed your app but the bot isn't working, make sure the bot is [connected to the Azure Bot Service's Teams *channel*](/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
-
-It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
-
-## See also
-
-* [Bot basics](../bots/bot-basics.md)
-* [Build a personal tab for Microsoft Teams](../build-your-first-app/build-personal-tab.md)
-* [See what else Teams bots can do with one of our samples](https://github.com/microsoft/BotBuilder-Samples#teams-samples)
-* [Bot conversation basics](../bots/how-to/conversations/conversation-basics.md)
-* [Design guidelines](../bots/design/bots.md)
-* [Production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md)
-* [Bot authentication in Teams](../bots/how-to/authentication/auth-flow-bot.md)
-* [Microsoft Bot Framework](https://dev.botframework.com/)
-* [Create a bot without the toolkit](../resources/bot-v3/bots-create.md)
-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Build a messaging extension](../build-your-first-app/build-messaging-extension.md)
platform Build Channel Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-channel-tab.md
- Title: Get started - Build a channel and group tab-
-description: Quickly create a Microsoft Teams channel and group tab using the Microsoft Teams Toolkit.
- Previously updated : 03/22/2020---
-# Build your first channel and group tab for Microsoft Teams
-
-This tutorial teaches you to build a basic *channel tab* also known as a *group tab*, which is a full-screen page for a team channel or chat. You can also configure some aspects of this kind of tab, for example, rename the tab so it's meaningful to their channel, which you cannot do in a Personal Tab.
-
-## What you'll learn
-
-* Create an app project using the Microsoft Teams Toolkit for Visual Studio Code.
-* Understand the app configurations and scaffolding relevant to channel tabs.
-* Create tab content and tab configuration.
-* Build and run your app in teams for testing.
-
-## Prerequisites
-
-Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
-
-## 1. Create your app project
-
-The Microsoft Teams Toolkit helps you to configure your app and set up the scaffolding relevant to channel and group tabs. It also contains a basic configuration page and content page that displays a "Hello, World!" message.
-
-**To create your app project**
-
-1. Go to Visual Studio Code and select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar.
-1. Sign in with your Microsoft 365 development account when prompted to do so.
-1. On the **Select project** screen, select **JS** (JavaScript) under **Channel and group app**.
-1. Enter a name for your Teams app.
-
- > [!NOTE]
- > This is the default name for your app and also the name of the app project directory on your local machine.
-
-1. Select **Group or Teams channel tab**.
-1. Select **Finish** at the bottom of the screen to configure your project and save your project on your local machine.
-
-## 2. Understand your app project components
-
-Much of the app configurations and scaffolding are set up automatically when you create your project with the toolkit. Let's look at the main components for building a channel tab.
-
-* **App configurations**: Open **App Studio** in the toolkit to view and update your app configurations.
-* **App scaffolding**: The app scaffolding provides the components needed for rendering your channel tab in Teams. There's a lot you can work with, however, for now let's focus on the following:
- * The files located in the `src/components` directory of your project:
- * `Tab.js` for rendering your tab's content page.
- * `TabConfig.js` for rendering your tab's configuration page.
- * Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.
-
-## 3. Customize your tab content page
-
-1. Copy and modify the following code sample with information that's relevant to your organization. You can also use the snippet as it is:
- ```JSX
- <div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
- </div>
- ```
-
-1. Go to the `src/components` directory and open the `Tab.js` file. Locate the `render()` function and paste your code inside `return()` as shown in the following example:
- ```JavaScript
- render() {
-
- let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";
-
- return (
- <div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
- </div>
- );
- }
- ```
-
-1. Go to the `src/components` directory and update the `App.css` file with the following code to make the email links easier to read in any theme that is used:
- ```CSS
- a {
- color: inherit;
- }
- ```
-
-## 4. Customize your tab configuration page
-
-Every tab in a channel or chat has a configuration page, a modal with at least one setup option that displays when users add your app. The configuration page by default asks users if they want to notify the channel or chat when the tab is installed. You can customize the configuration page by adding custom content.
-
-To add custom content, open `TabConfig.js` file from the `src/components` directory and update the placeholder content inside `return()` as shown in the following example:
-
- ```JavaScript
- return (
- <div>
- <h1>Add My Contoso Contacts</h1>
- <div>
- Select <b>Save</b> to add our organization's important contacts to this workspace.
- </div>
- </div>
- );
- ```
-
-> [!TIP]
-> Give a brief information about your app on this page since this would be the first time users are reading about it. You can also include custom configuration options or an [authentication workflow](../tabs/how-to/authentication/auth-aad-sso.md), which is common on tab configuration pages.
-
-## 5. Customize your tab name
-
-When you add a channel tab, the app name displays by default, for example, **first-app**. You can also provide a name that makes more sense in the context of group collaboration, for example, **Team Contacts**:
-
-1. Go to the `src/components` directory and open the `TabConfig.js` file.
-1. Add the `suggestedDisplayName` property with the tab name you want to display by default under `microsoftTeams.settings.setSettings` as shown in the following example:
-
- ```JavaScript
- microsoftTeams.settings.setSettings({
- "contentUrl": "https://localhost:3000/tab",
- "suggestedDisplayName": "Team Contacts"
- });
- ```
-
-## 6. Build and run your app
-
-This tutorial teaches you to build and run your app locally.
-
-1. Go to the root directory of your app project in Terminal.
-1. Run `npm install`.
-1. Run `npm start`.
-
-This information is also present in the `README` section of the toolkit.
-Your app is running on `https://localhost:3000` after the **Compiled successfully!** message appears in the terminal.
-
-## 7. Sideload your app in Teams
-
-Your app is ready to test in Teams. To do this, you must have an account that allows app sideloading.
-
-1. Open a Teams web client in Visual Studio Code with the **F5** key.
-1. Add (`localhost`) as trustworthy by following these steps to enable your app content to display in Teams:
-
- 1. Open a new tab in the same browser window (Google Chrome by default) which opened with the **F5** key.
- 1. Open `https://localhost:3000/tab` and proceed to the page.
-
-1. Select **Add to a team** or **Add to a chat** and locate a channel or chat you can use for testing from the modal in Teams.
-1. Select **Set up a tab**. The configuration page displays in a modal.
-
- :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content.png" alt-text="Screenshot of a channel tab configuration page.":::
-
-1. Select **Save** to configure the tab. The following content page appears:
-
- :::image type="content" source="../assets/images/tabs/channel-tab-tutorial-content-installed.png" alt-text="Screenshot of a channel tab with static content view.":::
-
-## See also
-
-* [Build and run your first Microsoft Teams app](../build-your-first-app/build-and-run.md)
-* [Teams JavaScript client SDK](/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
-* [Designing your tab for Microsoft Teams desktop and web](../tabs/design/tabs.md)
-* [Designing your Microsoft Teams app with UI templates](../concepts/design/design-teams-app-ui-templates.md)
-* [Tabs on mobile](../tabs/design/tabs-mobile.md)
-* [Single sign-on (SSO) support for tabs](../tabs/how-to/authentication/auth-aad-sso.md)
-* [Microsoft Teams API overview](/graph/teams-concept-overview)
-* [Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams](../tabs/quickstarts/create-personal-tab-node-yeoman.md)
-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Build a bot](../build-your-first-app/build-bot.md)
-
-> [!div class="nextstepaction"]
-> [Build a messaging extension](../build-your-first-app/build-messaging-extension.md)
platform Build First App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-first-app-overview.md
- Title: Get started - Build your first app overview and prerequisites-
-description: Learn how to get started with Microsoft Teams app development and set up your environment.
- Previously updated : 03/18/2021---
-# Get started with Microsoft Teams app development
-
-Build a simple app to learn the basics of Teams app development. Once you see "Hello, World!", try any of the other get started articles for more information on common tools, fundamental concepts, and advanced features.
---
-## What you'll learn
-
-* Get up and running quickly with the Teams Toolkit, a Visual Studio Code extension.
-* Configure your app with App Studio.
-* Get familiar with Teams developer tools and SDKs.
-* Consider important Teams app concepts, such as authentication and design best practices.
-
-You can build a Teams app using any technology of your choice, for example, command-line interface (CLI). But, these articles help you get started with the following recommended tools and technologies:
-
-* Teams Toolkit, a Visual Studio Code extension
-* React.js for tabs
-* Node.js for bots and messaging extensions
--
-## Teams app fundamentals
-
-You can build custom Teams apps for yourself, people in your org, or people all over the world. Before you begin, you should understand the following fundamental concepts about Teams app development:
-
-### Common app use cases
-
-Some typical scenarios that a custom Teams app can help with are:
-
-* Embed web-based content, such as a web app or part of a website, in the Teams client.
-* Look up information quickly in another system and adding it to a Teams conversation.
-* Trigger workflows and processes directly from what's said in a conversation.
-
-### App capabilities and tools
-
-An app is made up of one or more Teams capabilities and user interaction points. Your development toolset will vary depending on the capabilities you want.
-
-| **App capabilities**| **Interaction points** | **Recommended tools** | **SDKs** | **Technology stacks** |
-|--|--|--|--|--|
-| Tabs | Spaces where users can interact with embedded web content in personal and shared contexts. | VS Code with Teams Toolkit extension or Yeoman Generator | Teams JavaScript client SDK | General web technologies (HTML, CSS, and JavaScript) or React.js |
-| Bots | Chatbots that interact with users in personal and shared contexts. | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
-| Messaging extensions | Shortcuts for inserting app content or acting on a message without navigating away from the conversation. | VS Code with Teams Toolkit extension or Yeoman Generator | Bot Framework SDK | Node.js, C#, or Python |
-
-### Teams doesn't host your app
-
-When a user installs your app in Teams, they only install an app package that contains a configuration file (also known as an app manifest) and your appΓÇÖs icons. Your appΓÇÖs logic and data storage are hosted elsewhere, such as Azure Web Services or localhost during development. Teams accesses these resources via HTTPS.
--
-## Next step
-
-> [!div class="nextstepaction"]
-> [Build and run your first Teams app](../build-your-first-app/build-and-run.md)
platform Build Messaging Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-messaging-extension.md
- Title: Get started - Build a messaging extension-
-description: Quickly create a Microsoft Teams messaging extension using the Microsoft Teams Toolkit.
- Previously updated : 03/25/2021---
-# Build your first messaging extension for Microsoft Teams
-
-There are two types of Teams *messaging extensions*: [Search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) and [action commands](../messaging-extensions/how-to/action-commands/define-action-command.md).
-
-This tutorial teaches you to create a *search command* (also known as a *search-based messaging extension*), which is a shortcut for finding external content and sharing it in Teams. Users can access search commands from the Teams compose or command box.
-
-## What you'll learn
-
-* Create an app project and messaging extension bot using the Microsoft Teams Toolkit for Visual Studio Code.
-* Understand the app configurations and the scaffolding relevant to messaging extensions.
-* Host an app locally.
-* Configure the bot for your messaging extension.
-* Sideload and test a messaging extension in Teams.
-
-## Prerequisites
-
-Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
-
-## 1. Create your app project
-
-The Microsoft Teams Toolkit helps you set up the following components for your messaging extension:
-
-* **App configurations and scaffolding** relevant to messaging extensions.
-* **Bot** for your messaging extension that's automatically registered with the Microsoft Azure Bot Service.
-
-**To create your app project**
-
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Create a new Teams app**.
-1. When prompted, sign in with your Microsoft 365 development account.
-1. On the **Select project** screen, at **Messaging Extensions** > **Search**, click **JS (JavaScript)**.
-1. Enter a name for your Teams app. This is the default name for your app and also the name of the app project directory on your local machine.
-1. Select **Create a new Bot** then click **Create Bot Registration** button. If successful, your new bot will have a *Registered* status. Now your bot is automatically registered with the Microsoft Azure Bot Service.
-1. Select **Finish** at the bottom of the screen to configure your project and save your project on your local machine.
-
-## 2. Understand your app project components
-
-Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit.
-
-* App configurations: To view or update your messaging extension's configurations, select **App Studio** in the toolkit and go to **Messaging extensions**.
-* App scaffolding: The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, for handling how your messaging extension (or technically, the [messaging extension's bot](#4-configure-the-bot-for-your-messaging-extension)) responds to search queries in Teams.
-
-## 3. Set up a secure tunnel to your app
-
-For testing purposes, let's host your messaging extension on a local web server (port 3978). You are going to use [ngrok](https://ngrok.com/download) to set up a secure tunnel to localhost. See [build your first bot for Microsoft Teams](../build-your-first-app/build-bot.md#3-securely-expose-your-localhost-to-the-internet) for details.
-
-1. If you haven't already, install [ngrok](https://ngrok.com/download).
-1. In a terminal, run `ngrok http -host-header=rewrite 3978`.
-1. Copy the HTTPS URL in the output (for example, `https://468b9ab725e9.ngrok.io`) since Teams requires HTTPS connections.
-
- With this URL, Teams (which requires HTTPS connections) will be able tunnel to where you're hosting your app (`localhost` on port 3978).
-
-## 4. Configure the bot for your messaging extension
-
-Messaging extensions rely on bots to send and process user requests from Teams to your hosted service. The bot must be registered with the Azure Bot Service, which was done when you set up your app using the Teams Toolkit.
-
-You still must specify a bot endpoint URL to receive and process search queries in your messaging extension. Typically, the URL looks like `https://HOST_URL/api/messages`. You can configure this quickly in the toolkit.
-
-1. In Visual Studio Code, select **Microsoft Teams** :::image type="icon" source="../assets/icons/vsc-toolkit.png"::: on the left Activity Bar and choose **Open Microsoft Teams Toolkit**.
-1. Go to **Bots > Existing bot registrations** and select the bot you created during setup.
-1. In the **Bot endpoint address** field, enter the ngrok URL (for example, `https://468b9ab725e9.ngrok.io`) where you're hosting the bot and append `/api/messages` to it.
-
- Your bot will be able to handle queries in your messaging extension.
-
-## 5. Build and run your app
-
-You've set up a URL to host your messaging extension and configured it to handle searches. It's time to get your app up and running.
-
-1. Open terminal and go to the root directory of your app project.
-1. Run `npm install`.
-1. Run `npm start`.
-
- If successful, you see the following message indicating your messaging extension service is listening for activity at your `localhost`:
-
- `Bot/ME service listening at http://localhost:3978`
-
-## 6. Sideload your messaging extension in Teams
-
-With your messaging extension running, you can install it in Teams.
-
-> [!TIP]
-> If you haven't sideloaded a Teams app before and run into issues, follow these [instructions](../build-your-first-app/build-and-run.md#4-sideload-your-app-in-teams).
-
-1. In Visual Studio Code, select the **F5** key to launch a Teams web client.
-1. In the app install dialog, select **Add for me**.
-
-## 7. Test your messaging extension
-
-Learn how messaging extensions work in a Teams chat.
-
-1. Start a new chat. In the compose box, select **More** :::image type="icon" source="../assets/icons/teams-client-more.png"::: and select the messaging extension app you just sideloaded.
-1. Try searching for something (for example, **Tickets**). If your app is working, you'll see sample search results (you can add your own later).
-
- :::image type="content" source="../assets/images/build-your-first-app/me-teams-test.png" alt-text="A screenshot showing how a search-based messaging extension is used in the Teams compose box.":::
-
-## Troubleshooting
-
-The following information may help if you had issues completing this tutorial.
-
-**Bot isn't connected to Teams**
-
-If you installed your app but it isn't working, make sure the messaging extension's bot is [connected to the Azure Bot Service's Teams *channel*](/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0&preserve-view=true).
-
-It's important to understand that this isn't the same as a channel in Teams. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another [supported Microsoft or third-party communications app](/azure/bot-service/bot-service-channels-reference?view=azure-bot-service-4.0&preserve-view=true).
-
-## See also
-
-* [Teams compose or command box](../messaging-extensions/what-are-messaging-extensions.md)
-* [Include a link unfurling feature](../messaging-extensions/how-to/link-unfurling.md)
-* [Design guidelines](../messaging-extensions/design/messaging-extension-design.md)
-* [Production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md)
-* [Add authentication](../messaging-extensions/how-to/add-authentication.md)
-* [Create an action-based messaging extension](../messaging-extensions/how-to/action-commands/define-action-command.md)
-* [Microsoft Bot Framework](https://dev.botframework.com/)
-
-## Next steps
-
-> [!div class="nextstepaction"]
-> [Define search commands](../messaging-extensions/how-to/search-commands/define-search-command.md)
-
-> [!div class="nextstepaction"]
-> [Respond to users' searches](../messaging-extensions/how-to/search-commands/respond-to-search.md)
platform Build Personal Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-personal-tab.md
- Title: Get started - Build a personal tab-
-description: Quickly create a Microsoft Teams personal tab using the Microsoft Teams Toolkit.
- Previously updated : 03/16/2020--
-# Build a basic personal tab for Microsoft Teams
-
-This tutorial teaches you to build a basic personal tab in Microsoft Teams. Tabs are a simple way to surface information in your app by hosting web content in Teams. Tabs are a common feature of personal apps that provide a private workspace for individual users. Personal tabs are the closest thing to a traditional web experience in Teams.
-
-## What you'll learn
-
-* Understand the app configurations and scaffolding relevant to personal tabs.
-* Create a tab content with a contact list of your organization.
-* Update a tab's color theme based on user preference.
-
-## Prerequisites
-
-Make sure that you understand how to set up and build a simple Teams app. For more information, see [create your first Microsoft Teams "Hello, World!" app](../build-your-first-app/build-and-run.md).
-
-## 1. Understand your app project components
-
-After you have created a basic personal tab, the generated app scaffold provides the components for rendering your personal tab in Teams. There's a lot you can work with, but for now let us focus on the following:
-
-* `Tab.js` file in the `src/components` directory of your project. This is for rendering your tab content page.
-* Microsoft Teams JavaScript client SDK, which is pre-loaded in your project's front-end components.
-
-As you may notice from the `import` section at the top of `Tabs.js` file, the sample code uses [React](https://reactjs.org/), an open-source JavaScript library for building user-interface.
-
-> [!NOTE]
-> Although using React is _not_ required for Teams development, this tutorial teaches you with React.
-
-## 2. Customize your tab content page
-
-You can customize your tab content page to render a list of important contacts in your organization.
-
-**To customize your tab content page**
-
-1. Copy and modify the following code sample with information that's relevant to you. You can also use the code as is:
- ```JSX
- <div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
- </div>
- ```
-1. Got to the `src/components` directory and open the `Tab.js` file.
-1. Go to `render()` and replace the template code with the modified code inside `return()` as shown in the following example:
- ```JavaScript
- render() {
- return (
- <div>
- <h1>Important Contacts</h1>
- <ul>
- <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
- <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
- <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
- </ul>
- </div>
- );
- }
- ```
-1. Go to the `src/components` directory and modify the `App.css` file with the following code to make the email links easier to read with any theme that is used:
- ```CSS
- a {
- color: inherit;
- }
- ```
-1. Save your changes.
-
- You can view the new content in your app's tab in Teams.
-
- :::image type="content" source="../assets/images/build-your-first-app/personal-tab-tutorial-content.png" alt-text="Screenshot of a personal tab with static content.":::
-
-## 3. Update your tab theme
-
-It is important for your tab to have a theme that feels native to Teams. You must blend your tab with the Teams theme. Your users generally prefer default (light), dark, or high contrast themes. As you might have noticed in the last screenshot, your tab still has a light background when your user is using the dark theme. This is not a recommended user experience.
-
-The Teams JavaScript client SDK can make your app aware of and react to theme changes in the client. To do this, follow these steps:
-
-1. **Get context about the configured Teams client theme**
- The `microsoftTeams.getContext()` call in your `Tab.js` file, provides some context about the configured client theme (such as dark theme). The following code accesses the `context` interface and its properties:
-
- ```JavaScript
- componentDidMount(){
- // Get the user context from Teams and set it in the state
- microsoftTeams.getContext((context, error) => {
- this.setState({
- context: context,
- theme: context.theme
- });
- });
- }
- ```
-1. **Create a theme change handler**
- With the `context` properties in hand, your app has a solid understanding of what's happening around it in Teams. However, the app still doesn't have an appearance reflecting the theme when a user updates it.
-
- You need a handler to update your app's state with the theme. To create a handler, insert the following theme change handler immediately after the `microsoftTeams.getContext()` call:
-
- ```JavaScript
- microsoftTeams.registerOnThemeChangeHandler(theme => {
- if (theme !== this.state.context.theme) {
- this.setState({
- context: {
- ...this.state.context,
- theme
- }
- })
- }
- });
- ```
-1. **Match the theme styles**
- Your theme change handler is in place, however, you still have to respond to changes and align your tab's colors with the current theme.
-
- In the `render()` function, store the state provided by the theme change handler in `isTheme`:
-
- ```JavaScript
- const isTheme = this.state.context.theme
- ```
-
- > [!NOTE]
- > This example is just one way you might apply styles to your tab. Use the code as is, expand on it, or write your own.
-
- After storing the state provided by the theme change handler, provide the conditional logic to render your tab's styles based on the current theme. The following example shows a basic way to do this:
-
- 1. Go to `render()` and check the current theme in `isTheme`.
- 1. Create a `newTheme` object with CSS properties relevant to the current theme.
- 1. Apply the following CSS to your tab content's root HTML element (`<div style={newTheme}>`):
-
- ```JavaScript
- let newTheme
- if (isTheme === "default") {
- newTheme = {
- backgroundColor: "#EEF1F5",
- color: "#16233A"
- };
- } else {
- newTheme = {
- backgroundColor: "#2B2B30",
- color: "#FFFFFF"
- };
- }
- ```
-
- Check your tab in Teams. The appearance now closely matches the dark theme.
-
- :::image type="content" source="../assets/images/build-your-first-app/personal-tab-tutorial-updated-theme.png" alt-text="Screenshot of a personal tab with static content view.":::
-
-## See also
-
-* [Teams JavaScript client SDK](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
-* [Designing your tab for Microsoft Teams desktop and web](../tabs/design/tabs.md)
-* [Context interface](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true)
-* [Designing your Microsoft Teams app with UI templates](../concepts/design/design-teams-app-ui-templates.md)
-* [Tabs on mobile](../tabs/design/tabs-mobile.md)
-* [Single sign-on (SSO) support for tabs](../tabs/how-to/authentication/auth-aad-sso.md)
-* [Microsoft Teams API overview](https://docs.microsoft.com/graph/teams-concept-overview)
-* [Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams](../tabs/quickstarts/create-personal-tab-node-yeoman.md)
-
-## Next step
-
-> [!div class="nextstepaction"]
-> [Build a channel tab](../build-your-first-app/build-channel-tab.md)
platform App Studio Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/app-studio-overview.md
App Studio makes it easy to start creating or integrating your own Microsoft Teams apps, whether you develop custom apps for your enterprise or SaaS applications for teams around the world by streamlining the creation of the manifest and package for your app and providing useful tools like the Card Editor and a React control library.
+> [!IMPORTANT]
+> App Studio is currently not available in the following types of Teams orgs:
+>
+> * Government Community Cloud (GCC)
+> * GCC High
+> * DoD
+ ## Installing App Studio App Studio is a Teams app which can be found in the Teams store. Follow this link for direct download [App Studio](https://aka.ms/InstallTeamsAppStudio). You can also find the app in the app store.
platform Teams Developer Portal https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/teams-developer-portal.md
On the **Overview** page, you can see the total number of active users for your
| :--| :| | *Monthly R30* | The default usage metric. It shows you the count of unique active users that used your app within that rolling 30-day window in UTC. | | *Daily* | Shows you the count of unique active users that used your app in a given day in UTC. |
-| *History* | Monthly and daily usage is shown for the past seven, 30 days, and 60 days. |
-| *Latency* | You should see usage reflected for a given day within 24-48 hours. Usage for new apps can take up to 3-5 days to display.|
+
+Monthly and daily usage is shown for the past seven, 30 days, and 60 days. You should see usage reflected for a given day within 24-48 hours. Usage for new apps can take up to 3-5 days to display.
## Use tools to create app features
platform Qr Barcode Scanner Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/qr-barcode-scanner-capability.md
This document guides you on how to integrate the QR or barcode scanner capabilit
Barcode is a method of representing data in a visual and machine-readable form. The barcode contains information about a product, such as a type, size, manufacturer, and Country of origin in the form of bars and spaces. The code is read using the optical scanner on your native device camera. For a richer collaborative experience, you can integrate the QR or barcode scanner capability provided in the Teams platform 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 `scanBarCode` API to integrate the scanner capability within your 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 [scanBarCode](/javascript/api/@microsoft/teams-js/microsoftteams.media?view=msteams-client-js-latest&preserve-view=true#scanBarCode__error__SdkError__decodedText__string_____void__BarCodeConfig_) API to integrate the scanner capability within your app.
## Advantage of integrating QR or barcode scanner capability
Following are the advantages of integration of QR or barcode scanner capabilitie
* The integration allows web app developers on Teams platform to leverage QR or barcode scanning functionality with Teams JavaScript client SDK. * With this feature, the user only needs to align a QR or barcode within a frame at the center of the scanner UI and the code gets scanned automatically. The stored data is shared back with the calling web app. This avoids the inconvenience and human-errors of entering lengthy product codes or other relevant information manually.
-To integrate QR or barcode scanner capability, you must update the app manifest file and call the `scanBarCode` API. For effective integration, you must have a good understanding of [code snippet](#code-snippet) for calling the `scanBarCode` API, which allows you to use native QR or barcode scanner capability. The API gives an error for an unsupported barcode standard.
+To integrate QR or barcode scanner capability, you must update the app manifest file and call the [scanBarCode](/javascript/api/@microsoft/teams-js/microsoftteams.media?view=msteams-client-js-latest&preserve-view=true#scanBarCode__error__SdkError__decodedText__string_____void__BarCodeConfig_) API. For effective integration, you must have a good understanding of [code snippet](#code-snippet) for calling the [scanBarCode](/javascript/api/@microsoft/teams-js/microsoftteams.media?view=msteams-client-js-latest&preserve-view=true#scanBarCode__error__SdkError__decodedText__string_____void__BarCodeConfig_) API, which allows you to use native QR or barcode scanner capability. The API gives an error for an unsupported barcode standard.
It is important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app. > [!NOTE]
Update your Teams app [manifest.json](../../resources/schem#
## ScanBarCode API
-The `ScanBarCode` API invokes scanner control that enables the user to scan different types of barcode, and returns the result as a string.
+The [scanBarCode](/javascript/api/@microsoft/teams-js/microsoftteams.media?view=msteams-client-js-latest&preserve-view=true#scanBarCode__error__SdkError__decodedText__string_____void__BarCodeConfig_) API invokes scanner control that enables the user to scan different types of barcode, and returns the result as a string.
-To customize the barcode scanning experience, optional barcode configuration is passed as input to `ScanBarCode` API. You can specify the scan time-out interval in seconds using `timeOutIntervalInSec`. Its default value is 30 seconds and the maximum value is 60 seconds.
+To customize the barcode scanning experience, optional [barcode configuration](/javascript/api/@microsoft/teams-js/microsoftteams.media.barcodeconfig?view=msteams-client-js-latest&preserve-view=true) is passed as input to [scanBarCode](/javascript/api/@microsoft/teams-js/microsoftteams.media?view=msteams-client-js-latest&preserve-view=true#scanBarCode__error__SdkError__decodedText__string_____void__BarCodeConfig_) API. You can specify the scan time-out interval in seconds using `timeOutIntervalInSec`. Its default value is 30 seconds and the maximum value is 60 seconds.
The **scanBarCode()** API supports the following barcode types:
platform First App Blazor https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-blazor.md
+
+ Title: Get started - Build your first Teams app with Blazor
+
+description: Quickly create a Microsoft Teams app that displays a "Hello, World!" message using the Microsoft Teams Toolkit and .NET Blazor.
+ Last updated : 04/27/2021+++
+# Build and run your first Microsoft Teams app with Blazor
+
+In this tutorial, you will create a new Microsoft Teams app in .NET/Blazor that implements a simple personal app to pull information from the Microsoft Graph. (A *personal app* includes a set of tabs scoped for individual use.) During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
+
+The app that is built displays basic user information for the current user. When permission is granted, the app will connect to the Microsoft Graph as the current user to get the complete profile.
+
+## Before you begin
+
+Make sure your development environment is set up by installing the [prerequisites](prerequisites.md)
+
+> [!div class="nextstepaction"]
+> [Install prerequisites](prerequisites.md)
+
+## Create your project
+
+Use the Teams Toolkit to create your first project:
+
+# [Visual Studio 2019](#tab/vs)
+
+1. Open Visual Studio 2019.
+
+1. Select **Create a new project**.
+
+1. Select **Microsoft Teams App**, then press **Next**. To help you find the template, use the project type **Microsoft Teams**.
+
+1. Give the project and solution a good name, then press **Next**.
+
+1. Provide the application name and company name, then press **Create**. The application name and company name are displayed to your end users.
+
+1. Your Teams app will be created within a few seconds. Once the project is created, set up single sign-on with M365:
+
+ - Select **Project** > **TeamsFx** > **Configure for SSO...**.
+ - When prompted, sign in to your M365 administrator account.
+
+# [Command line](#tab/cli)
+
+1. Open a Terminal and select the directory where you wish to create the project.
+
+1. Run `dotnet new -i` to install the template from NuGet:
+
+ ``` bash
+ dotnet new -i Microsoft.TeamsApp.Blazor
+ ```
+
+ You only need to do this the first time or when updating the template.
+
+1. Create a directory:
+
+ ``` bash
+ mkdir helloworld
+ ```
+
+1. Run `dotnet new` to create a new project:
+
+ ``` bash
+ dotnet new teamsapp --shortName my-teams-app --companyName "My Company"
+ ```
+
+1. Once scaffolded, configure the project for Teams deployment:
+
+ ``` bash
+ teamsfx init
+ ```
+
+You can now open the solution in Visual Studio for debugging.
+++
+## Take a tour of the source code
+
+If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
+
+Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Solution Explorer area of Visual Studio 2019.
++
+- The app icons are stored as PNG files in `color.png` and `outline.png`.
+- The app manifest for publishing through the Developer Portal for Teams is stored in `Properties/manifest.json`.
+- A backend controller is provided in `Controllers/BackendController.cs` for assisting with authentication.
+
+Since you created a tab app during setup, the Teams Toolkit scaffolds all the necessary code for a basic tab as a [Blazor Server](/aspnet/core/blazor).
+
+- `Pages/Tab.razor` is the front-end application's entry point.
+- `TeamsFx.cs` and `JS/src/index.js` is used for initializing communications with the Teams host.
+
+You can add backend functionality by adding additional ASP.NET Core controllers to your application.
+
+## Run your app locally
+
+Teams Toolkit allows you to run your app locally. This consists of several parts that are necessary to provide the correct infrastructure that Teams expects:
+
+- An application is registered with Azure Active Directory. This application has permissions associated with the location that the app is loaded from and any backend resources it accesses.
+- A web API is hosted (via IIS Express) to assist with authentication tasks, acting as a proxy between the app and Azure Active Directory.
+- An app manifest is generated and exists in the Developer Portal for Teams. Teams uses the app manifest to tell connected clients where to load the app from.
+
+Once this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
+
+To build and run your app locally:
+
+1. From Visual Studio Code, press **F5** to run your application in debug mode.
+
+1. If requested, install the self-signed SSL certificate for local debugging.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
+
+1. Teams will be loaded in a web browser, and you will be prompted to sign in. If prompted to open Microsoft Teams, select Cancel to remain within the browser. Sign in with your M365 account.
+1. When prompted to install the app onto Teams, press **Add**.
+
+Your app will now be displayed:
++
+You can do normal debugging activities as if this were any other web application (such as setting breakpoints). The app supports hot reloading. If you change any file within the project, the page will be reloaded.
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn what happens when you run your app locally in the debugger.</summary>
+
+When you pressed F5, the Teams Toolkit:
+
+1. Registered your application with Azure Active Directory.
+1. Registered your application for "side loading" in Microsoft Teams.
+1. Started your application backend running locally.
+1. Started your application front-end hosted locally.
+1. Started Microsoft Teams in a web browser with a command to instruct Teams to side load the application (the URL is registered inside the application manifest).
+
+</details>
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn how to troubleshoot common issues when running your app locally.</summary>
+
+To successfully run your app in Teams, you must have a Microsoft 365 development account that allows app side loading. For more information on account opening, see [Prerequisites](prerequisites.md#enable-sideloading).
+
+</details>
+
+## Deploy your app to Azure
+
+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning), then the code that makes up your app is copied into the created cloud resources.
+
+> **PREVIEW**
+>
+> Support for Blazor apps is new in Teams Toolkit. Provisioning and deployment are done with a combination of Visual Studio 2019 and the Developer Portal for Teams.
+
+## Provision and deploy your app to Azure App Service
+
+1. In Solution Explorer, right-click the project node and choose **Publish** (or use the **Build** > **Publish** menu item).
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish1.png" alt-text="Select the Publish operation on the project":::
+
+1. In the **Publish** window, select **Azure**. Press **Next**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish2.png" alt-text="Select Azure as the publishing target":::
+
+1. Select **Azure App Service (Windows)**. Press **Next**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish3.png" alt-text="Select Azure App Service as the publishing target":::
+
+1. Select **+** to create a new App Service instance.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish4.png" alt-text="Create a new instance.":::
+
+1. In the **Create App Service (Windows)** dialog, the **Name**, **Subscription name**, **Resource Group**, and **Hosting Plan** entry fields are populated. If you have already got an App Service running, existing settings will be selected. You can opt to create a new resource group and hosting plan (Recommended). When ready, select **Create**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish5.png" alt-text="Select hosting plan and subscription":::
+
+1. In the **Publish** dialog, the newly created instance has been automatically selected. When ready, select **Finish**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish6.png" alt-text="Select the new instance.":::
+
+1. Press the **Edit** (pencil) icon next to **Deployment Mode**, then select **Self-contained**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish8.png" alt-text="Select self-contained deployment mode.":::
+
+1. Select **Publish**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/blazor-vs2019-publish7.png" alt-text="Publish your app to app service":::
+
+Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser. Add `/tab` to the end of the URL to see your page.
+
+The project properties **Publish** pane shows the site URL and other details. Make a note of the site URL.
+
+## Create an environment for your app
+
+The Developer Portal for Teams manages where the tabs for your app are loaded from with an **Environment**. To create an environment:
+
+1. Open the [Developer Portal for Teams](https://dev.teams.microsoft.com). Sign in with your M365 administrative account.
+
+1. From the sidebar, select **Apps**.
+
+1. If you only have one app, it will be automatically selected. If not, select your app from the list.
+
+1. Select **Environments**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments1.png" alt-text="Select environments":::
+
+1. Select **Create your first environment**.
+
+1. Enter a name for your environment, then press **Add**; for example _Production_.
+
+1. With the newly created environment selected, press **Create your first environment variable**.
+
+1. Enter `azure_app_url` for the **Name**. Enter your Azure site URL (without the `https://`) as the **Value**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments2.png" alt-text="Create environment variable":::
+
+ Press **Add**.
+
+## Update the app manifest
+
+The app manifest is loading the tab from a `localhost` URL. In this section, you will adjust the app manifest to load the tab from the URL listed within the environment you just created.
+
+1. From the sidebar, select **Basic information**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments3.png" alt-text="Select basic information":::
+
+1. There are several places within the manifest that list a `locahost:XXXXX` as part of a URL. Replace all occurrences with `{{azure_app_url}}` (including the curly braces).
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments4.png" alt-text="Adjust basic information for the environment":::
+
+1. When complete, press **Save**.
+
+1. From the sidebar, select **Capabilities**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments5.png" alt-text="Select capabilities":::
+
+1. Select **Personal Tab**.
+1. Next to the **Personal Tab**, select the triple dots, then select **Edit**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments6.png" alt-text="Edit personal tab settings":::
+
+1. Replace the URL with the environment variable within the **Content Url** and **Website Url** fields.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments7.png" alt-text="Edit personal tab URLs":::
+
+1. Press **Update**.
+
+1. Press **Save**.
+
+1. From the sidebar, select **Single Sign-On**.
+
+1. Replace the `localhost` within the **Application ID URI** with `{{azure_app_url}}`.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments8.png" alt-text="Edit single sign-on Application ID URI":::
+
+1. Press **Save**.
+
+1. From the sidebar, press **Domains**.
+
+1. Press **Add a domain**.
+
+1. If `{{azure_app_url}}` is not listed as a valid domain, add it as a valid domain, then press **Add**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/devcenter-environments9.png" alt-text="Add a domain":::
+
+You can now use the **Preview in Teams** button at the top of the page to launch your app within Teams.
+
+## Next steps
+
+Learn about other methods for creating Teams apps:
+
+- [Create a Teams app with React](first-app-react.md)
+- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)
+- [Create a conversational bot app](first-app-bot.md)
+- [Create a messaging extension](first-message-extension.md)
platform First App Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-bot.md
+
+ Title: Get started - Build your first conversational bot
+
+description: Create a conversational bot for Microsoft Teams using the Teams Toolkit.
+ Last updated : 05/20/2021+++
+# Build your first conversational bot for Microsoft Teams
+
+A bot acts as an intermediary between a Teams user and a web service. Users can chat with a bot to quickly get information, initiate workflows, or anything else your web service can do. In this tutorial, you will learn how to build, run, and deploy a Teams bot app.
+
+## Before you begin
+
+Make sure your development environment is set up by installing the [Prerequisites](prerequisites.md)
+
+> [!div class="nextstepaction"]
+> [Install Prerequisites](prerequisites.md)
+
+## Create your project
+
+Use the Teams Toolkit to create your first project:
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio code.
+1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
+
+1. Select **Create New Project**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Location of the Create New Project link in the Teams Toolkit sidebar.":::
+
+1. Select **Create a new Teams app**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
+
+1. On the **Select capabilities** step, select **Bot** and deselect **Tab**. Press **OK**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities-bot.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
+
+1. On the **Bot registration** step, select **Create a new bot registration**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-bot-registration.png" alt-text="Select create a new bot registration":::
+
+1. On the **Programming Language** step, select **JavaScript**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
+
+1. Select a workspace folder. A folder will be created within your workspace folder for the project you are creating.
+
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+
+Your Teams app will be created within a few seconds.
+
+# [Command line](#tab/cli)
+
+Use the `teamsfx` CLI to create your first project. Start from the folder where you want to create the project folder.
+
+``` bash
+teamsfx new
+```
+
+The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**.
+
+1. Select **Create a new Teams app**.
+1. Select the **Bot** capability and deselect the **Tab** capability.
+1. Select **Create a new bot registration**.
+1. Select **JavaScript** as the programming language.
+1. Press **Enter** to select the default workspace folder.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
+
+Once all the questions have been answered, your project will be created.
+++
+## Take a tour of the source code
+
+If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
+
+A messaging extension uses the [Bot Framework](https://docs.botframework.com) to allow the user to interact with your service via a conversation. After scaffolding, your project will look like this:
++
+The bot code is stored in the `bot` directory. The `bots/teamsBot.js` is the main entry point for the bot, and the dialogs are stored in the `dialogs` directory.
+
+> [!Tip]
+> Familiarize yourself with bots outside of Teams before you integrate your first bot within Teams. You can find more information about bots by reviewing the [Azure Bot Service](/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&preserve-view=true) tutorials.
+
+## Run your app locally
+
+Teams Toolkit allows you to host your app locally. To do this:
+
+- An Azure Active Directory Application is registered within the M365 tenant.
+- An app manifest is submitted to the Developer Center for Teams.
+- An API is run locally using Azure Functions Core Tools to support your app.
+- [ngrok](https://ngrok.io) is installed and used to provide a tunnel between Teams and your bot code.
+
+To build and run your app locally:
+
+1. From Visual Studio Code, press **F5** to run your application in debug mode.
+
+ > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
+
+1. Your web browser is started to run the application. If prompted to open Microsoft Teams, select Cancel to remain within the browser. When prompted, select **Use the web app instead**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/launch-web-browser-and-pick-webapp.png" alt-text="Screenshot showing how to pick the web version of teams when launched":::
+
+1. You may be prompted to sign in. If so, sign in with your M365 account.
+1. When prompted to install the app onto Teams, press **Add**.
+
+Once the app is loaded, you will be taken directly to a chat session with the bot. You can type `intro` to show an introduction card, and `show` to show your details from Microsoft Graph. (This will require an additional permissions approval).
+
+Debugging works as you normally would expect - try it yourself! Open the `bot/dialogs/rootDialog.js` file and locate the `triggerCommand(...)` method. Set a breakpoint on the default case. Then type some text.
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn what happens when you run your app locally in the debugger.</summary>
+
+When you pressed F5, the Teams Toolkit:
+
+1. Registered your application with Azure Active Directory.
+1. Registered your application for "side loading" in Microsoft Teams.
+1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+1. Started an ngrok tunnel so Teams can communicate with your app.
+1. Started Microsoft Teams with a command to instruct Teams to sideload the application.
+
+</details>
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn how to troubleshoot common issues when running your app locally.</summary>
+
+To successfully run your app in Teams, you must have a Microsoft 365 development account that allows app sideloading. For more information on account opening, see [Prerequisites](prerequisites.md#enable-sideloading).
+
+> [!TIP]
+> Check for issues before sideloading your app, using the [app validation tool](https://dev.teams.microsoft.com/appvalidation.html), which is included in the toolkit. Fix the errors to successfully sideload the app.
+</details>
++
+<!-- markdownlint-disable MD033 -->
+
+<details>
+<summary>Learn what happens when you deployed your app to Azure</summary>
+
+Before deployment, the application has been running locally:
+
+1. The backend runs using _Azure Functions Core Tools_.
+1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
+
+Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure. The backend uses a variety of Azure services, including Azure App Service and Azure Bot Service.
+
+</details>
+
+## Next steps
+
+Learn about other methods for creating Teams apps:
+
+- [Create a Teams app with React](first-app-react.md)
+- [Create a Teams app with Blazor](first-app-blazor.md)
+- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)
+- [Create a messaging extension](first-message-extension.md)
platform First App React https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-react.md
+
+ Title: Get started - Build your first Teams app with React
+
+description: Quickly create a Microsoft Teams app that displays a "Hello, World!" message using the Microsoft Teams Toolkit and React.
+ Last updated : 05/18/2021+++
+# Build and run your first Microsoft Teams app with React
+
+In this tutorial, you will create a new Microsoft Teams app in React that implements a simple personal app to pull information from the Microsoft Graph. (A *personal app* includes a set of tabs scoped for individual use.) During the tutorial, you will learn about the structure of a Teams app, how to run an app locally, and how to deploy the app to Azure.
+
+The app that is built displays basic user information for the current user. When permission is granted, the app will connect to the Microsoft Graph as the current user to get the complete profile.
+
+## Before you begin
+
+Make sure your development environment is set up by installing the [prerequisites](prerequisites.md)
+
+> [!div class="nextstepaction"]
+> [Install prerequisites](prerequisites.md)
+
+## Create your project
+
+Use the Teams Toolkit to create your first project:
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio code.
+1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
+
+1. Select **Create New Project**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Location of the Create New Project link in the Teams Toolkit sidebar.":::
+
+1. Select **Create a new Teams app**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
+
+1. On the **Select capabilities** step, the **Tab** capability will already be selected. Press **OK**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
+
+1. On the **Frontend hosting type** step, select **Azure**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-hosting.png" alt-text="Screenshot showing how to select hosting for your new app.":::
+
+1. On the **Cloud resources** step, press **OK**. We do not need additional cloud resources for this tutorial.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-cloud-resources.png" alt-text="Screenshot showing how to add cloud resources for your new app.":::
+
+1. On the **Programming Language** step, select **JavaScript**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
+
+1. Select a workspace folder. A folder will be created within your workspace folder for the project you are creating.
+
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+
+Your Teams app will be created within a few seconds.
+
+# [Command line](#tab/cli)
+
+Use the `teamsfx` CLI to create your first project. Start from the folder where you want to create the project folder.
+
+``` bash
+teamsfx new
+```
+
+The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**.
+
+1. Select **Create a new Teams app**.
+1. Choose the **Tab** capability.
+1. Select **Azure** frontend hosting.
+1. Do not select any cloud resources.
+1. Select **JavaScript** as the programming language.
+1. Press **Enter** to select the default workspace folder.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
+
+Once all the questions have been answered, your project will be created.
+++
+## Take a tour of the source code
+
+If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
+
+Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
++
+The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory. Among other items in this directory:
+
+- The app icons are stored as PNG files in `color.png` and `outline.png`.
+- The app manifest for publishing to the Developer Portal for Teams is stored in `manifest.source.json`.
+- The settings you chose when creating the project are stored in `settings.json`.
+
+Since you selected the tab capability during setup, the Teams Toolkit scaffolds all the necessary code for a basic tab in the `tabs` directory. Within this directory there are several important files:
+
+- `tabs/src/index.jsx` is the front-end app's entry point, where the main `App` component is rendered with `ReactDOM.render()`.
+- `tabs/src/components/App.jsx` handles URL routing in your app. It calls the [Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md) to establish communication between your app and Teams.
+- `tabs/src/components/Tab.jsx` contains the code to implement the UI of your app.
+- `tabs/src/components/TabConfig.jsx` contains the code to implement the UI that configures your app.
+
+Several tabs are required by the Teams runtime, including the privacy notice, terms of use, and configuration tabs. The code for the privacy notice and terms of use are located in the same directory.
+
+When you add cloud functionality, additional directories are added to the project. Most notably, the `api` directory holds the code to any Azure Functions you write.
+
+## Run your app locally
+
+Teams Toolkit allows you to run your app locally. This consists of several parts that are necessary to provide the correct infrastructure that Teams expects:
+
+- An application is registered with Azure Active Directory. This application has permissions associated with the location that the app is loaded from and any backend resources it accesses.
+- A web API is hosted to assist with authentication tasks, acting as a proxy between the app and Azure Active Directory. This is run by Azure Functions Core Tools. It can be accessed at the URL `https://localhost:5000`.
+- The HTML, CSS, and JavaScript resources that make up the front end of the app are hosted on a local service. It can be accessed at `https://localhost:3000`.
+- An app manifest is generated and exists in the Developer Portal for Teams. Teams uses the app manifest to tell connected clients where to load the app from.
+
+Once this is done, the app can be loaded within the Teams client. We use the Teams web client so that we can see the HTML, CSS, and JavaScript code within a standard web development environment.
++
+### Build and run your app locally in Visual Studio Code
+
+To build and run your app locally:
+
+1. From Visual Studio Code, press **F5** to run your application in debug mode.
+
+ > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
+
+ The Toolkit will prompt you to install a local certificate if needed. This certificate allows Teams to load your application from `https://localhost`. Select yes when the following dialog appears:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
+
+1. Your web browser is started to run the application. If prompted to open Microsoft Teams, select Cancel to remain within the browser. When prompted, select **Use the web app instead**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/launch-web-browser-and-pick-webapp.png" alt-text="Screenshot showing how to pick the web version of teams when launched":::
+
+1. You may be prompted to sign in. If so, sign in with your M365 account.
+1. When prompted to install the app onto Teams, press **Add**.
+
+Your app will now be displayed:
++
+You can do normal debugging activities as if this were any other web application (such as setting breakpoints). The app supports hot reloading. If you change any file within the project, the page will be reloaded.
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn what happens when you run your app locally in the debugger.</summary>
+
+When you pressed F5, the Teams Toolkit:
+
+1. Registered your application with Azure Active Directory.
+1. *Sideloaded* your app in Teams.
+1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+1. Started your application front-end hosted locally.
+1. Started Microsoft Teams in a web browser with a command to instruct Teams to side load the application from `https://localhost:3000/tab` (the URL is registered inside the application manifest).
+
+</details>
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn how to troubleshoot common issues when running your app locally.</summary>
+
+To successfully run your app in Teams, you must have a Teams account that allows app sideloading. For more information on account opening, see [prerequisites](prerequisites.md#enable-sideloading).
+
+</details>
++
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn what happens when you deployed your app to Azure</summary>
+
+Before deployment, the application has been running locally:
+
+1. The backend runs using _Azure Functions Core Tools_.
+1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
+
+Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure.
+
+1. The backend (if configured) uses a variety of Azure services, including Azure App Service and Azure Storage.
+1. The frontend application will be deployed to an Azure Storage account configured for static web hosting.
+
+</details>
+
+## Next steps
+
+Learn about other methods for creating Teams apps:
+
+- [Create a Teams app with Blazor](first-app-blazor.md)
+- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)
+- [Create a conversational bot app](first-app-bot.md)
+- [Create a messaging extension](first-message-extension.md)
platform First App Spfx https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-spfx.md
+
+ Title: Get started - Build your first Teams app with SPFx
+
+description: Learn how to build a custom tab with the SharePoint Framework
+ Last updated : 05/19/2021+++
+# Build and run your first Microsoft Teams app with SharePoint Framework (SPFx)
+
+In this tutorial, you will create a new Microsoft Teams app in SharePoint Framework (SPFx) that implements a simple personal app. (A *personal app* includes a set of tabs scoped for individual use.) During the tutorial, you will learn about the structure of a Teams app, how to run the app locally, and how to deploy the app to SharePoint.
+
+## Before you begin
+
+Make sure your development environment is set up by installing the [prerequisites](prerequisites.md)
+
+> [!div class="nextstepaction"]
+> [Install prerequisites](prerequisites.md)
+
+## Get organized
+
+In addition to the prerequisites, you also need to be an Administrator for a SharePoint Site Collection. This is where you will deploy your app for hosting. If you are using an M365 developer program tenant, use the administrator account you set up when you registered for the program.
+
+## Create your project
+
+Use the Teams Toolkit to create your first project:
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio code.
+1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
+
+1. Select **Create New Project**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Location of the Create New Project link in the Teams Toolkit sidebar.":::
+
+1. Select **Create a new Teams app**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
+
+1. On the **Select capabilities** step, the **Tab** capability will already be selected. Press **OK**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
+
+1. On the **Frontend hosting type** step, select **SharePoint Framework (SPFx)**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-hosting.png" alt-text="Screenshot showing how to select hosting for your new app.":::
+
+1. On the **Framework** step, select **React**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-which-framework.png" alt-text="Select Framework":::
+
+1. When asked for a **Webpart Name**, press **Enter** to accept the default.
+
+1. When asked for the **Webpart Description**, press **Enter** to accept the default.
+
+1. When asked for the **Programming Language**, press **Enter** to accept the default.
+
+1. Select a workspace folder. A folder will be created within your workspace folder for the project you are creating.
+
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+
+Your Teams app will be created within a few seconds.
+
+# [Command line](#tab/cli)
+
+Use the `teamsfx` CLI to create your first project. Start from the folder where you want to create the project folder.
+
+``` bash
+teamsfx new
+```
+
+The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**.
+
+1. Select **Create a new Teams app**.
+1. Choose the **Tab** capability.
+1. Select **SharePoint Framework (SPFx)** frontend hosting.
+1. Select **React** framework.
+1. Press **Enter** for the **Webpart Name**.
+1. Press **Enter** for the **Webpart Description**.
+1. Press **Enter** for the **Programming Language**.
+1. Press **Enter** to select the default workspace folder.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
+
+Once all the questions have been answered, your project will be created.
+++
+- [Learn more about developing for SharePoint Framework](/sharepoint/dev/spfx/sharepoint-framework-overview)
+
+## Take a tour of the source code
+
+If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
+
+Once the Teams Toolkit configures your project, you have the components to build a basic personal app for Teams that is hosted within the SharePoint Framework. The project directories and files display in the Explorer area of Visual Studio Code.
++
+The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory. Among other items in this directory:
+
+- The app icons are stored as PNG files in `color.png` and `outline.png`.
+- The app manifest for publishing to Developer Portal for Teams is stored in `manifest.source.json`.
+- The settings you chose when creating the project are stored in `settings.json`.
+
+Since you selected an SPFx Webpart project, the following files are relevant to your UI:
+
+- The folder `SPFx/src/webparts/{webpart}` contains your SPFx webpart.
+- The file `.vscode/launch.json` describes the debugging configurations available in the debug palette.
+
+For more information about SharePoint Webparts for Teams, [refer to the SharePoint documentation](/sharepoint/dev/spfx/build-for-teams-overview).
+
+## Run your app locally
+
+Teams Toolkit allows you to host your app locally and run it through the [SharePoint Framework Workbench](/sharepoint/dev/spfx/debug-in-vscode).
+
+### Build and run your app locally in Visual Studio Code
+
+To build and run your app locally:
+
+1. From Visual Studio Code, press **F5**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-debug-local.png" alt-text="Screenshot showing how to start an SPFx app in a local workbench.":::
+
+ > [!NOTE]
+ > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens and loads the SharePoint Workbench when the build is complete. This can take 3-5 minutes to complete.
+
+ Once the SharePoint Workbench is loaded.
+
+ >[!NOTE]
+ > The Toolkit will prompt you to install a local certificate if needed. This certificate allows Teams to load your application from `https://localhost`. Select yes when the following dialog appears:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
+
+1. Press one of the **Add Webpart** (+) icons to add your webpart.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-workbench-addpart.png" alt-text="Screenshot showing the SPFx workbench running with the popup to add a webpart showing.":::
+
+1. Choose your webpart from the menu.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-workbench-addpart2.png" alt-text="Screenshot showing the SPFx workbench running with the popup to add a webpart selection.":::
+
+Your app should now be running. You can do normal debugging activities as if this were any other SPFx webpart (such as setting breakpoints).
+
+> [!TIP]
+> Try placing breakpoints in the render method of `SPFx/src/webparts/{webpart}/{webpart}.ts` and reloading the browser window. VS Code will stop on breakpoints in your code.
+
+## Deploy your app to SharePoint
+
+Ensure a SharePoint App Catalog exists in your deployment. If one does not exist, [create one](/sharepoint/use-app-catalog). It may take up to 15 minutes for the app catalog to be fully created.
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio Code.
+1. Select the Teams Toolkit from the sidebar by selecting the Teams icon.
+1. Select **Provision in the Cloud**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands":::
+
+1. You can monitor the progress by watching the dialogs in the bottom right corner. After a few seconds, you will see the following notice:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/provision-complete.png" alt-text="Screenshot showing the provisioning complete dialog.":::
+
+1. Once provisioning is complete, select **Deploy to the cloud**.
+
+1. Currently, automated deployment is not available. A dialog will pop up prompting you to build and deploy manually. Press **Build SharePoint Package**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/build-sharepoint-package.png" alt-text="Screenshot for the Build Sharepoint Package dialog":::
+
+# [Command line](#tab/cli)
+
+In your terminal window:
+
+1. Run `teamsfx provision`.
+
+ ``` bash
+ teamsfx provision
+ ```
+
+ You may be prompted to log in to your Azure subscription. If required, you will be prompted to select an Azure subscription to use for the Azure resources.
+
+ > [!NOTE]
+ > There are always some Azure resources used for hosting your app.
+
+1. Run `teamsfx deploy`.
+
+ ``` bash
+ teamsfx deploy
+ ```
+
+1. When prompted, select **Build SharePoint Package**.
+++
+The SharePoint package is located in `SPFx/sharepoint/solution` within your project. Upload the package to SharePoint:
+
+1. Log into the M365 Admin Console, then navigate to the SharePoint App Catalog.
+
+ - Open `https://admin.microsoft.com/AdminPortal/Home`.
+ - Under **Admin centers**, select the **SharePoint** admin center.
+ - Select **More features** from the sidebar menu.
+ - Press **Open** under **Apps**.
+ - Select **App Catalog**.
+
+1. Select **Distribute apps for SharePoint**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-distribute-apps.png" alt-text="Distribute apps for SharePoint.":::
+
+1. Select **Upload**.
+
+1. Press **Choose File**.
+
+1. Locate your `{project}.sppkg` file, located in the `SPFx/sharepoint/solution` folder within your project. Press **Open**.
+
+1. Press **OK**.
+
+1. The SharePoint deployment process will automatically start. Ensure **Make this solution available to all sites in the organization** is checked, then press **Deploy**.
+
+1. Select the **FILES** tab.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/spfx-appcatalog-filestab.png" alt-text="Select the files tab in the SharePoint App Catalog.":::
+
+1. select the package you deployed, then press **Sync to Teams** in the ribbon.
+
+ > [!Note]
+ > The Sync to Teams process can take a couple of minutes. You will see a message on the right-hand side of the browser indicating that the app has successfully synchronized to Teams.
+
+Open the Teams application (or sign in at `https://teams.microsoft.com`). Press the triple-dot on the sidebar, then select **All apps**. The app will be placed in the **Apps built for your org** category. You can add the app from there.
++
+## Next steps
+
+Learn about other methods for creating Teams apps:
+
+- [Create a Teams app with React](first-app-react.md)
+- [Create a Teams app with Blazor](first-app-blazor.md)
+- [Create a conversational bot app](first-app-bot.md)
+- [Create a messaging extension](first-message-extension.md)
platform First Message Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-message-extension.md
+
+ Title: Get started - Build your first messaging extension
+
+description: Create a messaging extension for Microsoft Teams using the Teams Toolkit.
+ Last updated : 05/20/2021+++
+# Build and run your first messaging extension for Microsoft Teams
+
+There are two types of Teams **messaging extensions**:
+
+- [Search commands](../messaging-extensions/how-to/search-commands/define-search-command.md) allow you to search external systems and insert the results of that search into a message in the form of a card.
+- [Action commands](../messaging-extensions/how-to/action-commands/define-action-command.md) allow you present your users with a modal popup to collect or display information, then process their interaction and send information back to Teams.
+
+In this tutorial, you will create a *search command* to search for external data and insert the results into a message.
+
+## Before you begin
+
+Make sure your development environment is set up by installing the [Prerequisites](prerequisites.md)
+
+> [!div class="nextstepaction"]
+> [Install Prerequisites](prerequisites.md)
+
+## Create your project
+
+Use the Teams Toolkit to create your first project:
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio Code.
+1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
+
+1. Select **Create New Project**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Location of the Create New Project link in the Teams Toolkit sidebar.":::
+
+1. Select **Create a new Teams app**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::
+
+1. On the **Select capabilities** step, select **Message Extension** and deselect **Tab**. Press **OK**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/msgextn-create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::
+
+1. On the **Bot registration** step, select **Create a new bot registration**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-bot-registration.png" alt-text="Select create a new bot registration":::
+
+ > [!NOTE]
+ > Messaging extensions rely on bots to provide a dialog between the user and your code.
+
+1. On the **Programming Language** step, select **JavaScript**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::
+
+1. Select a workspace folder. A folder will be created within your workspace folder for the project you are creating.
+
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+
+Your Teams app will be created within a few seconds.
+
+# [Command line](#tab/cli)
+
+Use the `teamsfx` CLI to create your first project. Start from the folder where you want to create the project folder.
+
+``` bash
+teamsfx new
+```
+
+The CLI walks through some questions to create the project. Each question will tell you how to answer it (for example, to use arrow keys to select an option). When you have answered the question, confirm your choice by pressing **Enter**.
+
+1. Select **Create a new Teams app**.
+1. Select the **Message Extension** capability and deselect the **Tab** capability.
+1. Select **Create a new bot registration**.
+1. Select **JavaScript** as the programming language.
+1. Press **Enter** to select the default workspace folder.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters.
+
+Once all the questions have been answered, your project will be created.
+++
+## Take a tour of the source code
+
+If you wish to skip this section for now, you can [run your app locally](#run-your-app-locally).
+
+A messaging extension uses the [Bot Framework](https://docs.botframework.com) to allow the user to interact with your service via a conversation. After scaffolding, your project will look like this:
++
+The bot code is stored in the `bot` directory. The `bots/messageExtensionBot.js` is the main entry point for the messaging extension.
+
+> [!Tip]
+> Familiarize yourself with bots outside of Teams before you integrate your first bot within Teams. You can find more information about bots by reviewing the [Azure Bot Service](/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&preserve-view=true) tutorials.
+
+## Run your app locally
+
+Teams Toolkit allows you to host your app locally. To do this:
+
+- An Azure Active Directory Application is registered within the M365 tenant.
+- An app manifest is submitted to the Developer Portal for Teams.
+- An API is run locally using Azure Functions Core Tools to support your app.
+- [ngrok](https://ngrok.io) is installed and used to provide a tunnel between Teams and your messaging extension.
+
+To build and run your app locally:
+
+1. From Visual Studio Code, press **F5** to run your application in debug mode.
+
+ > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
+
+1. Teams will be loaded in a web browser, and you will be prompted to sign in. If prompted to open Microsoft Teams, select Cancel to remain within the browser. Sign in with your M365 account.
+
+1. Press **Add** to add the app to your account.
+
+Once the app is loaded, you will be taken directly to a search dialog:
++
+Type some text in the search box, then select one of the options. An adaptive card will be added to your input box.
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn what happens when you run your app locally in the debugger.</summary>
+
+When you pressed F5, the Teams Toolkit:
+
+1. Registered your application with Azure Active Directory.
+1. Registered your application for "side loading" in Microsoft Teams.
+1. Started your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
+1. Started an ngrok tunnel so Teams can communicate with your app.
+1. Started Microsoft Teams with a command to instruct Teams to sideload the application.
+
+</details>
+
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Learn how to troubleshoot common issues when running your app locally.</summary>
+
+To successfully run your app in Teams, you must have a Microsoft 365 development account that allows app sideloading. For more information on account opening, see [Prerequisites](prerequisites.md#enable-sideloading).
+
+> [!TIP]
+> Check for issues before sideloading your app, using the [app validation tool](https://dev.teams.microsoft.com/appvalidation.html), which is included in the toolkit. Fix the errors to successfully sideload the app.
+</details>
++
+<!-- markdownlint-disable MD033 -->
+
+<details>
+<summary>Learn what happens when you deployed your app to Azure</summary>
+
+Before deployment, the application has been running locally:
+
+1. The backend runs using _Azure Functions Core Tools_.
+1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.
+
+Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure. The backend uses a variety of Azure services, including Azure App Service and Azure Bot Service.
+
+</details>
+
+## Next steps
+
+Learn about other methods for creating Teams apps:
+
+- [Create a Teams app with React](first-app-react.md)
+- [Create a Teams app with Blazor](first-app-blazor.md)
+- [Create a Teams app as a SharePoint Web Part](first-app-spfx.md) (Azure not required)
+- [Create a conversation bot](first-app-bot.md)
platform Prerequisites https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/prerequisites.md
+
+ Title: Get started - Prerequisites
+
+description: Learn how to get started with the Microsoft Teams app development and set up your environment.
+ Last updated : 05/24/2021++
+# Prerequisites: Get started with Microsoft Teams app development
+
+Before your create your first Teams app, you must install a few tools and set up your development environment.
+
+## Install required tools
+
+Some of the tools you need depend on how you you prefer to build your Teams app:
+
+- [Node.js](https://nodejs.org/en/download/) (use the latest v14 LTS release)
+- A browser with developer tools - such as [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/)
+- If you're developing with JavaScript, TypeScript, or the SharePoint Framework (SPFx), install [Visual Studio Code](https://code.visualstudio.com/download), version 1.55 or later.
+- If you're developing with .NET, install [Visual Studio 2019](https://visualstudio.com/download). Ensure you install the **ASP.NET and web development** or **.NET Core cross-platform development** workload.
+
+> [!WARNING]
+> There are known issues with `npm@7`, packaged with Node v15 and later. If you have problems running `npm install`, ensure you're using Node v14 (LTS)
+
+## Install the Teams Toolkit
+
+The Teams Toolkit helps simplify the development process with tools to provision and deploy cloud resources for your app, publish to the Teams store, and more. You can use the toolkit with Visual Studio Code, Visual Studio, or as a CLI (called `teamsfx`).
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio Code.
+1. Select the Extensions view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).
+1. In the search box, enter _Teams Toolkit_.
+1. Select on the green install button next to the Teams Toolkit.
+
+You also can find the Teams Toolkit on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).
+
+The following tools will be installed by the Visual Studio Code extension when they are needed. If already installed, the installed version will be used instead. If using Linux (including WSL), you must install these tools before use:
+
+- [Azure Functions Core Tools](/azure/azure-functions/functions-run-local)
+
+ Azure Functions Core Tools is used to run any backend components locally during a local debug run, including the authentication helpers required when running your services in Azure. It is installed within the project directory (using the npm `devDependencies`).
+
+- [.NET SDK](/dotnet/core/install/)
+
+ The .NET SDK is used to install customized bindings for local debugging and Azure Functions app deployments. If you have not installed the .NET 3.1 (or later) SDK globally, the portable version will be installed.
+
+- [ngrok](https://ngrok.com/download)
+
+ Some Teams app features (conversational bots, messaging extensions, and incoming webhooks) require inbound connections. You need to expose your development system to Teams through a tunnel. A tunnel is not required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).
+
+# [Visual Studio 2019](#tab/vs)
+
+You can use Visual Studio 2019 to develop Teams apps with Blazor Server in .NET. If you're not intending to develop Teams apps in .NET, install the Visual Studio Code version of Teams Toolkit.
+
+To install the Teams Toolkit extension:
+
+1. Open Visual Studio 2019.
+1. Select **Extensions** > **Manage Extensions**.
+1. In the search box, enter _Teams Toolkit_.
+1. Select the Teams Toolkit extension and select **Download**.
+
+The extension will be downloaded. Close Visual Studio 2019 to install the extension.
+
+# [Command line](#tab/cli)
+
+To install the TeamsFx CLI, use the `npm` package
+
+``` bash
+npm install -g @microsoft/teamsfx-cli
+```
+
+Depending on your configuration, you may need to use `sudo` to install the CLI:
+
+``` bash
+sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli
+```
+
+This is more common on Linux and macOS systems.
+
+Ensure you add the npm global cache to your PATH. This is normally done as part of the Node.js installer.
+
+You can use the CLI with the `teamsfx` command. Verify that the command is working by running `teamsfx -h`.
+
+> [!CAUTION]
+> Before you can run TeamsFx in PowerShell terminals, you need to enable the "remote signed" execution policy for PowerShell. For more information, refer to the [PowerShell documentation](/powershell/module/microsoft.powershell.core/about/about_signing).
+++
+## Install optional tools
+
+Install browser tools for app development. For instance, if your app is written with React, you can use React Developer Tools:
+
+- [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+
+If you want to access data stored in Azure or deploy a cloud-based backend for your Teams app in Azure, install these tools:
+
+- [Azure Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack)
+- [Azure CLI](/cli/azure/install-azure-cli)
+
+If you work with Microsoft Graph data, you should learn about and bookmark the Microsoft Graph Explorer. This browser-based tool allows you to query Microsoft Graph outside of an app.
+
+- [Microsoft Graph Explorer](https://developer.microsoft.com/graph/graph-explorer)
+
+With the Developer Portal for Teams, you can configure, manage, and distribute your Teams app (including to your org or the Teams store).
+
+- [Developer Portal for Teams](https://dev.teams.microsoft.com/)
+
+## Enable sideloading
+
+During development, you will need to load your app within Teams without distributing it. This is known as "sideloading".
+
+1. If you have a Teams account, verify if you can sideload apps in Teams:
+
+ 1. In the Teams client, select **Apps**.
+ 1. Look for an option to **Upload a custom app**.
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/upload-custom-app-closeup.png" alt-text="Illustration showing where in Teams you can upload a custom app.":::
+
+> [!NOTE]
+> If you still can't sideload apps, talk to your Teams administrator. See [enable custom Teams apps and turn on custom app uploading](~/concepts/build-and-test/prepare-your-o365-tenant.md#enable-custom-teams-apps-and-turn-on-custom-app-uploading) for details.
+
+## Get a free Teams developer tenant (optional)
+
+If you cannot see the sideload option, or you don't have a Teams account, you can get a free Teams developer account by joining the M365 developer program. The registration process takes approximately two minutes.
+
+1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program).
+1. Select **Join Now** and follow the onscreen instructions.
+1. When you get to the welcome screen, select **Set up E5 subscription**.
+1. Set up your administrator account. Once you finish, you should see a screen like this.
+
+ :::image type="content" source="~/assets/images/build-your-first-app/dev-program-subscription.png" alt-text="Example of what you see after signing up for the Microsoft 365 developer program.":::
+
+1. Log in to Teams using the administrator account you just set up.
+1. Verify if you now have the **Upload a custom app** option.
+
+## Get a free Azure account
+
+If you wish to host your app or access resources within Azure, you will need an Azure subscription. You can [create a free account](https://azure.microsoft.com/free/) before you begin.
+
+## Sign in to your Microsoft 365 and Azure accounts
+
+You will need access to two accounts:
+
+- Your Microsoft 365 account credentials. This is the account that you use to sign in to Teams. If you're using an Microsoft 365 developer program tenant, this is the admin account you set up when you registered for the program.
++
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio Code
+1. Select the Teams icon in the sidebar:
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::
+
+1. Select **Sign in to M365**.
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/account-commands.png" alt-text="Location of the Accounts section used to sign-in.":::
+
+1. The sign-in process will start using your normal web browser. Complete the sign-in process for your M365 account. You will be prompted when you can close the browser and return to Visual Studio Code.
+1. Return to the Teams Toolkit within Visual Studio Code.
+1. Select **Sign in to Azure**.
+
+ > [!TIP]
+ > If you have the Azure Account extension installed and are using the same account, you can skip this step. You will automatically use the same account as you are using in other extensions.
+
+1. The sign-in process will start using your normal web browser. Complete the sign-in process for your Azure account. You will be prompted when you can close the browser and return to Visual Studio Code.
+
+When complete, the **ACCOUNTS** section of the sidebar will show the two accounts separately, together with the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.
+
+# [Visual Studio 2019](#tab/vs)
+
+Visual Studio 2019 will prompt you to log in to each service as it is needed. You do not need to sign in to your M365 and Azure accounts in advance.
+
+# [Command line](#tab/cli)
+
+1. Sign in to Microsoft 365 with the TeamsFx CLI:
+
+ ``` bash
+ teamsfx account login m365
+ ```
+
+ The sign-in process will start using your normal web browser. Complete the sign-in process for your M365 account. You will be prompted when you can close the browser.
+
+2. Sign in to Azure with the TeamsFx CLI:
+
+ ``` bash
+ teamsfx account login azure
+ ```
+
+ The sign-in process will start using your normal web browser. Complete the sign-in process for your Azure account. You will be prompted when you can close the browser.
+
+The account logins are shared between Visual Studio Code and the TeamsFx CLI.
+++
+## Next steps
+
+Now that your development environment is configured, you can create, build, and deploy your first Teams app.
+
+- [Create your first Teams app using React](first-app-react.md)
+- [Create your first Teams app with Blazor](first-app-blazor.md)
+- [Create your first Teams app using SharePoint Framework (SPFx)](first-app-spfx.md)
+- [Create a conversational bot app](first-app-bot.md)
+- [Create a messaging extension](first-message-extension.md)
platform Azure Provisioning Instructions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/get-started/azure-provisioning-instructions.md
+## Deploy your app to Azure
+
+Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning), then the code that makes up your app is copied into the created cloud resources.
+
+# [Visual Studio Code](#tab/vscode)
+
+1. Open Visual Studio Code.
+1. Select the Teams Toolkit from the sidebar by selecting the Teams icon.
+1. Select **Provision in the Cloud**.
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands":::
+
+1. If required, select a subscription to use for the Azure resources.
+
+ > [!NOTE]
+ > There are always some Azure resources used for hosting your app.
+
+1. A dialog warns you that costs may be incurred when running resources in Azure. Press **Provision**.
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/provision-warning.png" alt-text="Screenshot of the provisioning dialog.":::
+
+ The provisioning process will create resources in the Azure cloud. This will take some time. You can monitor the progress by watching the dialogs in the bottom right corner. After a few minutes, you will see the following notice:
+
+ :::image type="content" source="~/assets/images/teams-toolkit-v2/provision-complete.png" alt-text="Screenshot showing the provisioning complete dialog.":::
+
+1. Once provisioning is complete, select **Deploy to the Cloud**. As with provisioning, this process takes some time. You can monitor the process by watching the dialogs in the bottom right corner. After a few minutes, you will see a completion notice.
+
+# [Command Line](#tab/cli)
+
+In your terminal window:
+
+1. Run `teamsfx provision`.
+
+ ``` bash
+ teamsfx provision
+ ```
+
+ You may be prompted to log in to your Azure subscription. If required, you will be prompted to select an Azure subscription to use for the Azure resources.
+
+ > [!NOTE]
+ > There are always some Azure resources used for hosting your app.
+
+1. Run `teamsfx deploy`.
+
+ ``` bash
+ teamsfx deploy
+ ```
+++
+> [!NOTE]
+> **What's the difference between Provision and Deploy?**
+>
+> The **Provision** step will create resources in Azure and M365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The **Deploy** step will copy the code for your app to the resources you created during the provision step. It is common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it is separate from the deployment step.
+
+Once the provisioning and deployment steps are finished:
+
+1. From Visual Studio Code, open the debug panel (**Ctrl+Shift+D** / **⌘⇧-D** or **View > Run**)
+1. Select **Launch Remote (Edge)** from the launch configuration drop-down.
+1. Press the Play button to launch your app - now running remotely from Azure!
platform Browser Private Launch https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/get-started/browser-private-launch.md
+### (Optional) Adjust your browser launch settings
+
+When developing a Teams app, it is common to run your app in an alternate developer tenant or with alternate credentials. Both Microsoft Edge and Google Chrome provide facilities to adjust the launch settings for your browser. For example, to update the project to support InPrivate mode (Microsoft Edge), open the `.vscode/launch.json` file in your project. Look for the appropriate launch settings, and add the following block to each one:
+
+``` json
+"runtimeArgs": [ "--inprivate" ]
+```
+
+For instance, the launch setting for running locally looks like this:
+
+``` json
+{
+ "name": "Start and Attach to Frontend (Edge)",
+ "type": "pwa-msedge",
+ "request": "launch",
+ "url": "https://teams.microsoft.com/_#/l/app/${localTeamsAppId}?installAppPackage=true",
+ "preLaunchTask": "Start Frontend",
+ "postDebugTask": "Stop All Services",
+ "presentation": {
+ "group": "all",
+ "hidden": true
+ },
+ "runtimeArgs": [ "--inprivate" ]
+},
+```
+
+Alternatively, you can configure your browser to use the last known profile. [Create a new profile](https://support.microsoft.com/topic/sign-in-and-create-multiple-profiles-in-microsoft-edge-df94e622-2061-49ae-ad1d-6f0e43ce6435) in Microsoft Edge. Then adjust the settings to use the last known profile for new links:
+
+- In Microsoft Edge, open `edge://settings/profiles/multiProfileSettings`.
+- Turn off **Automatic profile switching**.
+- For the **Default profile for external links**, select **Last used (default)**.
+
+Ensure your browser is opened to the correct profile before debugging your app.
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/overview.md
description: Get an overview of how developers can extend Microsoft Teams featur
localization_priority: Normal Previously updated : 09/22/2020 Last updated : 05/24/2021 # Build apps for Microsoft Teams
Microsoft Teams apps bring key information, common tools, and trusted processes
Apps are how you extend Teams to fit your needs. Create something brand new for Teams or integrate an existing app. > [!div class="nextstepaction"]
-> [Start here](build-your-first-app/build-first-app-overview.md)
+> [Start here](get-started/prerequisites.md)
## What are Teams apps?
Teams apps are a combination of [capabilities](concepts/capabilities-overview.md
Quickly familiarize yourself with building for Teams by setting up your environment and creating a simple app. > [!div class="nextstepaction"]
-> [Build your first app](build-your-first-app/build-first-app-overview.md)
+> [Build your first app](get-started/prerequisites.md)
:::column-end::: :::column span="":::
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Overview.md
You can now send the same card to both, Teams and Outlook, and keep them in sync
The following image depicts the Universal Actions for Adaptive Cards for both Teams and Outlook:
+# [Mobile](#tab/mobile)
++
+# [Desktop](#tab/desktop)
+ :::image type="content" source="~/assets/images/adaptive-cards/universal-bots-teams-outlook.png" alt-text="Same card to Teams and Outlook":::
+* * *
+ ### User Specific Views Today every user in the Teams chat or channel sees the exact same view and button actions on the Adaptive Card. However, in certain scenarios there is a requirement for certain users to act differently and have access to different information within the same chat or channel.
For example, if you send an incident reporting card in a chat or channel, only t
The following image shows an example of a ticketing messaging extension (ME) where different users in the chat are shown different actions based on the requirement:
+# [Mobile](#tab/mobile)
++
+# [Desktop](#tab/desktop)
+ :::image type="content" source="~/assets/images/adaptive-cards/universal-bots-incident-management.png" alt-text="User Specific Views":::
+* * *
+ For more information, see [sample for User Specific Views](User-Specific-Views.md). ### Sequential Workflow support
Now, you can understand how Adaptive Cards can be transformed with the new Unive
## Adaptive Cards and the new Universal Actions model
-Adaptive Cards are a combination of content, such as text and graphics, and actions that can be performed by a user. For more information, see [Adaptive Cards](http://adaptivecards.io/). The new Universal Actions for Adaptive Cards enables a common handling of the Adaptive Card actions across platforms and applications. For more information, see [Universal Action Model](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model).
+Adaptive Cards are a combination of content, such as text and graphics, and actions that can be performed by a user. For more information, see [Adaptive Cards](http://adaptivecards.io/). The new Universal Actions for Adaptive Cards enables a common handling of the Adaptive Card actions across platforms and applications. For more information, see [Universal Action Model](/adaptive-cards/authoring-cards/universal-action-model).
[Work with Universal Actions for Adaptive Cards](Work-with-universal-actions-for-adaptive-cards.md) document takes you through the steps to use the capabilities of Universal Actions for Adaptive Cards for your solution.
platform Sequential Workflows https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Sequential-Workflows.md
var adaptiveCardResponse = JObject.FromObject(new
}); ```
+## Code sample
+
+|Sample name | Description | .NETCore |
+|-|--|--|
+| Teams catering bot | Create a simple bot that accepts food order using Adaptive Cards. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-catering/csharp)|
+ ## See also * [Adaptive Card actions in Teams](~/task-modules-and-cards/cards/cards-actions.md#adaptive-cards-actions)
platform User Specific Views https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/User-Specific-Views.md
Earlier if Adaptive Cards was sent in a Teams conversation, all users see the ex
For example, Megan, a safety inspector at Contoso, wants to create an incident and assign it to Alex. She also wants everyone in the team to be aware about the incident. Megan uses Contoso incident reporting message extension powered by Universal Actions for Adaptive Cards.
+# [Mobile](#tab/mobile)
++
+# [Desktop](#tab/desktop)
+ :::image type="content" source="~/assets/images/adaptive-cards/universal-bots-incident-management.png" alt-text="User Specific Views":::
+* * *
+ ## User Specific Views for Adaptive Cards The following code provides an example of Adaptive Cards:
platform Work With Universal Actions For Adaptive Cards https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Work-with-Universal-Actions-for-Adaptive-Cards.md
For more information on how to support older clients, see [backward compatibilit
When authoring Adaptive Cards, replace `Action.Submit` and `Action.Http` with `Action.Execute`. The schema for `Action.Execute` is similar to that of `Action.Submit`.
-For more information, see [Action.Execute schema and properties](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#actionexecute).
+For more information, see [Action.Execute schema and properties](/adaptive-cards/authoring-cards/universal-action-model#actionexecute).
Now, you can use the refresh model to allow Adaptive Cards to update automatically.
Now, you can use the refresh model to allow Adaptive Cards to update automatical
To automatically refresh your Adaptive Card, define its `refresh` property, which embeds an action of type `Action.Execute` and an `userIds` array.
-For more information, see [refresh schema and properties](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#refresh-mechanism).
+For more information, see [refresh schema and properties](/adaptive-cards/authoring-cards/universal-action-model#refresh-mechanism).
## User IDs in refresh
The following are the features of UserIds in refresh:
* UserIds property is added because channels in Teams can include a large number of members. If all members are viewing the channel at the same time, an unconditional automatic refresh results in many concurrent calls to the bot. To avoid this, the `userIds` property must always be included to identify which users must get an automatic refresh with a maximum of *60 (sixty) user MRIs*.
-* For more information on how you can fetch Teams conversation member's user MRIs to add in userIds list in refresh section of Adaptive Card, see [fetch roster or user profile](https://docs.microsoft.com/microsoftteams/platform/bots/how-to/get-teams-context?tabs=dotnet#fetch-the-roster-or-user-profile).
+* For more information on how you can fetch Teams conversation member's user MRIs to add in userIds list in refresh section of Adaptive Card, see [fetch roster or user profile](/microsoftteams/platform/bots/how-to/get-teams-context?tabs=dotnet#fetch-the-roster-or-user-profile).
* Sample Teams user MRI is `29:1bSnHZ7Js2STWrgk6ScEErLk1Lp2zQuD5H2qQ960rtvstKp8tKLl-3r8b6DoW0QxZimuTxk_kupZ1DBMpvIQQUAZL-PNj0EORDvRZXy8kvWk`
Next step is to use the `adaptiveCard/action` invoke activity to understand what
When `Action.Execute` is executed in the client, a new type of Invoke activity `adaptiveCard/action` is made to your bot.
-For more information, see [request format and properties for a typical `adaptiveCard/action` invoke activity](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#request-format).
+For more information, see [request format and properties for a typical `adaptiveCard/action` invoke activity](/adaptive-cards/authoring-cards/universal-action-model#request-format).
-For more information, see [response format and properties for a typical `adaptiveCard/action` invoke activity with supported response types](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#response-format).
+For more information, see [response format and properties for a typical `adaptiveCard/action` invoke activity with supported response types](/adaptive-cards/authoring-cards/universal-action-model#response-format).
Next, you can apply backward compatibility to older clients across different platforms and make your Adaptive Card compatible.
Universal Actions for Adaptive Cards allows you to set properties that enable ba
To ensure backward compatibility of your Adaptive Cards with older versions of Teams, you must include the `fallback` property and set its value to `Action.Submit`. Also, your bot code must process both `Action.Execute` and `Action.Submit`.
-For more information, see [backward compatibility on Teams](https://docs.microsoft.com/adaptive-cards/authoring-cards/universal-action-model#teams).
+For more information, see [backward compatibility on Teams](/adaptive-cards/authoring-cards/universal-action-model#teams).
+
+## Code sample
+
+|Sample name | Description | .NETCore |
+|-|--|--|
+| Teams catering bot | Create a simple bot that accepts food order using Adaptive Cards. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-catering/csharp)|
## See also
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
The following manifest.json file contains the basic elements needed to test and
The Exchange Online PowerShell V2 module uses modern authentication and works with multi-factor authentication (MFA) for connecting to all Exchange-related PowerShell environments in Microsoft 365. Admins can use Exchange Online PowerShell to disable connectors for an entire tenant or a specific group mailbox, affecting all users in that tenant or mailbox. It is not possible to disable for some and not others. Also, connectors are disabled by default for GCC tenants.
-The tenant-level setting overrides the group-level setting. For example, if an admin enables connectors for the group and disables them on the tenant, connectors for the group will be disabled. To enable a connector in Teams, [connect to Exchange Online PowerShell](/docs.microsoft.com/powershell/exchange/connect-to-exchange-online-powershell?view=exchange-ps#connect-to-exchange-online-powershell-using-modern-authentication-with-or-without-mfa&preserve-view=true) using modern authentication with or without MFA.
+The tenant-level setting overrides the group-level setting. For example, if an admin enables connectors for the group and disables them on the tenant, connectors for the group will be disabled. To enable a connector in Teams, [connect to Exchange Online PowerShell](/powershell/exchange/connect-to-exchange-online-powershell?view=exchange-ps#connect-to-exchange-online-powershell-using-modern-authentication-with-or-without-mfa&preserve-view=true) using modern authentication with or without MFA.
### Commands to disable or enable connectors
The tenant-level setting overrides the group-level setting. For example, if an a
* `Set-OrganizationConfig -ConnectorsEnabledForTeams:$true` * `Set-OrganizationConfig -ConnectorsActionableMessagesEnabled:$true`
-For more information on PowerShell module exchange, see [Set-OrganizationConfig](/docs.microsoft.com/powershell/module/exchange/Set-OrganizationConfig.md?view=exchange-ps&preserve-view=true). To enable or disable Outlook connectors, [connect apps to your groups in Outlook](https://support.microsoft.com/topic/connect-apps-to-your-groups-in-outlook-ed0ce547-038f-4902-b9b3-9e518ae6fbab?ui=en-us&rs=en-us&ad=us).
+For more information on PowerShell module exchange, see [Set-OrganizationConfig](/powershell/module/exchange/Set-OrganizationConfig?view=exchange-ps&preserve-view=true). To enable or disable Outlook connectors, [connect apps to your groups in Outlook](https://support.microsoft.com/topic/connect-apps-to-your-groups-in-outlook-ed0ce547-038f-4902-b9b3-9e518ae6fbab?ui=en-us&rs=en-us&ad=us).
## Testing your Connector
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Notes** | **Changed topics** | | -- | | |
-|5/24/2021|Updated Teams app design guidelines with mobile patterns and more.|[Designing your Teams app](~/concepts/design/design-teams-app-overview.md)
-|03/18/2021|Notice: **Please update to version 4.10 or above of the Bot Framework SDK** as we've started with the deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync`. | [Bot API Changes for Team/Chat Members](resources/team-chat-member-api-changes.md) |
+|05/24/2021|Updated Teams app design guidelines with mobile patterns and more.|[Designing your Teams app](~/concepts/design/design-teams-app-overview.md)
|05/13/2021|Added information on mConnect and Skooler.|[Moodle learning management system](resources/moodle-overview.md) |05/10/2021| Manifest v1.10 is released.|[Manifest schema](resources/schem) | |05/10/2021| New app customization feature.| [Enable orgs to customize your app](concepts/design/enable-app-customization.md) | |05/07/2021| Deep links for audio and video calls in chat. |[Deep links](concepts/build-and-test/deep-links.md#deep-linking-to-an-audio-or-audio-video-call) | |04/30/2021|New guidance on how to publish apps to the Teams store.|[Publish your app to the Teams store](concepts/deploy-and-publish/appsource/publish.md), [Teams store validation guidelines](concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) |
-| 04/29/2021 | New: Universal Actions for Adaptive Cards. | [Universal Actions for Adaptive Cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) |
+|04/29/2021 | New: Universal Actions for Adaptive Cards. | [Universal Actions for Adaptive Cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) |
+|04/08/2021| App customization feature is now available in developer preview.|[Design teams app overview](concepts/design/enable-app-customization.md), [App studio overview](concepts/build-and-test/app-studio-overview.md#connectors), and [Manifest schema](resources/schem) |
|03/18/2021|Notice: Update to version 4.10 or above of the Bot Framework SDK, as we've started with the deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync`. | [Bot API Changes for Team/Chat Members](resources/team-chat-member-api-changes.md) | |03/05/2021|Notice: Tabs will no longer have margins surrounding their experiences. Tab developers should review and update their apps. | [Removing tab margins](resources/removing-tab-margins.md) | |03/05/2021|Default install scope and group capability is in developer preview.| [Default install scope and group capability](concepts/deploy-and-publish/add-default-install-scope.md) |
Developer preview is a public program that provides early access to unreleased T
| **Date** | **Notes** | **Changed topics** | | -- | | |
+|05/25/2021| Updated Teams Toolkit for [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) and [Visual Studio](https://marketplace.visualstudio.com/items?itemName=msft-vsteamstoolkit.vsteamstoolkit&ssr=false#overview). | [Get started with Teams app development](~/get-started/prerequisites.md) |
+|05/25/2021| Meeting Details API and real-time Teams meeting events | [Create apps for Teams meetings](~/apps-in-teams-meetings/create-apps-for-teams-meetings.md) |
|05/25/2021| New Developer Portal for Teams introduced for managing your Teams apps. | [Developer Portal for Teams](concepts/build-and-test/teams-developer-portal.md) |
+|05/25/2021| Together Mode feature combines participants into a single virtual scene and places their video streams in pre-determined seats. | [Together Mode](~/apps-in-teams-meetings/teams-together-mode.md) |
|05/24/2021|Bots can be enabled to receive all channel messages using resource-specific consent (RSC).|[Receive all messages with RSC](~/bots/how-to/conversations/channel-messages-with-rsc.md), [bot conversation overview](~/bots/how-to/conversations/conversation-basics.md), [channel and group conversations](~/bots/how-to/conversations/channel-and-group-conversations.md), and [developer preview manifest schema](~/resources/schem) | |05/21/2021|Tabs link unfurling and stage view|[Tabs link unfurling and stage view](tabs/tabs-link-unfurling.md) | |03/05/2021| Tabs will no longer have margins surrounding their experiences. Tab developers should review and update their apps. | [Removing tab margins](resources/removing-tab-margins.md) |