| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Create Channel Group Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-channel-group-tab.md | gulp build :::image type="content" source="~/assets/images/tab-images/homePage.png" alt-text="Default Tab" border="true"::: -1. To view your tab configuration page, go to `https://localhost:3007/<yourDefaultAppNameTab>/config.html`. The following is shown: +1. To view your tab configuration page, go to `http://localhost:3007/<yourDefaultAppNameTab>/config.html`. The following is shown: :::image type="content" source="~/assets/images/tab-images/configurationPage.png" alt-text="Tab configuration page" border="true"::: gulp ngrok-serve :::image type="content" source="~/assets/images/tab-images/channeltabadded.png" alt-text="Uploaded channel tab" border="true"::: -1. Select **Add** in the pop-up window. Your tab is uploaded to Teams. +1. Select **Add** in the dialog. Your tab is uploaded to Teams. > [!NOTE] > If **Add** doesn't display in the dialog box then remove the following code from the manifest of the uploaded app package zip folder. Again zip the folder and upload it to Teams. gulp ngrok-serve >"composeExtensions": [], >``` -1. Return to your team, choose the channel where you want to add the tab, select Γ₧ò from the tab bar, and choose your tab from the list. -1. Follow the directions for adding a tab. There is a custom configuration dialog box for your channel or group tab. +1. Follow the directions for adding a tab. There is a custom configuration dialog for your channel or group tab. 1. Select **Save** and your tab is added to the channel's tab bar. :::image type="content" source="~/assets/images/tab-images/channeltabuploaded.png" alt-text="Channel tab uploaded" border="true":::+ + Now you have succesfully created and added your channel or group tab in Teams. ::: zone-end Following are the steps to create a channel or group tab: 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-channel-group** > **razor-csharp** folder and open **channelGroupTab.sln**. -1. In Visual Studio, press **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: +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: * https://localhost:3978/ * https://localhost:3978/privacy Ensure that you keep the command prompt with ngrok running and make a note of th ### Update your application -1. Go to the **Pages** > **Shared** folder and open **_Layout.cshtml**, and add the following to the <head> tags section: +1. Open Visual Studio Solution Explorer and go to the **Pages** > **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> Ensure that you keep the command prompt with ngrok running and make a note of th > [!IMPORTANT] > Do not copy and paste the `<script src="...">` URLs from this page, as they do not represent the latest version. To get the latest version of the SDK, always go to [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js). -1. At the top of the `script` tag, insert a call to `microsoftTeams.initialize();`. +1. Insert a call to `microsoftTeams.initialize();` in the `script` tag. -1. Go to the **Pages** folder and open **Tab.cshtml** +1. In Visual Studio Solution Explorer go to the **Pages** folder and open **Tab.cshtml** Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. The parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved. Ensure that you keep the command prompt with ngrok running and make a note of th ### Build and run your application -1. In Visual Studio, press **F5** or choose **Start Debugging** from the **Debug** menu. +1. In Visual Studio, select **F5** or choose **Start Debugging** from the **Debug** menu. 1. Verify that **ngrok** is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window. Ensure that you keep the command prompt with ngrok running and make a note of th 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. Navigate to your **Developer portal** in Teams. +1. Go to [**Developer portal**](https://dev.teams.microsoft.com/home). 1. Open **Apps** and select **Import app**. Ensure that you keep the command prompt with ngrok running and make a note of th 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. In **App features**, select Group and channel app. Update the **Configuration URL** with `https://<yourngrokurl>/tab` and select your tab **Scope**. 1. Select **Save**. Ensure that you keep the command prompt with ngrok running and make a note of th ### 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 ●●●. +1. Select **Preview in Teams** from the Developer Portal toolbar, Developer Portal informs you that your app is sideloaded successfully. The **Add** page appears for your app in Teams. -1. Select the **View details** option. The app details window appears for your app. --1. Select :::image type="content" source="~/assets/images/tab-images/app-dropdown.png" alt-text="App details dropdown" border="true"::: > **Add to team** to load the tab in a team. Your tab is now available in Teams. +1. Select **Add to team** to Set up the tab in a team. Configure your tab and select **Save**. Your tab is now available in Teams. :::image type="content" source="~/assets/images/tab-images/channeltabaspnetuploaded.png" alt-text="Channel tab ASPNET uploaded" border="true":::+ + Now you have succesfully created and added your channel or group tab in Teams. ::: zone-end Following are the steps to create a channel or group tab: 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-channel-group** > **mvc-csharp** folder and open **ChannelGroupTabMVC.sln**. -1. In Visual Studio, press **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: +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: * https://localhost:3978/ * https://localhost:3978/privacy Ensure that you keep the command prompt with ngrok running and make a note of th ### Update your application -1. Go to the **Views** > **Shared** folder and open **_Layout.cshtml**, and add the following to the <head> tags section: +1. Open Visual Studio Solution Explorer and go to the **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> Ensure that you keep the command prompt with ngrok running and make a note of th > [!IMPORTANT] > Do not copy and paste the `<script src="...">` URLs from this page, as they do not represent the latest version. To get the latest version of the SDK, always go to [Microsoft Teams JavaScript API](https://www.npmjs.com/package/@microsoft/teams-js). -1. At the top of the `script` tag, insert a call to `microsoftTeams.initialize();`. +1. Insert a call to `microsoftTeams.initialize();` in the `script` tag. -1. Go to the **Tab** folder and open **Tab.cshtml** +1. In Visual Studio Solution Explorer go to the **Tab** folder and open **Tab.cshtml** Within **Tab.cshtml** the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Choosing the **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()`, respectively, sets `settings.setValidityState(true)`, and enables the **Save** button on the configuration page. This code lets Teams know that you have completed the configuration requirements and the installation can proceed. The parameters of `settings.setSettings` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved. Ensure that you keep the command prompt with ngrok running and make a note of th ### Build and run your application -1. In Visual Studio, press **F5** or choose **Start Debugging** from the **Debug** menu. +1. In Visual Studio, select **F5** or choose **Start Debugging** from the **Debug** menu. 1. Verify that **ngrok** is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window. Ensure that you keep the command prompt with ngrok running and make a note of th 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 [**Developer portal**](https://dev.teams.microsoft.com/home). 1. Open **Apps** and select **Import app**. Ensure that you keep the command prompt with ngrok running and make a note of th 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. In **App features**, select Group and channel app. Update the **Configuration URL** with `https://<yourngrokurl>/tab` and select your tab **Scope**. 1. Select **Save**. Ensure that you keep the command prompt with ngrok running and make a note of th ### 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 **Preview in Teams** from the Developer Portal toolbar, Developer Portal informs you that your app is sideloaded successfully. The **Add** page appears for your app in Teams. -1. Select **Manage your apps**. Your app is listed in the sideloaded apps. --1. Find your app using the search, select ●●●. --1. Select the **View details** option. The app details window appears for your app. --1. Select :::image type="content" source="~/assets/images/tab-images/app-dropdown.png" alt-text="Channel tab ASPNET uploaded" border="true"::: > **Add to team** to load the tab on Teams. Your tab is now available in Teams. +1. Select **Add to team** to Set up the tab in a team. Configure your tab and select **Save**. Your tab is now available in Teams. :::image type="content" source="~/assets/images/tab-images/channeltabaspnetuploaded.png" alt-text="Channel tab ASPNET MVC uploaded" border="true":::+ + Now you have succesfully created and added your channel or group tab in Teams. ::: zone-end |
| platform | Create Personal Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-personal-tab.md | gulp ngrok-serve :::image type="content" source="~/assets/images/tab-images/addingpersonaltab.png" alt-text="Adding your personal tab" border="true"::: -1. Select **Add** in the pop-up window. Your tab is uploaded to Teams. +1. Select **Add** in the dialog. Your tab is uploaded to Teams. :::image type="content" source="~/assets/images/tab-images/personaltabuploaded.png" alt-text="Personal tab uploaded" border="true"::: In Visual Studio Solution Explorer, right-click on the project and select **Edit ### Update and run your application -1. Go to the **Pages** > **Shared** folder and open **_Layout.cshtml** and add the following to the `<head>` tags section: +1. Open Visual Studio Solution Explorer and go to **Pages** > **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. Open **PersonalTab.cshtml** from **Pages** folder and add `microsoftTeams.initialize()` in the `<script>` tags and save. +1. In Visual Studio Solution Explorer open **PersonalTab.cshtml** from **Pages** folder and add `microsoftTeams.initialize()` in the `<script>` tags and save. 1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu. ngrok http 3978 --host-header=localhost ### Update your app package with Developer Portal -1. Go to **Developer portal** in Teams. +1. Go to [**Developer portal**](https://dev.teams.microsoft.com/home). 1. Open **Apps** and select **Import app**. ngrok http 3978 --host-header=localhost 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. In **App features**, select **Personal app** > **Create your first personal app tab** and enter the Name and update the **Content URL** with `https://<yourngrokurl>/personalTab`. Leave the Website URL field blank and select **Context** as personalTab from the dropdown list and **Add**. 1. Select **Save**. ngrok http 3978 --host-header=localhost ### 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 **Preview in Teams** from the Developer Portal toolbar, Developer Portal informs you that your app is sideloaded successfully. The **Add** page appears for your app in Teams. -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 the **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. +1. Select **Add** to load the tab in Teams. Your tab is now available in Teams. :::image type="content" source="~/assets/images/tab-images/personaltabaspnetuploaded.png" alt-text="Default Tab" border="true"::: The controllers use the `ViewBag` property to transfer values dynamically to the ### Update and run your application -1. Go to **Views** > **Shared** folder and open **_Layout.cshtml**, and add the following to the `<head>` tags section: +1. Open Visual Studio Solution Explorer and 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. Open **PersonalTab.cshtml** from **Views** > **PersonalTab** folder and add `microsoftTeams.initialize()` inside the `<script>` tags and save. +1. In Visual Studio Solution Explorer 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. ngrok http 3978 --host-header=localhost ### Update your app package with Developer Portal -1. Go to **Developer portal** in Teams. +1. Go to [**Developer portal**](https://dev.teams.microsoft.com/home). 1. Open **Apps** and select **Import app**. ngrok http 3978 --host-header=localhost 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. In **App features**, select **Personal app** > **Create your first personal app tab** and enter the Name and update the **Content URL** with `https://<yourngrokurl>/personalTab`. Leave the Website URL field blank and select **Context** as personalTab from the dropdown list and **Add**. 1. Select **Save**. ngrok http 3978 --host-header=localhost ### 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 **Preview in Teams** from the Developer Portal toolbar, Developer Portal informs you that your app is sideloaded successfully. The **Add** page appears for your app in Teams. 1. Select **Add** to load the tab on Teams. Your tab is now available in Teams. |