| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Apps Upload | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/apps-upload.md | You can sideload Microsoft Teams apps without having to publish to your organiza You can sideload your app to a team, chat, meeting, or for personal use depending on how you configured your app's scope. -1. Log in to the Teams client with your [Microsoft 365 development account](~/build-your-first-app/build-and-run.md#prerequisites). +1. Log in to the Teams client with your [Microsoft 365 development account](https://developer.microsoft.com/en-us/microsoft-365/dev-program). 1. Select **Apps** and select **Manage your apps**. 1. Select **Upload a custom app**.-1. Select your app package .zip file, the following screen appears: +1. Select your app package .zip file. +2. Add your app to Teams as per your requirement:</br> - :::image type="content" source="~/assets/images/build-your-first-app/add-teams-app.png" alt-text="Screenshot showing an example of a Teams app install dialog."::: + a. Select **Add** to add your personal app.</br> + b. Use the dropdown menu to add your app to a Team or chat. -1. Select **Add** to add your app to Teams. + ## Troubleshooting |
| platform | Browser Device Permissions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/browser-device-permissions.md | -> [!NOTE] -> The latest update on how device permissions are handled in the browser is currently available in [public developer preview](../../resources/dev-preview/developer-preview-intro.md) only. -> This update will be generally available (GA) starting February 01, 2022 and finish rolling out late February. - Teams app that require device permissions, such as camera or microphone access, now require users to manually grant permission at a per app level in the web browser. Previously, the browser handled how to grant access permissions, but now these permissions are handled in Microsoft Teams. This has implications on how you design your application and if they require these permissions in the browser. ## Enable app's device permissions |
| platform | Auth Aad Sso | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-aad-sso.md | To register your app through the Azure AD portal, follow these steps: 1. Under **Manage**, select **Expose an API**. > [!NOTE]- > If you are building an app with a bot and a tab, enter the Application ID URI as `api://fully-qualified-domain-name.com/botid-{YourBotId}`. + > + > * If you are building an app with a bot and a tab, enter the Application ID URI as `api://fully-qualified-domain-name.com/botid-{YourBotId}`. + > + > * Use lower case letters for domain name, don't use upper case. For example, to create an app service or web app, enter base resource name as `demoapplication`, then the URL will be `https://demoapplication.azurewebsites.net`. But if you use base resource name as `DemoApplication`, then the URL will be `https://DemoApplication.azurewebsites.net` and this supports in desktop, web, and iOS, but not in android. 1. Select the **Set** link to generate the Application ID URI in the form of `api://{AppID}`. Insert your fully qualified domain name with a forward slash "/" appended to the end, between the double forward slashes and the GUID. The entire ID must have the form of `api://fully-qualified-domain-name.com/{AppID}`. ┬▓ For example, `api://subdomain.example.com/00000000-0000-0000-0000-000000000000`. The fully qualified domain name is the human readable domain name from which your app is served. If you're using a tunneling service such as ngrok, you must update this value whenever your ngrok subdomain changes. 1. Select **Add a scope**. In the panel that opens, enter **access_as_user** as the **Scope name**. |
| platform | Create Personal Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-personal-tab.md | ms.localizationpriority: medium keywords: yeoman ASP.NET MVC package appmanifest conversation domain permission store+zone_pivot_groups: teams-app-environment # Create a personal tab -## Create a custom personal tab +Personal tabs, along with personally-scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left pane for easy access. You can also [reorder](#reorder-static-personal-tabs) and add [`registerOnFocused` API](#add-registeronfocused-api-for-tabs-or-personal-apps) for personal tabs. -You can create a personal tab using Node.js and the Yeoman Generator, ASP.NET Core, or ASP.NET Core MVC. For a personal tab on Microsoft Teams mobile, see [tabs on mobile](~/tabs/design/tabs-mobile.md). +Ensure that you have all the [prerequsites](~/tabs/how-to/tab-requirements.md) to build your personal tab. -# [Node.js](#tab/nodejs) -### Create a custom personal tab using Node.js and the Yeoman Generator +## Create a personal tab with Node.js -> [!NOTE] -> This article follows the steps outlined in the [build your first Microsoft Teams app](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App) Wiki found in the Microsoft OfficeDev GitHub repository. +To create a personal tab with Node.js -You can create a custom personal tab using the [Teams Yeoman generator](https://github.com/OfficeDev/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App). The application is also uploaded to Teams. +1. At the command prompt, install the [Yeoman](https://yeoman.io/) and [gulp-cli](https://www.npmjs.com/package/gulp-cli) packages by entering the following command after installing the Node.js: -### Prerequisites for Teams apps --You must have an understanding of the following prerequisites: --- You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md).-- > [!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). --Also, this project requires that you have the following installed in your development environment: --- Any text editor or IDE. You can install and use [Microsoft 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 command in your command prompt:-- ```bash + ```cmd npm install yo gulp-cli --global ``` -- Install the Microsoft Teams Apps generator by entering the following command in your command prompt:+1. At the command prompt, install Microsoft Teams App generator by entering the following command: - ```bash + ```cmd npm install generator-teams --global ``` -### Generate your project +Following are the steps to create a personal tab: -**To generate your project** +1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab) +1. [Add a content page to the personal tab](#add-a-content-page-to-the-personal-tab) +1. [Create your app package](#create-your-app-package) +1. [Build and run your application](#build-and-run-your-application) +1. [Establish a secure tunnel to your personal tab](#establish-a-secure-tunnel-to-your-tab) +1. [Upload your application to Teams](#upload-your-application-to-teams) -1. At a command prompt, create a new directory for your tab project. +### Generate your application with a personal tab -1. To start the generator, go to your new directory and enter the following command: +1. At the command prompt, create a new directory for your personal tab. - ```bash +1. Enter the following command in your new directory to start the Microsoft Teams App generator: ++ ```cmd yo teams ``` -1. Next, provide a series of values that are used in your application's **manifest.json** file: +1. Provide your values to a series of questions prompted by Microsoft Teams App generator to update your **manifest.json** file. -  + :::image type="content" source="~/assets/images/tab-images/teamsTabScreenshot.PNG" alt-text="Teams generator" border="true"::: - **What is your solution name?** + <details> + <summary><b>Series of questions to update your manifest.json file</b></summary> - The solution name is your project name. You can accept the suggested name by selecting **Enter**. + * **What is your solution name?** - **Where do you want to place the files?** + The solution name is your project name. You can accept the suggested name by selecting **Enter**. - You're currently in your project directory. Select **Enter**. + * **Where do you want to place the files?** - **Title of your Microsoft Teams app project?** + You're currently in your project directory. Select **Enter**. - 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. + * **Title of your Microsoft Teams app project?** - **Your (company) name? (max 32 characters)** + 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 will be used in the app manifest. Enter a company name or select **Enter** to accept the default name. + * **Your (company) name? (max 32 characters)** - **Which manifest version would you like to use?** + Your company name will be used in the app manifest. Enter a company name or select **Enter** to accept the default name. - Select the default schema. + * **Which manifest version would you like to use?** - **Quick scaffolding? (Y/n)** + Select the default schema. - The default is yes; enter **n** to enter your Microsoft Partner ID. + * **Quick scaffolding? (Y/n)** - **Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)** + The default is yes; enter **n** to enter your Microsoft Partner ID. - This field isn't required and must be used only if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com). + * **Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)** - **What do you want to add to your project?** + This field isn't required and must be used only if you're already part of the [Microsoft Partner Network](https://partner.microsoft.com). - Select **( * ) A Tab**. + * **What do you want to add to your project?** - **The URL where you will host this solution?** + Select **( * ) A Tab**. - By default, the generator suggests an Azure Web Sites URL. You're only testing your app locally, so a valid URL isn't necessary. + * **The URL where you will host this solution?** - **Would you like show a loading indicator when your app/tab loads?** + By default, the generator suggests an Azure Web Sites URL. You're only testing your app locally, so a valid URL isn't necessary. - Choose **not** to include a loading indicator when your app or tab loads. The default is no, enter **n**. + * **Would you like show a loading indicator when your app/tab loads?** - **Would you like personal apps to be rendered without a tab header-bar?** + Choose **not** to include a loading indicator when your app or tab loads. The default is no, enter **n**. - Choose **not** to include personal apps to be rendered without a tab header-bar. Default is no, enter **n**. + * **Would you like personal apps to be rendered without a tab header-bar?** - **Would you like to include Test framework and initial tests? (y/N)** + Choose **not** to include personal apps to be rendered without a tab header-bar. Default is no, enter **n**. - Choose **not** to include a test framework for this project. The default is no, enter **n**. + * **Would you like to include Test framework and initial tests? (y/N)** - **Would you like to include ESLint support? (y/N)** + Choose **not** to include a test framework for this project. The default is no, enter **n**. - Choose not to include ESLint support. The default is no, enter **n**. + * **Would you like to include ESLint support? (y/N)** - **Would you like to use Azure Applications Insights for telemetry? (y/N)** + Choose not to include ESLint support. The default is no, enter **n**. - Choose **not** to include [Azure Application Insights](/azure/azure-monitor/app/app-insights-overview). The default is no; enter **n**. + * **Would you like to use Azure Applications Insights for telemetry? (y/N)** - **Default Tab Name (max 16 characters)?** + Choose **not** to include [Azure Application Insights](/azure/azure-monitor/app/app-insights-overview). The default is no; enter **n**. - Name your tab. This tab name is used throughout your project as a file or URL path component. + * **Default Tab Name (max 16 characters)?** - **What kind of Tab would you like to create?** + Name your tab. This tab name is used throughout your project as a file or URL path component. - Use the arrow keys to select **Personal (static)**. + * **What kind of Tab would you like to create?** - **Do you require Microsoft Azure Active Directory (Azure AD) Single-Sign-On support for the tab?** + Use the arrow keys to select **Personal (static)**. - Choose **not** to include Azure AD Single-Sign-On support for the tab. The default is yes, enter **n**. + * **Do you require Microsoft Azure Active Directory (Azure AD) Single-Sign-On support for the tab?** - > [!IMPORTANT] - > The path component **yourDefaultTabNameTab** is the value that you entered in the generator for **Default Tab Name** plus the word **Tab**. - > - > For example: DefaultTabName: **MyTab** > **/MyTabTab/** + Choose **not** to include Azure AD Single-Sign-On support for the tab. The default is yes, enter **n**. -### Add a personal tab + </details> -**To add a personal tab to this application, create a content page, and update existing files** +### Add a content page to the personal tab -1. In your code editor, create a new HTML file **personal.html** and add the following markup: +Create a content page and update the existing files of the personal tab application: ++1. Create a new **personal.html** file in your Visual Studio Code with the following markup: ```html <!DOCTYPE html> Also, this project requires that you have the following installed in your develo </html> ``` -1. Save **personal.html** in your application's **web** folder in the following location: +1. Save **personal.html** in your application's **public** folder in the following location: - ```bash - ./src/app/web/<yourDefaultTabNameTab>/personal.html + ``` + ./src/public/<yourDefaultTabNameTab>/personal.html ``` -1. Open **manifest.json** from the following location in your code editor: +1. Open **manifest.json** from the following location in your Visual Studio Code: - ```bash - ./src/manifest/manifest.json/ + ``` + ./src/manifest/manifest.json ``` 1. Add the following to the empty `staticTabs` array (`staticTabs":[]`) and add the following JSON object: Also, this project requires that you have the following installed in your develo } ``` + > [!IMPORTANT] + > The path component **yourDefaultTabNameTab** is the value that you entered in the generator for **Default Tab Name** plus the word **Tab**. + > + > For example: DefaultTabName is **MyTab** then **/MyTabTab/** + 1. Update the **contentURL** path component **yourDefaultTabNameTab** with your actual tab name. 1. Save the updated **manifest.json** file. -1. To provide your content page in an IFrame, open **Tab.ts** in your code editor from the following path: +1. Open **Tab.ts** in your Visual Studio Code from the following path to provide your content page in an IFrame: ```bash- ./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts + ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts ``` 1. Add the following to the list of IFrame decorators: ```typescript- @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html") + @PreventIframe("/<yourDefaultTabName Tab>/personal.html") ``` -1. Save the updated **Tab.ts** file. Your tab code is complete. --### Build and run your application --At a command prompt, open your project directory to complete the next tasks. +1. Save the updated file. Your tab code is complete. -#### Create the app package +### Create your app package -You must have an app package to test your tab in Teams. It's a zip folder that contains the following required files: +You must have an app package to build and run your application in Teams. The app package is created through a gulp task that validates the **manifest.json** file and generates the zip folder in the **./package** directory. At the command prompt, enter the following command: -- A **full color icon** measuring 192 x 192 pixels.-- A **transparent outline icon** measuring 32 x 32 pixels.-- A **manifest.json** file that specifies the attributes of your app.--The package is created through a gulp task that validates the manifest.json file and generates the zip folder in the **./package directory**. In the command prompt, enter the following command: --```bash +```cmd gulp manifest ``` +### Build and run your application + #### Build your application -The build command transpiles your solution into the **./dist** folder. Enter the following command in the command prompt: +Enter the following command at the command prompt to transpile your solution into the **./dist** folder: -```bash +```cmd gulp build ``` -#### Run your application in localhost +#### Run your application -1. Start a local web server by entering the following command in the command prompt: +1. At the command prompt enter the following command to start a local web server: - ```bash + ```cmd 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 to view your application's home page. -  + :::image type="content" source="~/assets/images/tab-images/homePage.png" alt-text="Default Tab" border="true"::: -1. To view your personal tab, go to `http://localhost:3007/<yourDefaultAppNameTab>/personal.html`. +1. Browse `http://localhost:3007/<yourDefaultAppNameTab>/personal.html`, to view your personal tab. - > + :::image type="content" source="~/assets/images/tab-images/personalTab.PNG" alt-text="Default html Tab" border="true"::: ### Establish a secure tunnel to your tab -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, 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. +At the command prompt exit the localhost and enter the following command to establish a secure tunnel to your tab: -In your command prompt, exit localhost and enter the following command: --```bash +```cmd gulp ngrok-serve ``` > [!IMPORTANT]-> After your tab has been uploaded to Microsoft Teams through **ngrok**, and successfully saved, you can view it in Teams until your tunnel session ends. +> After your tab is uploaded to Microsoft Teams through **ngrok**, and successfully saved, you can view it in Teams until your tunnel session ends. ### Upload your application to Teams -**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. 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**. --  +1. Go to Microsoft Teams and select **Store** :::image type="content" source="~/assets/images/tab-images/store.png" alt-text="Teams Store":::. +1. Select **Manage your apps** +1. Select **Publish an app** and **Upload a custom app**. -1. Select **Add** in the pop-up dialog box. Your tab is uploaded to Teams. + :::image type="content" source="~/assets/images/tab-images/publish-app.png" alt-text="Upload custom app" border="true"::: -  --### View your personal tab +1. Go to your project directory, browse to the **./package** folder, select the zip folder, and choose **Open**. -In the navigation bar at the far left in Teams, select ellipses ●●● and choose your app. + :::image type="content" source="~/assets/images/tab-images/addingpersonaltab.png" alt-text="Adding your personal tab" border="true"::: -# [ASP.NET Core](#tab/aspnetcore) +1. Select **Add** in the pop-up window. Your tab is uploaded to Teams. -### Create a custom personal tab using ASP.NET Core + :::image type="content" source="~/assets/images/tab-images/personaltabuploaded.png" alt-text="Personal tab uploaded" border="true"::: -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. +1. In the left pane of Teams, select ellipses ●●● and then choose your uploaded app to view your personal tab. -### Prerequisites for personal tab + Now you have succesfully created and added your personal tab in Teams. + + As you have your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) and add [`registerOnFocused` API](#add-registeronfocused-api-for-tabs-or-personal-apps) for your personal tab. -You must have an understanding of the following prerequisites: -- You must have an Office 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). - > [!NOTE] - > If you do not have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. +## Create a personal tab with ASP.NET Core -- Use App Studio to import your application to Teams. To install App Studio, select **Apps**  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.+You can create a custom personal tab using C# and ASP.NET Core Razor pages. To create a personal tab with ASP.NET Core -Also, this project requires that you have the following installed in your development environment: +1. At the command prompt, create a new directory for your tab project. -- 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.+1. Clone the sample repository into your new directory using the following command or you can download the [source code](https://github.com/OfficeDev/Microsoft-Teams-Samples) and extract the files: -- 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).+ ```cmd + git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git + ``` -### Get the source code +Following are the steps to create a personal tab: -At a command prompt, create a new directory for your tab project. A simple project is provided to get you started. Clone the sample repository into your new directory using the following command: +1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab-1) +1. [Update and run your application](#update-and-run-your-application) +1. [Establish a secure tunnel to your tab](#establish-a-secure-tunnel-to-your-tab-1) +1. [Update your app package with Developer Portal](#update-your-app-package-with-developer-portal) +1. [Preview your app in Teams](#preview-your-app-in-teams) -```bash -git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git -``` +### Generate your application with a personal tab -Alternately, you can retrieve the source code by downloading the zip folder and extracting the files. +1. Open Visual Studio and select **Open a project or solution**. -**To build and run the tab project** +1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **razor-csharp** folder and open **PersonalTab.sln**. -1. After you get the source code, go to Visual Studio and select **Open a project or solution**. -1. Go to the tab application directory and open **PersonalTab.sln**. -1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu. -1. In a browser, go to the following URLs to verify the application loaded properly: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application has loaded properly. In a browser, go to the following URLs: - - `http://localhost:44325/` - - `http://localhost:44325/personal` - - `http://localhost:44325/privacy` - - `http://localhost:44325/tou` + * <http://localhost:3978/> + * <http://localhost:3978/personalTab> + * <http://localhost:3978/privacy> + * <http://localhost:3978/tou> -### Review the source code +<details> +<summary><b>Review the source code</b></summary> #### 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 doesn't 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 3.1 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) ASP.NET Core treats files called **Index** as the default or home page for the s This folder contains the following required app package files: -- A **full color icon** measuring 192 x 192 pixels.-- A **transparent outline icon** measuring 32 x 32 pixels.-- A **manifest.json** file that specifies the attributes of your app.+* A **full color icon** measuring 192 x 192 pixels. +* A **transparent outline icon** measuring 32 x 32 pixels. +* A **manifest.json** file that specifies the attributes of your app. 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 select **Edit Project File**. At the end of the file, you see the following code that creates and updates your zip folder when the application builds: +In Visual Studio Solution Explorer, right-click on the project and select **Edit Project File**. At the end of the file, you can see the following code that creates and updates your zip folder when the application builds: ```xml <PropertyGroup> In the Visual Studio Solution Explorer window, right-click on the project and se </ItemGroup> ``` -### Update your application for Teams +</details> -#### _Layout.cshtml +### Update and run your application -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: +1. Go to the **Pages** > **Shared** folder and open **_Layout.cshtml** and add the following to the `<head>` tags section: -Go to the **Shared** folder, open **_Layout.cshtml**, and add the following to the `<head>` tags section: --```html -<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> -<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script> -``` --#### PersonalTab.cshtml --Open **PersonalTab.cshtml** and update the embedded `<script>` tags by calling `microsoftTeams.initialize()`. --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 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 establish a secure tunnel to your tab** --1. At a command prompt in the root of your project directory, run the following command: -- ```bash - ngrok http https://localhost:44325 -host-header="localhost:44325" + ```HTML + <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> + <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script> ``` - 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. +1. Open **PersonalTab.cshtml** from **Pages** folder and add `microsoftTeams.initialize()` in the `<script>` tags and save. - Ensure that you keep the command prompt with ngrok running, and make a note of the URL. +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu. -2. Verify that **ngrok** is running and working properly by opening your browser and going to your content page through the ngrok HTTPS URL that was provided in your command prompt window. --> [!TIP] -> You need to have both your application in Visual Studio and ngrok running to complete the steps provided in this article. If you need to stop running your application in Visual Studio to work on it, **keep ngrok running**. It listens and resumes routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service, it returns a new URL and you have to update every place that uses that URL. --#### Run your application --In Visual Studio, press **F5** or choose **Start Debugging** from your application's **Debug** menu. +### Establish a secure tunnel to your tab -### Upload your tab with App Studio for Teams +At the command prompt in the root of your project directory run the following command to establish a secure tunnel to your tab: -> [!NOTE] -> **App Studio** can be used to edit your **manifest.json** file and upload the completed package to Teams. You can also manually edit **manifest.json**. If you do, ensure that you build the solution again to create the **Tab.zip** file to upload. +```cmd +ngrok http 3978 --host-header=localhost +``` -**To upload your tab with App Studio** +### Update your app package with Developer Portal -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 **Developer portal** in Teams. -1. Go to **App Studio** and select the **Manifest editor** tab. +1. Open **Apps** and select **Import app**. -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: +1. The name of your app package is **tab.zip**. It's available in the following path: - ```bash - /bin/Debug/netcoreapp2.2/tab.zip + ``` + /bin/Debug/netcoreapp3.1/tab.zip ``` -1. Upload **tab.zip** to **App Studio**. --#### Update your app package with Manifest editor --After you've uploaded your app package into App Studio, you must configure it. --Select the tile for your newly imported tab of the Manifest editor welcome page. --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 **App details** section: --1. Under **Identification**, select **Generate** to generate a new App ID for your app. --1. Under **Developer information**, update **Website** with your **ngrok** HTTPS URL. --  --1. Under **App URLs**, update the **Privacy statement** to `https://<yourngrokurl>/privacy` and **Terms of use** to `https://<yourngrokurl>/tou`>. --##### Capabilities: Tabs --In the **Tabs** section: --1. Under **Add a personal tab**, select **Add**. A pop-up dialog box appears. +1. Select **tab.zip** and open it in the Developer Portal. -1. Enter a name for the personal tab in **Name**. +1. A default **App ID** is created and populated in **Basic information** section. -1. Enter the **Entity ID**. +1. Add the Short and Long description for your app in **Descriptions**. -1. Update **Content URL** with `https://<yourngrokurl>/personalTab`. +1. In **Developer Information**, add the required details and in **Website (must be a valid HTTPS URL)** give your ngrok HTTPS URL. - Leave the **Website URL** field blank. +1. In **App URLs**, update the Privacy policy to `https://<yourngrokurl>/privacy` and Terms of use to `https://<yourngrokurl>/tou` and save. -  +1. In **App features**, select Personal app and enter the Name and update the **Content URL** with `https://<yourngrokurl>/personalTab`. Leave the Website URL field blank. 1. Select **Save**. -##### Finish: Domains and permissions --In the **Domains and permissions** section, **Domains from your tabs** must contain your ngrok URL without the HTTPS prefix `<yourngrokurl>.ngrok.io/`. --###### Finish: Test and distribute --> [!IMPORTANT] -> On the right, in **Description**, you see the following warning: -> -> ⚠ **The 'validDomains' array cannot contain a tunneling site...** -> -> This warning can be ignored while testing your tab. --1. In the **Test and Distribute** section, select **Install**. +1. In the Domains section, domains from your tabs must contain your ngrok URL without the HTTPS prefix `<yourngrokurl>.ngrok.io`. -1. In the pop-up dialog box, select **Add** and your tab is displayed. +### Preview your app in Teams -  +1. Select **Preview in Teams** from the Developer Portal toolbar. The Developer Portal informs you that your app is sideloaded successfully. -### View your personal tab in Teams +1. Select **Manage your apps**. Your app is listed in the sideloaded apps. -1. In the navigation bar located at the far left of the Teams app, select the ellipses ●●●. A list of personal apps is shown. +1. Find your app using the search , select the three-dots in its row. -1. Select your tab from the list to view it. +1. Select the **View** option. The **Add** page appears for your app. -# [ASP.NET Core MVC](#tab/aspnetcoremvc) +1. Select **Add** to load the tab on Teams. Your tab is now available in Teams. -### Create a custom personal tab with ASP.NET Core MVC + :::image type="content" source="~/assets/images/tab-images/personaltabaspnetuploaded.png" alt-text="Default Tab" border="true"::: -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. + Now you have succesfully created and added your personal tab in Teams. + + As you have your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) and add [`registerOnFocused` API](#add-registeronfocused-api-for-tabs-or-personal-apps) for your personal tab. -### Prerequisites for personal tab with ASP.NET Core MVC -- You must have a Microsoft 365 tenant and a team configured with **Allow uploading custom apps** enabled. For more information, see [prepare your Office 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). - > [!NOTE] - > If you do not have a Microsoft 365 account, you can sign up for a free subscription through the [Microsoft Developer Program](https://developer.microsoft.com/en-us/microsoft-365/dev-program). The subscription remains active as long as you are using it for ongoing development. +## Create a personal tab with ASP.NET Core MVC -- Use App Studio to import your application to Teams. To install App Studio, select **Apps**  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.+You can create a custom personal tab using C# and ASP.NET Core MVC. To create a personal tab with ASP.NET Core MVC -Also, this project requires that you have the following installed in your development environment: +1. At the command prompt, create a new directory for your tab project. -- 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.+1. Clone the sample repository into your new directory using the following command or you can download the [source code](https://github.com/OfficeDev/Microsoft-Teams-Samples) and extract the files: -- 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).+ ```cmd + git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git + ``` -### Get the source code +Following are the steps to create a personal tab: -At a command prompt, create a new directory for your tab project. A simple project is provided to get you started. Clone the sample repository into your new directory using the following command: +1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab-2) +1. [Update and run application](#update-and-run-your-application-1) +1. [Establish a secure tunnel to your tab](#establish-a-secure-tunnel-to-your-tab-2) +1. [Update your app package with Developer Portal](#update-your-app-package-with-developer-portal-1) +1. [Preview your app in Teams](#preview-your-app-in-teams-1) -``` bash -git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git -``` +### Generate your application with a personal tab -Alternately, you can retrieve the source code by downloading the zip folder and extracting the files. +1. Open Visual Studio and select **Open a project or solution**. -**To build and run the tab project** +1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **mvc-csharp** folder and open **PersonalTabMVC.sln** in Visual Studio. -1. After you have the source code, go to Visual Studio and select **Open a project or solution**. -1. Go to the tab application directory and open **PersonalTabMVC.sln**. -1. To build and run your application, press **F5** or choose **Start Debugging** from the **Debug** menu. -1. In a browser, go to the following URLs to verify that the application loaded properly: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application has loaded properly. In a browser, go to the following URLs: - * `http://localhost:44335` - * `http://localhost:44335/privacy` - * `http://localhost:44335/tou` + * <http://localhost:3978> + * <http://localhost:3978/personalTab> + * <http://localhost:3978/privacy> + * <http://localhost:3978/tou> -### Review the source code +<details> +<summary><b>Review the source code</b></summary> #### 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 doesn't 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 3.1 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) These files must be zipped in an app package for use in uploading your tab to Te #### .csproj -In the Visual Studio Solution Explorer window, right-click on the project and select **Edit Project File**. At the end of the file, you see the following code that creates and updates your zip folder when the application builds: +In the Visual Studio Solution Explorer, right-click on the project and select **Edit Project File**. At the end of the file, you see the following code that creates and updates your zip folder when the application builds: ``` xml <PropertyGroup> In the Visual Studio Solution Explorer window, right-click on the project and se #### Models -**PersonalTab.cs** presents a Message object and methods that are called from **PersonalTabController** when a user selects a button in the **PersonalTab** View. +**PersonalTab.cs** presents a message object and methods that are called from **PersonalTabController** when a user selects a button in the **PersonalTab** View. #### Views These views are the different views in ASP.NET Core MVC: The controllers use the `ViewBag` property to transfer values dynamically to the Views. +</details> +### Update and run your application -**To run ngrok and verify the content page** +1. Go to **Views** > **Shared** folder and open **_Layout.cshtml**, and add the following to the `<head>` tags section: ++ ```HTML + <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> + <script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script> + ``` -1. At a command prompt in the root of your project directory, run the following command: +1. Open **PersonalTab.cshtml** from **Views** > **PersonalTab** folder and add `microsoftTeams.initialize()` inside the `<script>` tags and save. ++1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu. ++### Establish a secure tunnel to your tab - ``` bash - ngrok http https://localhost:44345 -host-header="localhost:44345" +At the command prompt in the root of your project directory run the following command to establish a secure tunnel to your tab: ++```cmd +ngrok http 3978 --host-header=localhost +``` ++### Update your app package with Developer Portal ++1. Go to **Developer portal** in Teams. ++1. Open **Apps** and select **Import app**. ++1. The name of your app package is **tab.zip**. It's available in the following path: ++ ``` + /bin/Debug/netcoreapp3.1/tab.zip ``` - 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. +1. Select **tab.zip** and open it in the Developer Portal. - Ensure you keep the command prompt with ngrok running, and make a note of the URL. +1. A default **App ID** is created and populated in **Basic information** section. -1. Verify that **ngrok** is running and working properly by opening your browser and going to your content page through the ngrok HTTPS URL that was provided in your command prompt window. +1. Add the Short and Long description for your app in **Descriptions**. -> [!TIP] -> You need to have both your application in Visual Studio and ngrok running to complete the steps provided in this article. If you need to stop running your application in Visual Studio to work on it, **keep ngrok running**. It listens and resumes routing your application's request when it restarts in Visual Studio. If you have to restart the ngrok service it returns a new URL and you have to update every place that uses that URL. +1. In **Developer Information**, add the required details and in **Website (must be a valid HTTPS URL)** give your ngrok HTTPS URL. -#### Run your application +1. In **App URLs**, update the Privacy policy to `https://<yourngrokurl>/privacy` and Terms of use to `https://<yourngrokurl>/tou` and save. ++1. In **App features**, select Personal app and enter the Name and update the **Content URL** with `https://<yourngrokurl>/personalTab`. Leave the Website URL field blank. -In Visual Studio, press **F5** or choose **Start Debugging** from your application's **Debug** menu. +1. Select **Save**. +1. In the Domains section, Domains from your tabs must contain your ngrok URL without the HTTPS prefix `<yourngrokurl>.ngrok.io`. -+### Preview your app in Teams ++1. Select **Preview in Teams** from the Developer Portal toolbar. The Developer Portal informs you that your app is sideloaded successfully. ++1. Select **Manage your apps**. Your app is listed in the sideloaded apps. ++1. Find your app using the search, select the three-dots in its row. ++1. Select **View** option. The **Add** page appears for your app. ++1. Select **Add** to load the tab on Teams. Your tab is now available in Teams. ++ :::image type="content" source="~/assets/images/tab-images/personaltabaspnetmvccoreuploaded.png" alt-text="Personal tab" border="true"::: + + Now you have succesfully created and added your personal tab in Teams. ++ As you have your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) and add [`registerOnFocused` API](#add-registeronfocused-api-for-tabs-or-personal-apps) for your personal tab. + ## Reorder static personal tabs Starting with manifest version 1.7, developers can rearrange all tabs in their p If you create a bot with a **personal** scope, it appears in the first tab position in a personal app by default. If you want to move it to another position, you must add a static tab object to your manifest with the reserved keyword, **conversations**. The **conversation** tab appears on web or desktop depending on where you add the **conversation** tab in the `staticTabs` array. -```json +``` JSON + { "staticTabs":[ { If you create a bot with a **personal** scope, it appears in the first tab posit } ] }+ ``` ## Add `registerOnFocused` API for tabs or personal apps -The `registerOnFocused` SDK API allows you to use a keyboard on Teams. You can return to a personal app and maintain focus on a tab or personal app with the help of Ctrl, Shift, and F6 keys. For example, you can move away from the personal app to search for something, and then return to the personal app or use Ctrl+F6 to go around the required places. +The `registerOnFocused` SDK API allows you to use a keyboard on Teams. You can return to a personal app and maintain focus on a tab or personal app with the help of Ctrl, Shift, and F6 keys. For example, you can move away from the personal app to search for something, and then return to the personal app or use Ctrl+F6 to go around the required places. The following code provides an example of handler definition on `registerFocusEnterHandler` SDK when the focus must be returned to the tab or personal app: -```csharp +``` C# + export function registerFocusEnterHandler(handler: (navigateForward: boolean) => void): void { HandlersPrivate.focusEnterHandler = handler; function handleFocusEnter(navigateForward: boolean): void HandlersPrivate.focusEnterHandler(navigateForward); } }+ ``` -After the handler is triggered with the keyword `focusEnter`, the handler `registerFocusEnterHandler` is invoked with a callback function `focusEnterHandler` that takes in a parameter called `navigateForward`. The value of `navigateForward` determines the type of events. The `focusEnterHandler` is invoked only by Ctrl+F6 and not by the tab key. -The keys useful for move events within Teams are as follows: -* Forward event -> Ctrl+F6 keys -* Backward event -> Ctrl+Shift+F6 keys +After the handler is triggered with the keyword `focusEnter`, the handler `registerFocusEnterHandler` is invoked with a callback function `focusEnterHandler` that takes in a parameter called `navigateForward`. The value of `navigateForward` determines the type of events. The `focusEnterHandler` is invoked only by Ctrl+F6 and not by the tab key. +The keys useful for move events within Teams are as follows: ++* Forward event: Ctrl+F6 keys +* Backward event: Ctrl+Shift+F6 keys ++``` C# -```csharp case 'focusEnter': this.registerFocusEnterHandler((navigateForward: boolean = true) => { this.sdkWindowMessageHandler.sendRequestMessage(this.frame, this.constants.SdkMessageTypes.focusEnter, [navigateForward]); private registerFocusEnterHandler(focusEnterHandler: (navigateForward: boolean) this.focusEnterHandler = focusEnterHandler; this.layoutService.registerAppFocusEnterCallback(this.focusEnterHandler); }+ ``` ### Personal app -#### Personal app - Forward event +#### Personal app: Forward event -#### Personal app - Backward event +#### Personal app: Backward event ### Tab ## Next step this.layoutService.registerAppFocusEnterCallback(this.focusEnterHandler); * [Teams tabs](~/tabs/what-are-tabs.md) * [Tabs on mobile](~/tabs/design/tabs-mobile.md) * [Build tabs with Adaptive Cards](~/tabs/how-to/build-adaptive-card-tabs.md)-* [Create conversational tabs](~/tabs/how-to/conversational-tabs.md) +* [Create conversational tabs](~/tabs/how-to/conversational-tabs.md) |
| platform | Tab Requirements | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/tab-requirements.md | -Teams tabs must adhere to the following prerequisites: +Ensure that you adhere to the following prerequisites while building your Teams personal and channel or group tab: -* You must allow your tab pages to be shown in an iFrame, using X-Frame-Options and Content-Security-Policy HTTP response headers. +* Allow your tab pages to be discovered in an iFrame, using X-Frame-Options and Content-Security-Policy HTTP response headers. * Set header: `Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com` * For Internet Explorer 11 compatibility, set `X-Content-Security-Policy`. * Alternately, set header `X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/`. This header is deprecated but still accepted by most browsers. -* Typically, as a safeguard against clickjacking, login pages do not render in iFrames. Your authentication logic needs to use a method other than redirect. For example, use token-based or cookie-based authentication. +* Login pages don't render in iFrames, as a safeguard against clickjacking. Your authentication logic needs to use a method other than redirect. For example, use token-based or cookie-based authentication. > [!NOTE]- > Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. It is recommended that you set the intended use for your cookies rather than rely on default browser behavior. For more information, see [SameSite cookie attribute](../../resources/samesite-cookie-update.md). + > It is recommended that you set the intended use for your cookies rather than rely on default browser behavior. For more information, see [SameSite cookie attribute](../../resources/samesite-cookie-update.md). -* Browsers adhere to a same-origin policy restriction. It prevents webpages from making requests to different domains than the served web page. However, you can redirect the configuration or content page to another domain or subdomain. Your cross-domain navigation logic must allow the Teams client to validate the origin against a static `validDomains` list in the app manifest when loading or communicating with the tab. +* Browsers same-origin policy restriction prevents webpages from making requests to different domains than the served web page. So, you can redirect the configuration or content page to another domain or subdomain. Your cross-domain navigation logic needs to allow the Teams client to validate the origin against a static `validDomains` list in the app manifest when loading or communicating with the tab. -* You must style your tabs based on the Teams client's theme, design, and intent. Typically, tabs work best when they are built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location. +* Style your tabs based on the Teams client's theme, design, and intent. Tabs work best when they're built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location. * Within your content page, add a reference to [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client) using script tags. After your page loads, make a call to `microsoftTeams.initialize()`, otherwise your page is not displayed. -* For authentication to work on mobile clients, you must upgrade Teams JavaScript SDK to at least version 1.4.1. +* For authentication to work on mobile clients, you must upgrade to Teams JavaScript SDK 1.4.1 and later. -* If you choose to have your channel or group tab appear on Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property. +* If you choose to have your channel or group tab to appear on Teams mobile client, the `setSettings()` configuration must have a value for the `websiteUrl` property. -* MS Teams tab does not support the ability to load intranet websites that use self-signed certificates. +* Microsoft Teams tab does'nt support the ability to load intranet websites that use self-signed certificates. -## Tools you can use to build tabs +## Tools to build tabs -* [Teams Toolkit for Microsoft Visual Studio Code](../../toolkit/visual-studio-code-overview.md) -* [Teams Toolkit for Visual Studio](../../toolkit/visual-studio-overview.md) +| | Install | For using... | +| | | | +| **Required** | | | +| | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. Use the latest v14 LTS release.| +| | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | +| | [Visual Studio Code](https://code.visualstudio.com/download) | JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. | +| | [Visual Studio 2019](https://visualstudio.com/download), **ASP.NET and web development**, or **.NET Core cross-platform development** workload | .NET. You can install the free community edition of Visual Studio 2019. | +| | [Git](https://git-scm.com/downloads) | Git to use the sample apps repo from GitHub. | +| | [Microsoft Teams](https://www.microsoft.com/en-us/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place. | +| | [ngrok](https://ngrok.com/download) | 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. | +| | [Developer Portal for Teams](https://dev.teams.microsoft.com/) | Web-based portal to configure, manage, and distribute your Teams app including to your organization or the Teams store. | -## Next step +### Build your Teams tab +Now let's build your tab. But first select your choice of tab to build: ++> [!div class="nextstepaction"] +> [Build a personal tab](~/tabs/how-to/create-personal-tab.md) > [!div class="nextstepaction"]-> [Create a personal tab](~/tabs/how-to/create-personal-tab.md) +> [Build a channel or group tab](~/tabs/how-to/create-channel-group-tab.md) ## See also * [Teams tabs](~/tabs/what-are-tabs.md)-* [Build your first app using JavaScript](../../get-started/first-app-react.md) -* [Build your first app using SPFx](../../get-started/first-app-spfx.md) -* [Tabs on mobile](~/tabs/design/tabs-mobile.md) +* [Tabs on mobile](~/tabs/design/tabs-mobile.md) |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Discover Microsoft Teams platform features that are generally available (GA) and | Date | Update | Find here | | | | |+|03/30/2022| Updated the Get started module with Blazor app using tabs and bots| Get started > [Build your first app using Blazor](sbs-gs-blazorupdate.yml)| +|03/30/2022|Device permissions for the browser | Integrate device capabilities > [Device permissions for the browser](concepts/device-capabilities/browser-device-permissions.md) | |03/29/2022 | Integrate People Picker | Integrate with Teams > [Integrate People Picker](concepts/device-capabilities/people-picker-capability.md)| |03/23/2022| Introduced step-by-step guide to unfurl links in Teams using bot | Build messaging extensions > Add link unfurling > [Unfurl links in Teams using bot](sbs-botbuilder-linkunfurling.yml)| |03/22/2022| Updated the Get started with Blazor app for Teams | ΓÇó Get started > [Build your first app using Blazor](sbs-gs-blazorapp.yml)| Microsoft Teams platform features that are available to all app developers. <summary><b>2022</b></summary> | **Date** | **Update** | **Find here** |-| -- | --| --| +| -- | | -| +|03/30/2022| Updated the Get started module with Blazor app using tabs and bots| Get started > [Build your first app using Blazor](sbs-gs-blazorupdate.yml)| +|03/30/2022|Device permissions for the browser | Integrate device capabilities > [Device permissions for the browser](concepts/device-capabilities/browser-device-permissions.md) | |03/29/2022 |Integrate People Picker | Integrate with Teams > [Integrate People Picker](concepts/device-capabilities/people-picker-capability.md) |03/23/2022| Introduced step-by-step guide to unfurl links in Teams using bot | Build messaging extensions > Add link unfurling > [Unfurl links in Teams using bot](sbs-botbuilder-linkunfurling.yml)| |03/22/2022| Updated the Get started with Blazor app for Teams| ΓÇó Get started > [Build your first app using Blazor](sbs-gs-blazorapp.yml)| Developer preview is a public program that provides early access to unreleased T |12/24/2021| Introduced step-by-step guide to grant Tab device permissions | App fundamentals > Device capabilities > [step-by-step guide to grant Tab device permissions](sbs-tab-device-permissions.yml) | |11/15/2021| Personal tabs and messaging extensions run in Outlook and Office | [Extend Teams apps across Microsoft 365](~/m365-apps/overview.md) | |10/28/2021|Bots can be enabled to receive all channel messages using resource-specific consent (RSC) | ΓÇó Build bots > Bot conversations > Messages in bot conversations > [Receive all messages with RSC](~/bots/how-to/conversations/channel-messages-with-rsc.md) </br> ΓÇó Build bots > Bot conversations > [bot conversation overview](~/bots/how-to/conversations/conversation-basics.md) </br> ΓÇó Build bots > Bot conversations > [channel and group conversations](~/bots/how-to/conversations/channel-and-group-conversations.md) </br> ΓÇó App manifest > Public developer preview > [developer preview manifest schema](~/resources/schem) |-|10/19/2021|Device permissions for the browser | App fundamentals > Device capabilities > [Device permissions for the browser](concepts/device-capabilities/browser-device-permissions.md) | |06/21/2021|Uninstall behavior for personal app with bot | Build bots > Bot conversations > [Uninstall behavior updates in personal apps with bots](bots/how-to/conversations/subscribe-to-conversation-events.md#uninstall-behavior-for-personal-app-with-bot)| |06/16/2021| Resource-specific consent for chats | ΓÇó Utilize Teams data with Microsoft Graph > [Resource-specific consent](graph-api/rsc/resource-specific-consent.md) </br> ΓÇó Test your app > Microsoft Graph > [Test resource-specific consent permissions in Teams](graph-api/rsc/test-resource-specific-consent.md)| |