Updates from: 08/04/2021 03:19:27
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
keywords: teams apps meetings user participant role api
# Prerequisites and API references for apps in Teams meetings
-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.
+To expand the app capabilities across the meeting lifecycle, Teams enables you to work with apps for Teams meetings. Go through the prerequisites and 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:
+Before you work with apps for Teams meetings, you must have an understanding of the following prerequisites:
-* You must have knowledge of how to develop Teams apps. For more information, see [Teams app development](../overview.md).
+* Know how to develop Teams apps. For more information on how to develop Teams app, 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](enable-and-configure-your-app-for-teams-meetings.md#update-your-app-manifest).
+* 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).
* 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).
+* 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.
+* Support the `groupchat` scope to enable your app in pre-meeting and post-meeting chats. With the pre-meeting app experience, you can find and add meeting apps and do the pre-meeting tasks. With 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, you can retrieve reliable information for user ID and tenant ID using [tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
+* Meeting API URL parameters must have `meetingId`, `userId`, and `tenantId`. The parameters are available as part of the Teams Client SDK and bot activity. Also, you can retrieve reliable information for user ID and tenant ID using [tab SSO authentication](../tabs/how-to/authentication/auth-aad-sso.md).
* The `GetParticipant` API must have a bot registration and ID to generate auth tokens. For more information, see [bot registration and ID](../build-your-first-app/build-bot.md).
Before you work with apps for Teams meetings, you must have an understanding of
* 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.
+After you've 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 references
-The new meeting extensibilities provide APIs to transform the meeting experience. You can build apps or integrate existing apps within meeting lifecycle. You can use the APIs to make your app aware of the meeting. You can select the APIs you want to use to enhance the meeting experience.
+The following new meeting extensibilities provide APIs to transform the meeting experience:
+
+* Build apps or integrate existing apps within meeting lifecycle.
+* Use the APIs to make your app aware of the meeting.
+* Select the APIs you want to use to enhance the meeting experience.
The following table provides a list of these APIs:
The following table provides a list of these APIs:
|**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 |
+The following table provides the Bot Framework SDK methods for the APIs:
+
+|API|Bot Framework SDK method|
+|||
+|**GetParticipant**| `GetMeetingParticipantAsync (Microsoft.Bot.Builder.ITurnContext turnContext, string meetingId = default, string participantId = default, string tenantId = default, System.Threading.CancellationToken cancellationToken = default);` |
+|**NotificationSignal** | `activity.TeamsNotifyUser(true, "https://teams.microsoft.com/l/bubble/APP_ID?url=&height=&width=&title=<title>&completionBotId=BOT_APP_ID");` |
+|**Meeting Details** | `TeamsMeetingInfo (string id = default);` |
+ ### 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#get-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.
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. |
+|**participantId**| String | Yes | The participant ID is the user ID. It's available in Tab SSO, Bot Invoke, and Teams Client SDK. It's recommended to get a participant ID from the Tab SSO. |
+|**tenantId**| String | Yes | The tenant ID is required for the tenant users. It's available in Tab SSO, Bot Invoke, and Teams Client SDK. It's recommended to get a tenant ID from the Tab SSO. |
#### Example
The `GetParticipant` API returns 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.|
+| **403** | Get participant information isn't shared with the app. If the app isn't installed in the meeting, it triggers the most common error response 403. If the tenant admin disables or blocks the app during live site migration, 403 error response is triggered. |
| **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.|
The `NotificationSignal` API includes the following response codes:
||| | **201** | The activity with signal is successfully sent. | | **401** | The app responds with an invalid token. |
-| **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. |
+| **403** | The app is unable to send the signal. 403 response code can occur because of various reasons, such as the tenant admin disables and blocks the app during live site migration. In this case, the payload contains a detailed error message. |
+| **404** | The meeting chat doesn't exist. |
### Meeting Details API > [!NOTE] > This feature is currently available in [public developer preview](../resources/dev-preview/developer-preview-intro.md) only.
-The Meeting Details API enables your app to get static meeting metadata. These are data points that do not change dynamically.
+The Meeting Details API enables your app to get static meeting metadata. The metadata provides data points that don't change dynamically.
The API is available through Bot Services. #### Prerequisite
The JSON response body for Meeting Details API is as follows:
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.
-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.
+Actual start and end time of a meeting are different from scheduled start and end time. The meeting details API provides the scheduled start and end time. The event provides the actual start and end time.
### Prerequisite
The following code provides an example of meeting end event payload:
Your bot receives the event through the `OnEventActivityAsync` handler.
-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.
-
+To deserialize the json payload, a model object is introduced to get the metadata of a meeting. The metadata of a meeting is 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.
+
> [!NOTE] > * Get meeting ID from `turnContext.ChannelData`. > * Do not use conversation ID as meeting ID. > * Do not use meeting ID from meeting events payload `turncontext.activity.value`. - 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: ```csharp
public class MeetingStartEndEventValue
| 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 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) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-sidepanel/nodejs)|
-| Details Tab in Meeting | Microsoft Teams meeting extensibility sample for iteracting with Details Tab in-meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-details-tab/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-details-tab/nodejs)|
+| Details Tab in Meeting | Microsoft Teams meeting extensibility sample for interacting with Details Tab in-meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-details-tab/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-details-tab/nodejs)|
## See also
platform Auth Aad Sso Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md
The steps to register your app through the AAD portal are similar to the [tab SS
> > You must be aware of the following important restrictions: >
- > * Only user-level Microsoft Graph API permissions, such as email, profile, offline_access, and OpenId are supported. If you need access to other Microsoft Graph scopes, such as `User.Read` or `Mail.Read`, see [recommended workaround](../../../tabs/how-to/authentication/auth-aad-sso.md#apps-that-require-additional-graph-scopes).
+ > * Only user-level Microsoft Graph API permissions, such as email, profile, offline_access, and OpenId are supported. If you need access to other Microsoft Graph scopes, such as `User.Read` or `Mail.Read`, see [Get an access token with Graph permissions](../../../tabs/how-to/authentication/auth-aad-sso.md#get-an-access-token-with-graph-permissions).
> * Your application's domain name must be same as the domain name that you have registered for your AAD application. > * Multiple domains per app are currently not supported. > * Applications that use the `azurewebsites.net` domain are not supported because it is common and may be a security risk.
platform Map Use Cases https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/map-use-cases.md
While choosing the app scope, consider the following:
* An app can exist across scopes. * App capabilities, such as messaging extensions, follow users across scopes. * Users are often hesitant to add apps to Teams or channels.
-* Guest users can access content exposed in Teams or channels.
+* Guests can access content exposed in Teams or channels.
You can choose between personal scope and team or channel scope for your app depending on the following:
That being said, the best apps usually combine multiple features, creating an ap
## See also
-[Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md)
+[Build your first Microsoft Teams app](~/get-started/code-samples.md#build-your-first-microsoft-teams-app-overview)
platform Auth Aad Sso https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-aad-sso.md
The following image shows how the SSO process works:
6. The token is parsed in the tab application using JavaScript, to extract required information, such as the user's email address. > [!NOTE]
-> The `getAuthToken()` is only valid for consenting to a limited set of user-level APIs that is email, profile, offline_access and OpenId. It is not used for further Graph scopes such as `User.Read` or `Mail.Read`. For suggested workarounds, see [additional Graph scopes](#apps-that-require-additional-graph-scopes).
+> The `getAuthToken()` is only valid for consenting to a limited set of user-level APIs that is email, profile, offline_access and OpenId. It is not used for further Graph scopes such as `User.Read` or `Mail.Read`. For suggested workarounds, see [Get an access token with Graph permissions](#get-an-access-token-with-graph-permissions).
+ The SSO API also works in [task modules](../../../task-modules-and-cards/what-are-task-modules.md) that embed web content.
This section describes the tasks involved in creating a Teams tab that uses SSO.
> [!NOTE] > There are some important restrictions that you must know: >
-> * Only user-level Graph API permissions are supported that is, email, profile, offline_access, OpenId. If you must have access to other Graph scopes such as `User.Read` or `Mail.Read`, see [recommended workaround](#apps-that-require-additional-graph-scopes).
+> * Only user-level Graph API permissions are supported that is, email, profile, offline_access, OpenId. If you must have access to other Graph scopes such as `User.Read` or `Mail.Read`, see [Get an access token with Graph permissions](#get-an-access-token-with-graph-permissions).
> * It is important that your application's domain name is the same as the domain name you have registered for your AAD application. > * Currently multiple domains per app are not supported.
After you receive the access token in the success callback, you can decode the a
## Known limitations
-### Apps that require additional Graph scopes
+### Get an access token with Graph permissions
-Our current implementation for SSO only grants consent for user-level permissions that is email, profile, offline_access, OpenId and not for other APIs such as User.Read or Mail.Read. If your app needs further Graph scopes, the next section provides some enabling workarounds.
+Our current implementation for SSO only grants consent for user-level permissions that are not usable for making Graph calls. To get the permissions (scopes) needed to make a Graph call, SSO solutions must implement a custom web service to exchange the token got from the Teams JavaScript SDK for a token that includes the needed scopes. This is accomplished using AADΓÇÖs [on-behalf-of flow](/azure/active-directory/develop/v1-oauth2-on-behalf-of-flow).
#### Tenant Admin Consent
-The simplest approach is to get a tenant admin to pre-consent on behalf of the organization. This means users do not have to consent to these scopes and you can then be free to exchange the token server side using AADΓÇÖs [on-behalf-of flow](/azure/active-directory/develop/v1-oauth2-on-behalf-of-flow). This workaround is acceptable for internal line-of-business applications but is not enough for third-party developers who are not able to rely on tenant admin approval.
- A simple way of consenting on behalf of an organization as a tenant admin is to refer to `https://login.microsoftonline.com/common/adminconsent?client_id=<AAD_App_ID>`. #### Ask for additional consent using the Auth API
platform Create Personal Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-personal-tab.md
You must have an understanding of the following prerequisites:
> [!NOTE] > If you do not have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. The subscription remains active as long as you are using it for ongoing development. See [welcome to the Office 365 Developer Program](/office/developer-program/microsoft-365-developer-program).
-In addition, this project requires that you have the following installed in your development environment:
+Also, this project requires that you have the following installed in your development environment:
- Any text editor or IDE. You can install and use [Visual Studio Code](https://code.visualstudio.com/download) for free. - [Node.js/npm](https://nodejs.org/en/). Use the latest LTS version. The Node Package Manager (npm) is installed in your system with the installation of Node.js. -- After you have successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following in your command prompt:
+- After you have successfully installed Node.js, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following command in your command prompt:
```bash npm install yo gulp-cli --global ``` -- Install the Microsoft Teams Apps generator by entering the following in your command prompt:
+- Install the Microsoft Teams Apps generator by entering the following command in your command prompt:
```bash npm install generator-teams --global
In addition, this project requires that you have the following installed in your
**What is your solution name?**
- This is your project name. You can accept the suggested name by selecting the **Enter** key.
+ The solution name is your project name. You can accept the suggested name by selecting **Enter**.
**Where do you want to place the files?**
- You are currently in your project directory. Select **Enter**.
+ You're currently in your project directory. Select **Enter**.
**Title of your Microsoft Teams app project?**
- This is your app package name and will be used in the app manifest and description. Enter a title or select **Enter** to accept the default name.
+ The title is your app package name and is used in the app manifest and description. Enter a title or select **Enter** to accept the default name.
**Your (company) name? (max 32 characters)**
In addition, this project requires that you have the following installed in your
**Quick scaffolding? (Y/n)**
- The default is yes; enter **n** to enter your Microsoft Partner Id.
+ The default is yes; enter **n** to enter your Microsoft Partner ID.
**Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)**
- This field is not required and should only be used if you are already part of the [Microsoft Partner Network](https://partner.microsoft.com).
+ This field isn't required and must be used only if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com).
**What do you want to add to your project?**
In addition, this project requires that you have the following installed in your
**The URL where you will host this solution?**
- By default the generator suggests an Azure Web Sites URL. You are only testing your app locally, therefore, a valid URL is not necessary.
+ By default, the generator suggests an Azure Web Sites URL. You're only testing your app locally, so a valid URL isn't necessary.
**Would you like show a loading indicator when your app/tab loads?**
In addition, this project requires that you have the following installed in your
**Would you like to include Test framework and initial tests? (y/N)**
- Choose **not** to include a test framework for this project. The default is yes, enter **n**.
+ Choose **not** to include a test framework for this project. The default is no, enter **n**.
+
+ **Would you like to include ESLint support? (y/N)**
+
+ Choose not to include ESLint support. The default is no, enter **n**.
**Would you like to use Azure Applications Insights for telemetry? (y/N)**
In addition, this project requires that you have the following installed in your
**To add a personal tab to this application, create a content page, and update existing files**
-1. In your code editor, create a new HTML file, **personal.html** and add the following markup:
+1. In your code editor, create a new HTML file **personal.html** and add the following markup:
```html <!DOCTYPE html>
At a command prompt, open your project directory to complete the next tasks.
#### Create the app package
-You must have an app package to test your tab in Teams. It is a zip folder that contains the following required files:
+You must have an app package to test your tab in Teams. It's a zip folder that contains the following required files:
- A **full color icon** measuring 192 x 192 pixels. - A **transparent outline icon** measuring 32 x 32 pixels.
gulp build
#### Run your application in localhost
-1. Start a local web server by entering the following in the command prompt:
+1. Start a local web server by entering the following command in the command prompt:
```bash gulp serve ```
-1. Enter `http://localhost:3007/<yourDefaultAppNameTab>/` in your browser, replace **<yourDefaultAppNameTab>** with your tab name, and view your application's home page as shown in the following image:
+1. Enter `http://localhost:3007/<yourDefaultAppNameTab>/` in your browser, replace `**<yourDefaultAppNameTab>**` with your tab name, and view your application's home page as shown in the following image:
![home page screenshot](~/assets/images/tab-images/homePage.png)
gulp build
### Establish a secure tunnel to your tab
-Microsoft Teams is a cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams does not allow local hosting. You must either publish your tab to a public URL or use a proxy that exposes your local port to an internet-facing URL.
+Microsoft Teams is a cloud-based product and requires that your tab content is available from the cloud using HTTPS endpoints. Teams doesn't allow local hosting. Publish your tab to a public URL or use a proxy that exposes your local port to an internet-facing URL.
-To test your tab extension, you can use [ngrok](https://ngrok.com/docs), which is built into this application. Ngrok is a reverse proxy software tool that creates a tunnel to your locally running web server's publicly-available HTTPS endpoints. Your server's web endpoints are available during the current session on your computer. When the computer is shut down or goes to sleep, the service is no longer available.
+To test your tab extension, use [ngrok](https://ngrok.com/docs), which is built into this application. Ngrok is a reverse proxy software tool. Ngrok creates a tunnel to your locally running web server's publicly available HTTPS endpoints. Your server's web endpoints are available during the current session on your computer. When the computer is shut down or goes to sleep, the service is no longer available.
-In your command prompt, exit localhost and enter the following:
+In your command prompt, exit localhost and enter the following command:
```bash gulp ngrok-serve
gulp ngrok-serve
**To upload your application to Teams**
-1. Go to Microsoft Teams. If you use the [web-based version](https://teams.microsoft.com) you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
+1. Go to Microsoft Teams. If you use the [web-based version](https://teams.microsoft.com), you can inspect your front-end code using your browser's [developer tools](~/tabs/how-to/developer-tools.md).
1. From the lower left corner, select **Apps**. 1. From the lower left corner, choose **Upload a custom app**. 1. Go to your project directory, browse to the **./package** folder, select the zip folder, and choose **Open**.
gulp ngrok-serve
### View your personal tab
-In the navigation bar located at the far left in Teams, select the ellipses &#x25CF;&#x25CF;&#x25CF; and choose your app from the list.
+In the navigation bar at the far left in Teams, select ellipses &#x25CF;&#x25CF;&#x25CF; and choose your app.
# [ASP.NET Core](#tab/aspnetcore) ### Create a custom personal tab using ASP.NET Core
-You can create a custom personal tab using C# and ASP.NET Core Razor pages. [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) is also used to finalize your app manifest and deploy your tab to Teams.
+You can create a custom personal tab using C# and ASP.NET Core Razor pages. [App Studio](~/concepts/build-and-test/app-studio-overview.md) is also used to complete your app manifest and deploy your tab to Teams.
### Prerequisites for personal tab
You must have an understanding of the following prerequisites:
- Use App Studio to import your application to Teams. To install App Studio, select **Apps** ![Store App](~/assets/images/tab-images/storeApp.png) at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.
-In addition, this project requires that you have the following installed in your development environment:
+Also, this project requires that you have the following installed in your development environment:
-- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.
+- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you don't already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.
-- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).
+- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).
### Get the source code
Alternately, you can retrieve the source code by downloading the zip folder and
#### Startup.cs
-This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:
+This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:
```csharp public void ConfigureServices(IServiceCollection services)
This folder contains the following required app package files:
- A **transparent outline icon** measuring 32 x 32 pixels. - A **manifest.json** file that specifies the attributes of your app.
-These files need to be zipped in an app package for use in uploading your tab to Teams. Microsoft Teams loads the `contentUrl` specified in your manifest, embeds it in an <iframe\>, and renders it in your tab.
+These files must be zipped in an app package for use in uploading your tab to Teams. Microsoft Teams loads the `contentUrl` specified in your manifest, embeds it in an <iframe\>, and renders it in your tab.
#### .csproj
In the Visual Studio Solution Explorer window, right-click on the project and se
#### _Layout.cshtml
-For your tab to display in Teams, you must include the **Microsoft Teams JavaScript client SDK** and include a call to `microsoftTeams.initialize()` after your page loads. This is how your tab and the Teams app communicate:
+For your tab to display in Teams, you must include the **Microsoft Teams JavaScript client SDK** and include a call to `microsoftTeams.initialize()` after your page loads. Your tab and the Teams app communicate in this manner:
Go to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tags section:
Ensure you save your updated **PersonalTab.cshtml**.
### Establish a secure tunnel to your tab for Teams
-Microsoft Teams is a cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams does not allow local hosting. You must either publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL.
+Microsoft Teams is a cloud-based product and requires that your tab content is available from the cloud using HTTPS endpoints. Teams doesn't allow local hosting. Publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL.
To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it.
To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoin
ngrok http https://localhost:44325 -host-header="localhost:44325" ```
- Ngrok listens to requests from the internet and routes them to your application when it is running on port 44325. It resembles `https://y8rPrT2b.ngrok.io/` where **y8rPrT2b** is replaced by your ngrok alpha-numeric HTTPS URL.
+ Ngrok listens to requests from the internet and routes them to your application when it's running on port 44325. It resembles `https://y8rPrT2b.ngrok.io/` where **y8rPrT2b** is replaced by your ngrok alpha-numeric HTTPS URL.
Ensure that you keep the command prompt with ngrok running, and make a note of the URL.
In Visual Studio, press **F5** or choose **Start Debugging** from your applicati
1. Go to **App Studio** and select the **Manifest editor** tab.
-1. Select **Import an existing app** in the **Manifest editor** to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It is available from the following path:
+1. Select **Import an existing app** in the **Manifest editor** to begin updating the app package for your tab. The source code comes with its own partially complete manifest. The name of your app package is **tab.zip**. It's available from the following path:
```bash /bin/Debug/netcoreapp2.2/tab.zip
In Visual Studio, press **F5** or choose **Start Debugging** from your applicati
#### Update your app package with Manifest editor
-After you have uploaded your app package into App Studio, you must configure it.
+After you've uploaded your app package into App Studio, you must configure it.
-Select the tile for your newly imported tab in the right pane of the Manifest editor welcome page.
+Select the tile for your newly imported tab of the Manifest editor welcome page.
-There is a list of steps on the left side of the Manifest editor, and on the right, a list of properties that must have values for each of those steps. Much of the information has been provided by your **manifest.json** but there are fields that you must update.
+There's a list of steps on the left side of the Manifest editor. On the right side of the Manifest editor there's a list of properties that must have values for each of those steps. Much of the information has been provided by your **manifest.json** but there are fields that you must update.
##### Details: App details
In the **Domains and permissions** section, **Domains from your tabs** must cont
### Create a custom personal tab with ASP.NET Core MVC
-You can create a custom personal tab using C# and ASP.NET Core MVC. [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) is also used to finalize your app manifest and deploy your tab to Teams.
+You can create a custom personal tab using C# and ASP.NET Core MVC. [App Studio for Microsoft Teams](~/concepts/build-and-test/app-studio-overview.md) is also used to complete your app manifest and deploy your tab to Teams.
### Prerequisites for personal tab with ASP.NET Core MVC
You can create a custom personal tab using C# and ASP.NET Core MVC. [App Studio
- Use App Studio to import your application to Teams. To install App Studio, select **Apps** ![Store App](~/assets/images/tab-images/storeApp.png) at the lower left corner of the Teams app, and search for **App Studio**. After you find the tile, select it and choose **Add** in the pop-up dialog box to install it.
-In addition, this project requires that you have the following installed in your development environment:
+Also, this project requires that you have the following installed in your development environment:
-- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you do not already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.
+- The current version of the Visual Studio IDE with the **.NET CORE cross-platform development** workload installed. If you don't already have Visual Studio, you can download and install the latest [Microsoft Visual Studio Community](https://visualstudio.microsoft.com/downloads) version for free.
-- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).
+- The [ngrok](https://ngrok.com) reverse proxy tool. Use ngrok to create a tunnel to your locally running web server's publicly available HTTPS endpoints. You can [download ngrok](https://ngrok.com/download).
### Get the source code
Alternately, you can retrieve the source code by downloading the zip folder and
#### Startup.cs
-This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template does not enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:
+This project was created from an ASP.NET Core 2.2 Web Application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code:
``` csharp public void ConfigureServices(IServiceCollection services)
This folder contains the following required app package files:
* A **transparent outline icon** measuring 32 x 32 pixels. * A **manifest.json** file that specifies the attributes of your app.
-These files need to be zipped in an app package for use in uploading your tab to Teams. Microsoft Teams loads the `contentUrl` specified in your manifest, embeds it in an IFrame, and renders it in your tab.
+These files must be zipped in an app package for use in uploading your tab to Teams. Microsoft Teams loads the `contentUrl` specified in your manifest, embeds it in an IFrame, and renders it in your tab.
#### .csproj
In the Visual Studio Solution Explorer window, right-click on the project and se
#### Views
-These are the different views in ASP.NET Core MVC:
+These views are the different views in ASP.NET Core MVC:
* Home: ASP.NET Core treats files called **Index** as the default or home page for the site. When your browser URL points to the root of the site, **Index.cshtml** is displayed as the home page for your application.
The controllers use the `ViewBag` property to transfer values dynamically to the
ngrok http https://localhost:44345 -host-header="localhost:44345" ```
- Ngrok listens to requests from the internet and routes them to your application when it is running on port 44325. It resembles `https://y8rPrT2b.ngrok.io/` where **y8rPrT2b** is replaced by your ngrok alpha-numeric HTTPS URL.
+ Ngrok listens to requests from the internet and routes them to your application when it's running on port 44325. It resembles `https://y8rPrT2b.ngrok.io/` where **y8rPrT2b** is replaced by your ngrok alpha-numeric HTTPS URL.
Ensure you keep the command prompt with ngrok running, and make a note of the URL.