| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Share To Teams From Personal App Or Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md | The following table provides the response codes: ## Limitations -* The Share to Teams is available for the Teams desktop and mobile clients, but it isn't supported on Teams web client. * The Share to Teams button can be hosted or embedded in an app running inside Teams. * You can add Share to Teams button to the app created by using [Teams JavaScript client library](../../tabs/how-to/using-teams-client-library.md). |
| platform | Resource Specific Consent | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/graph-api/rsc/resource-specific-consent.md | The following table provides RSC application permissions for a team and their ap |`ChannelMeetingTranscript.Read.Group`|Read the transcripts of all channel meetings associated with this team.| NA | Supported | |`ChannelMeetingNotification.Send.Group`|Send notifications in all the channel meetings associated with this team.| NA | Supported | |`ChannelMessage.Read.Group`|Read this team's channel messages. | NA | Supported |-|`ChannelMessage.Send.Group`|Send messages to this team's channels.| NA | Supported | |`ChannelSettings.Read.Group`| Read the names, descriptions, and settings of this team's channelsΓÇï.| NA | Supported | |`ChannelSettings.ReadWrite.Group`|Update the names, descriptions, and settings of this team's channels.ΓÇï| NA | Supported |-|`Member.Read.Group`|Read this group's members.| NA | Supported | -|`Owner.Read.Group`|Read this group's owners.| NA | Supported | |`TeamsActivity.Send.Group`|Send activity feed notifications to users in this team. | NA | Supported | |`TeamsAppInstallation.Read.Group`|Read the apps that are installed in this team.| NA | Supported | |`TeamMember.Read.Group`|Read this team's members. | NA | Supported | The following table provides RSC permissions for a chat or meeting and their app | `ChatSettings.Read.Chat`| Read this chat's settings.|NA |Supported | | `ChatSettings.ReadWrite.Chat`| Read and write this chat's settings. |NA |Supported | | `ChatMessage.Read.Chat` | Read this chat's messages.|NA |Supported |-| `ChatMessage.Send.Chat` | Send messages to this chat. |NA |Supported | | `ChatMessageReadReceipt.Read.Chat` | Read the ID of the last seen message in this chat. |NA |Supported | | `ChatMember.Read.Chat` | Read this chat's members. |NA |Supported | | `Chat.Manage.Chat` | Manage this chat. |NA |Supported | |
| platform | Manifest Schema | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md | Used when your app experience has a team channel tab experience that requires ex **Optional** – Array -Defines a set of tabs that can be pinned by default, without the user adding them manually. Static tabs declared in `personal` scope are always pinned to the app's personal experience. Static tabs declared in the `team` scope are currently not supported. +Defines a set of tabs that can be pinned by default, without the user adding them manually. Static tabs declared in `personal` scope are always pinned to the app's personal experience. This item is an array (maximum of 16 elements) with all elements of the type `object`. This block is required only for solutions that provide a static tab solution. Specify meeting extension definition. For more information, see [custom Together |`supportsAnonymousGuestUsers`|Boolean|||A value that indicates whether an app supports access for anonymous users. The default value is **false**.| > [!NOTE]-> The `supportsAnonymousGuestUsers` property in the app manifest schema v1.16 is supported only in [new Teams client](/microsoftteams/platform/resources/teams-updates). +> The `supportsAnonymousGuestUsers` property in the app manifest schema v1.16 is supported only in [new Teams client](~/resources/teams-updates.md). ### meetingExtensionDefinition.scenes |
| platform | Teams Updates | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/teams-updates.md | The following Teams features aren't currently supported in the new Teams client: * [App caching](~/tabs/how-to/app-caching.md) isn't supported in the new Teams client. +* [Static tabs for group chat, channels, and meetings](~/tabs/how-to/create-personal-tab.md#extend-static-tabs-to-group-chat-channels-and-meetings) aren't supported in the new Teams client. + * The `window.alert`, `window.confirm`, and `window.prompt` APIs used to display a dialog aren't supported in the new Teams Client. We recommended you to render a dialog within your own frame, for example, using the [Fluent V9 dialog](https://react.fluentui.dev/?path=/docs/components-dialog--default) or use the Microsoft Teams JavaScript client library (TeamsJS) to display a [Teams dialog](../tabs/what-are-tabs.md) using Adaptive Card or a nested `<iframe>`. For more information on known issues and gaps in the new Teams client, see [new Microsoft Teams](/microsoftteams/new-teams-desktop-admin?tabs=teams-admin-center#known-issues). |
| platform | Create Channel Group Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-channel-group-tab.md | Title: Create a channel tab or group tab -description: Create custom channel, group tab with Node.js, ASP.NET Core, ASP.NET Core MVC. Generate app, create package, build and run app, secret tunnel, upload to Teams and build your first app using Blazor +description: Create custom channel, group tab with Node.js, ASP.NET Core, ASP.NET Core MVC. Generate app, create package, build and run app, secret tunnel, upload to Teams and build your first app using Blazor. ms.localizationpriority: high zone_pivot_groups: teams-app-environment-blazor gulp ngrok-serve :::image type="content" source="~/assets/images/tab-images/channel-tab-uploaded.png" alt-text="Screenshot shows the uploaded channel tab in Teams."::: - Now you've successfully created and added your channel or group tab in Teams. + Your channel or group tab is successfully created and added in Teams. ::: zone-end gulp ngrok-serve 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-channel-group** > **razor-csharp** folder and open **channelGroupTab.sln**. -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: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application is loaded properly. In a browser, go to the following URLs: * `https://localhost:3978/` * `https://localhost:3978/privacy` 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. When a user chooses to add or update your tab, Teams loads the `configurationUrl` specified in your manifest, embeds it in an IFrame, and renders it in your tab. +These files need to be zipped in an app package for use in uploading your tab to Teams. When a user chooses to add or update your tab, Teams loads the `configurationUrl` specified in your manifest, embeds it in an Iframe, and renders it in your tab. ### .csproj Ensure that you keep the command prompt with ngrok running and make a note of th 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 options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that you've completed the requirements configuration and can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL is successfully resolved. + Within **Tab.cshtml**, the application presents the user with two options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that the requirements configuration is completed and you can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL is successfully resolved. 1. Update the `websiteUrl` and `contentUrl` values in each function with the HTTPS ngrok URL to your tab. Ensure that you keep the command prompt with ngrok running and make a note of th :::image type="content" source="~/assets/images/tab-images/channel-tab-aspnet-uploaded.png" alt-text="Screenshot shows that the channel tab is uploaded."::: - Now you've successfully created and added your channel or group tab in Teams. + Your channel or group tab is successfully created and added in Teams. ::: zone-end Ensure that you keep the command prompt with ngrok running and make a note of th 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-channel-group** > **mvc-csharp** folder and open **ChannelGroupTabMVC.sln**. -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: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application is loaded properly. In a browser, go to the following URLs: * `https://localhost:3978/` * `https://localhost:3978/privacy` 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: +The different views in ASP.NET Core MVC are: * 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** can be displayed as the home page for your application. Ensure that you keep the command prompt with ngrok running and make a note of th 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 options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that you've completed the requirements configuration and can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved. + Within **Tab.cshtml**, the application presents the user with two options for displaying the tab with a red or gray icon. The **Select Gray** or **Select Red** button triggers `saveGray()` or `saveRed()` respectively, sets `pages.config.setValidityState(true)`, and enables **Save** on the configuration page. This code lets Teams know that the requirements configuration is completed and you can proceed with the installation. The parameters of `pages.config.setConfig` are set. Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has been successfully resolved. 1. Update the `websiteUrl` and `contentUrl` values in each function with the HTTPS ngrok URL to your tab. Ensure that you keep the command prompt with ngrok running and make a note of th :::image type="content" source="~/assets/images/tab-images/channel-tab-aspnet-uploaded.png" alt-text="Screenshot shows that the channel tab is uploaded in Teams."::: - Now you've successfully created and added your channel or group tab in Teams. + Your channel or group tab is successfully created and added in Teams. ::: zone-end Ensure that you keep the command prompt with ngrok running and make a note of th Blazor lets you build interactive web UIs using C#, instead of JavaScript. You can create a tab app and a bot app with Blazor and the latest version of Visual Studio. > [!NOTE] > Teams Toolkit doesn't support the message extension capability. Here's a list of tools you require for building and deploying your app. | | | | | **Required** | | | | | [Visual Studio version 17.2.0 preview 2.1](https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=enterprise&ch=pre&rel=17)| Select Visual Studio Enterprise 2022 Preview (version 17.2.0 preview 2.1). |-| | [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 and calls - all in one place. | +| | [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, and calls - all in one place. | | | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | ## Prepare development environment Now you've got all tools and set up your accounts. Next, let's set up your devel Start Teams app development by creating your first app. This app uses the tab capability. This tutorial walks you through the steps to create, run, and deploy your first Teams app using .NET/Blazor. Use Teams Toolkit to create your first tab project. The toolkit takes you throug 1. Select **Next**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png" alt-text="Screenshot of Create a new project with Next option highlighted in red for blazor app creation."lightbox="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png" alt-text="Screenshot of Create a new project with Next option highlighted in red for blazor app creation." lightbox="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png"::: The **Configure your new project** page appears. To build and run your app: :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/tab-user-info_1.png" alt-text="Screenshot of your channel Tab displaying basic information"::: - You can do normal debugging activities, such as setting breakpoints, as if it were any other web application. The app supports hot reloading. If you change any file within the project, the page will be reloaded. + You can do normal debugging activities, such as setting breakpoints, as if it were any other web application. The app supports hot reloading. If you change any file within the project, the page is reloaded. <!-- markdownlint-disable MD033 --> <details> You've learned to create, build, and run Teams app with tab capability. The foll 1. Select your **Region**, if new resource group is created. 1. Select **Provision**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/select-subscription.PNG" alt-text="Screenshot shows the provision dialog to select the subscription, azure account, and resource group."lightbox="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/select-subscription.PNG"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/select-subscription.PNG" alt-text="Screenshot shows the provision dialog to select the subscription, Azure account, and resource group."lightbox="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/select-subscription.PNG"::: Provision warning displays. You've learned to create, build, and run Teams app with tab capability. The foll Your app-dev-rg appears. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/app-dev-rg-azure.PNG" alt-text="Screenshot shows your blazor app displaying the resources provisioned in the azure portal."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/app-dev-rg-azure.PNG" alt-text="Screenshot shows your Blazor app displaying the resources provisioned in the Azure portal."::: Your resources are provisioned in the Azure portal! You've learned to create, build, and run Teams app with tab capability. The foll 1. Select **Project** > **Teams Toolkit** > **Deploy to the Cloud**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_1.png" alt-text="Screenshot shows how to select the option to deploy to the cloud for your project in visual studio."lightbox="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_1.png"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_1.png" alt-text="Screenshot shows how to select the option to deploy to the cloud for your project in visual studio. "lightbox="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/vs-build-deploytocloud_1.png"::: 1. Select **OK**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/deploy-success.PNG" alt-text="Screenshot shows OK option to select when your blazor app is successfully deployed to the cloud."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/deploy-success.PNG" alt-text="Screenshot shows OK option to select when your Blazor app is successfully deployed to the cloud."::: Your tab app is successfully deployed to the cloud! You've learned to create, build, and run Teams app with tab capability. The foll 1. Select **Add** when prompted to install the app to Teams. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-add-app.PNG" alt-text="Screenshot shows the option to add your blazor app in Teams."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-add-app.PNG" alt-text="Screenshot shows the option to add your Blazor app in Teams."::: Congratulations, your first tab app is running in your Azure environment! - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-tab-app-azure.PNG" alt-text="Screenshot shows that your app is running in your azure environment."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor-vs-preview2/blazor-tab-app-azure.PNG" alt-text="Screenshot shows that your app is running in your Azure environment."::: 1. Move through the page to view the user details. You've completed the tutorial to build a tab app with Blazor. > [!NOTE] > > * Migrating your configurable tab to static tab is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).+> * Migrating your configurable tab to static tab is available only in classic Teams client and isn't available in the [new Teams client](~/resources/teams-updates.md). > * To migrate your configurable tab to static tab, use the app manifest v1.16 or later. -Static tab capability is extended to support group chat and meetings. You can update your existing configurable tab to static tab and add different scopes to the static tab. +Static tab capability is extended to support group chat, channels, and meetings. You can update your existing configurable tab to static tab and add different scopes to the static tab. To change your configurable tab to static tab: To change your configurable tab to static tab: "team" ], "context": [ - "personalTab", + "personalTab", + "channelTab", "privateChatTab", "meetingChatTab", "meetingDetailsTab", To change your configurable tab to static tab: ], ``` - For more information, see [configuration page](~/tabs/how-to/create-tab-pages/configuration-page.md) and [static tab.](~/tabs/how-to/create-personal-tab.md#extend-static-tabs-to-group-chat-and-meetings) + For more information, see [configuration page](~/tabs/how-to/create-tab-pages/configuration-page.md) and [static tab.](~/tabs/how-to/create-personal-tab.md#extend-static-tabs-to-group-chat-channels-and-meetings) If your app supports [configurable tab,](~/tabs/how-to/create-tab-pages/configuration-page.md#configuration-page-for-tabs) then you must continue to keep the `configurableTab` property in your app manifest to ensure the backward compatibility of previously pinned tabs. As you can only pin static tabs from now, it's important that previous configurable tabs continue to be supported. |
| platform | Create Personal Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-personal-tab.md | Title: Create a personal tab -description: Learn to build a personal tab. Select the Node.js, ASP.NET Core, or ASP.NET Core MVC environment. Generate app, add content, create package, build and run app. +description: Learn to build a personal tab. Select the Node.js, ASP.NET Core, or ASP.NET Core MVC environment. Generate app, add content, create package, build, and run app. ms.localizationpriority: high zone_pivot_groups: teams-app-environment Following are the steps to create a personal tab: * **Your (company) name? (max 32 characters)** - 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 is used in the app manifest. Enter a company name or select **Enter** to accept the default name. * **Which manifest version would you like to use?** After your tab is uploaded to Microsoft Teams through **ngrok** and successfully 1. In the left pane of Teams, select ellipses ●●● and then choose your uploaded app to view your personal tab. - Now you've successfully created and added your personal tab in Teams. - - As you've your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) your personal tab. + Your personal tab is successfully created and added in Teams.You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams. ::: zone-end Following are the steps to create a personal tab: 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **razor-csharp** folder and open **PersonalTab.sln**. -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: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application is loaded properly. In a browser, go to the following URLs: * `<http://localhost:3978/>` * `<http://localhost:3978/personalTab>` ngrok http 3978 --host-header=localhost :::image type="content" source="~/assets/images/tab-images/personaltabaspnetuploaded.png" alt-text="Default Tab"::: - Now you've successfully created and added your personal tab in Teams. - - As you've your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) your personal tab. + Your personal tab is successfully created and added in Teams. You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams. + ::: zone-end Following are the steps to create a personal tab: 1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **mvc-csharp** folder and open **PersonalTabMVC.sln** in Visual Studio. -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: +1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application is loaded properly. In a browser, go to the following URLs: * `<http://localhost:3978>` * `<http://localhost:3978/personalTab>` ngrok http 3978 --host-header=localhost :::image type="content" source="~/assets/images/tab-images/personaltabaspnetmvccoreuploaded.png" alt-text="Personal tab"::: - Now you've successfully created and added your personal tab in Teams. -- As you've your personal tab in Teams, you can also [reorder](#reorder-static-personal-tabs) your personal tab. + Your personal tab is successfully created and added in Teams.You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams. ::: zone-end ngrok http 3978 --host-header=localhost Blazor lets you build interactive web UIs using C#, instead of JavaScript. You can create a tab app and a bot app with Blazor and the latest version of Visual Studio. > [!NOTE] > Teams Toolkit doesn't support the message extension capability. If you don't have a Teams developer account, you can get it for free. Join the M 1. In the welcome screen, select **Set up E5 subscription**. 1. Set up your administrator account. After you finish, the following screen appears. - :::image type="content" source="../../assets/images/build-your-first-app/dev-program-subscription.PNG" alt-text="Screenshot of Microsoft 365 Developer Program displaying your Microsoft 365 developer subscriptions for the blazor app."::: + :::image type="content" source="../../assets/images/build-your-first-app/dev-program-subscription.PNG" alt-text="Screenshot of Microsoft 365 Developer Program displaying your Microsoft 365 developer subscriptions for the Blazor app."::: 1. Sign in to Teams using the administrator account you just set up. Verify that you've the **Upload a custom app** option in Teams. Now you've got all the tools and set up your accounts. Next, let's set up your d Start Teams app development by creating your first app. This app uses tab capability. This tutorial walks you through the steps to create, run, and deploy your first Teams app using .NET/Blazor. Use Teams Toolkit to create your first tab project. The toolkit takes you throug 1. Select **Create a new project**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-project.png" alt-text="Screenshot of Visual Studio with Create a new project option highlighted in red for blazor app."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-project.png" alt-text="Screenshot of Visual Studio with Create a new project option highlighted in red for Blazor app."::: The **Create a new project** page appears. Use Teams Toolkit to create your first tab project. The toolkit takes you throug 1. Select **Next**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png" alt-text="Screenshot of Create a new project with Next option highlighted in red for blazor app creation."lightbox="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png" alt-text="Screenshot of Create a new project with Next option highlighted in red for Blazor app creation."lightbox="../../assets/images/teams-toolkit-v2/blazor/vs-select-teams-app.png"::: The **Configure your new project** page appears. If you create a bot with a **personal** scope, it appears in the first tab posit ``` -## Extend static tabs to group chat and meetings +## Extend static tabs to group chat, channels, and meetings > [!NOTE]-> -> * Extend your static tabs to group chat and meetings is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md). -> * To extend your static tabs to group chat and meetings, use the app manifest v1.16 or later. +> * Extending static tab to group chat, channels, and meetings is available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md). +> * Extending static tab to group chat, channels, and meetings is available only in classic Teams client and isn't available in the [new Teams client](~/resources/teams-updates.md). +> * To extend your static tab to group chat, channels, and meetings, use the app manifest v1.16 or later. -You can extend static tabs to group chat and meetings. Instead of pinned app content, you can build tabs that behave more like apps as you can pin only one tab per app, for example, pinning a single YouTube app tab. +You can extend static tabs to group chat, channels, and meetings. Instead of pinned app content, you can build tabs that behave more like apps as you can pin only one tab per app, for example, pinning a single YouTube app tab. -To extend your static tabs to group chat and meetings, update your [app manifest](~/resources/schem#statictabs) with the `scopes` and `context` parameters in the `staticTabs` property. +To extend your static tabs to group chat, channels, and meetings, update your [app manifest](~/resources/schem#statictabs) with the `scopes` and `context` parameters in the `staticTabs` property. Following is an example of app manifest where a static tab is defined that works in all scopes and contexts in Teams: Following is an example of app manifest where a static tab is defined that works "entityId": "homeTab", "scopes": [ "personal", - "groupChat", + "groupChat", "team" ], "context": [ - "personalTab", + "personalTab", + "channelTab", "privateChatTab", "meetingChatTab", "meetingDetailsTab", "meetingSidePanel", - "meetingStage", - "channelTab" + "meetingStage" ], "name": "Contoso", "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", If a context isn't defined in the app manifest, by default Teams consider the fo ```json "context": [ - "personalTab", + "personalTab", + "channelTab", "privateChatTab", "meetingChatTab", "meetingDetailsTab", If a context isn't defined in the app manifest, by default Teams consider the fo ## Customizing your static tab in chats or meetings -To customize your static tab experience in chats or meetings, you can use the `setConfig` APIs in your tab to update the `contentUrl` and `websiteUrl`. Following is an example: +To customize your static tab experience in chats, channels, or meetings, you can use the `setConfig` APIs in your tab to update the `contentUrl` and `websiteUrl`. Following is an example: ```json pages.config.setConfig({ Only `contentUrl` and `websiteUrl` changes are supported for `setConfig`, other | Sample name | Description | .NET |Node.js|Manifest| |-|-||-|-|-|Tab personal| Sample app, which showcases custom personal Tab with ASP.NET core | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-personal/mvc-csharp) | NA |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-personal/mvc-csharp/demo-manifest/tab-personal.zip)| +|Tab personal| Sample app, which showcases custom personal Tab with ASP.NET core for group chat, channels, and meetings. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-personal/mvc-csharp) | NA |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-personal/mvc-csharp/demo-manifest/tab-personal.zip)| ## Next step |
| platform | What Are Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md | The following image shows Contoso channel tabs: There are few prerequisites that you must go through before working on tabs. -There are two types of tabs available in Teams, personal and group. [Personal tabs](~/tabs/how-to/create-personal-tab.md) are also known as static tabs. Personal (static) tabs, along with personal-scoped bots, are part of the personal apps that are scoped to a single user and pinned to the left navigation bar for easy access. Personal (static) tabs in personal scope continue to work the same way. However, you can now [extend static tabs](~/tabs/how-to/create-personal-tab.md#extend-static-tabs-to-group-chat-and-meetings) to group chat or meetings with a [customizable experience.](~/tabs/how-to/create-personal-tab.md#customizing-your-static-tab-in-chats-or-meetings) +There are two types of tabs available in Teams, personal and group. [Personal tabs](~/tabs/how-to/create-personal-tab.md) are also known as static tabs. Personal (static) tabs, along with personal-scoped bots, are part of the personal apps that are scoped to a single user and pinned to the left navigation bar for easy access. Personal (static) tabs in personal scope continue to work the same way. However, you can now [extend static tabs](~/tabs/how-to/create-personal-tab.md#extend-static-tabs-to-group-chat-channels-and-meetings) to group chat or meetings with a [customizable experience.](~/tabs/how-to/create-personal-tab.md#customizing-your-static-tab-in-chats-or-meetings) -You can extend static tabs to different scopes. Static tabs in chats or meetings behave more like apps, as you can pin only one tab per app. For example, you can only pin a single YouTube app tab in a meeting. Static tabs in meetings can also be pre-pinned in meetings by IT Admins. +You can extend static tabs to different scopes. Static tabs in chats, channels, or meetings behave more like apps, as you can pin only one tab per app. For example, you can only pin a single YouTube app tab in a meeting. Static tabs in meetings can also be pre-pinned in meetings by IT Admins. Following image shows static tabs with customizable experience added to different contexts in Teams: The following table helps you determine best fit for your app: | | Personal | Channels | Group chat | Meetings | ||||-|[Static tabs](~/tabs/how-to/create-personal-tab.md)|✔️|❌|✔️|✔️| +|[Static tabs](~/tabs/how-to/create-personal-tab.md)|✔️|✔️|✔️|✔️| |[Configurable tabs](~/tabs/how-to/create-channel-group-tab.md)|❌|✔️|✔️|✔️| >[!NOTE] The tab features are as follows: * Awareness of Microsoft Entra ID of the current user. * Locale awareness for the user to indicate language that is `en-us`. * Single sign-on (SSO) capability, if supported.-* Ability to use bots or app notifications to deep link to the tab or to a sub-entity within the service, for example an individual work item. +* Ability to use bots or app notifications to deep link to the tab or to a subentity within the service, for example an individual work item. * The ability to open a modal dialog from links within a tab. * Reuse of SharePoint web parts within the tab. ## Tabs user scenarios -**Scenario:** Bring an existing web-based resource inside Teams. \ +**Scenario:** Bring an existing web-based resource inside Teams. **Example:** You create a static tab in your Teams app that presents an informational corporate website to users. -**Scenario:** Add support pages to a Teams bot or messaging extension. \ +**Scenario:** Add support pages to a Teams bot or messaging extension. **Example:** You create static tabs that provide **about** and **help** webpage content to users. -**Scenario:** Provide access to items that your users interact with regularly for cooperative dialogue and collaboration. \ +**Scenario:** Provide access to items that your users interact with regularly for cooperative dialogue and collaboration. **Example:** You create a channel or group tab with deep linking to individual items. ## Understand how tabs work |
| platform | Teamsfx Preview And Customize App Manifest Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/TeamsFx-preview-and-customize-app-manifest-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Customize app manifest for Visual Studio +# Customize app manifest for Microsoft Visual Studio --The app manifest (previously called Teams app manifest) describes how your app integrates into Teams and is shared between local and remote environments. The default app manifest file is available at the `appPackage/manifest.json` file and the environment variables available from the `env/.env.{env}` file. +The app manifest (previously called Teams app manifest) describes how your app integrates into Microsoft Teams and is shared between local and remote environments. The default app manifest file is available at the `appPackage/manifest.json` file and the environment variables available from the `env/.env.{env}` file. The app manifest file contains some environment variables with the `${{XX_XX}}` format. You can define your own environment variables and add placeholders in the `manifest.json` file. The following are the .env and .json file examples: TEAMS_APP_DESCRIPTION=This is an amazing app ## Preview app manifest file -You can preview the app manifest file either **For Local** or **For Azure**. To preview the app manifest file, follow these steps: To preview the app manifest file: +You can preview the app manifest file either **For Local** or **For Azure**. To preview the app manifest file, follow these steps: 1. Select **Project** > **Teams Toolkit**. You can preview the app manifest file either **For Local** or **For Azure**. To :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/zip-app-package.png" alt-text="Screenshot shows the zip app package for local or Azure."::: - 1. From **Solution Explorer**, right-click on **MyTeamsApp2** (in this scenario the project name is MyTeamsApp2). Go to **Teams Toolkit** > **Zip App Package** and then select either **For Local** or **For Azure**. + 1. From **Solution Explorer**, right-click on **MyTeamsApp14** (in this scenario the project name is MyTeamsApp14). Go to **Teams Toolkit** > **Zip App Package** and then select either **For Local** or **For Azure**. :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/solution-zip.png" alt-text="Screenshot shows the solution zip app package for local or Azure."::: After you've previewed the app manifest file in Visual Studio, you can sync the You can also sync the local changes to Developer Portal from **Solution Explorer**: -1. Right-click on **MyTeamsApp2**. +1. Right-click on **MyTeamsApp14**. 1. Select **Teams Toolkit**. 1. Select **Update Manifest in Teams Developer Portal** When you create a Teams command bot using Visual Studio, two app IDs are registe * [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md) * [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md) * [Provision cloud resources using Visual Studio](provision-vs.md)-* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) ----## Customize app manifest in Teams Toolkit --Teams Toolkit in Visual Studio loads app manifest (previously called Teams app manifest) from `manifest.template.json` with configurations from `state.{env}.json` and `config.{env}.json` while provisioning and preparing app dependencies. You can also create Teams app in Developer Portal with app manifest. --After scaffolding, in the app manifest template file under `templates/appPackage` folder, -`manifest.template.json` is shared between local and remote environment. --In the app manifest template, select **Project** > **Teams Toolkit** > **Open Manifest File**. ---### Customize app manifest in Teams Toolkit --The following list provides two types of placeholders in `manifest.template.json`: --* `{{state.xx}}` is predefined placeholder, whose value is resolved by Teams Toolkit defined in `state.{env}.json`. It's recommended not to modify the values in `state.{env}.json`. -* `{{config.manifest.xx}}` is customized placeholder, whose value is resolved from `config.{env}.json`. --You can add a customized parameter by: --* Adding a placeholder in `manifest.template.json` with pattern: `{{config.manifest.xx}}`. -* Adding a config value in `config.{env}.json`. -- ```JSON - { - "manifest": { - "KEY": "VALUE" - } - } - ``` --## Preview app manifest in Teams Toolkit --You can preview values in app manifest in two ways: --* When you hover over the placeholder in `manifest.template.json`, you can see the values for **dev** and **local** environment. -- :::image type="content" source="images/vs-hover-placeholder1-v4.png" alt-text="Screenshot is an example showing when you hover over placeholder, can view the values for dev and local environment." lightbox="images/vs-hover-placeholder1-v4.png"::: --* You can also hover over the key beside each placeholder in `manifest.template.json`, where you can see the same values for **dev** and **local** environment. -- :::image type="content" source="images/vs-hover-key-placeholder-v4.png" alt-text="Screenshot is an example showing when you hover over key beside placeholder can view the same values for dev and local environment." lightbox="images/vs-hover-key-placeholder-v4.png"::: --If the environment hasn't been provisioned, or the Teams app dependencies haven't been prepared, it indicates that the values for the placeholder haven't been generated. You can follow the guidance inside the hover to generate corresponding values. --## Preview app manifest file --You can either upload your custom app for local, or deploy for Azure to preview the app manifest file. You can preview the app manifest file by performing the following steps: --1. Select **Project** > **Teams Toolkit**. --1. Select to trigger **Prepare Teams App Dependencies** or **Provision in the Cloud** that generates configuration for either for local or remote Teams app. -- :::image type="content" source="images/vs-preview-manifest1-v4.png" alt-text="Screenshot is an example of showing the preview app manifest file." lightbox="images/vs-preview-manifest1-v4.png"::: --There are two ways to upload zip app package before you can preview the app manifest file: --1. From the list of menu select, **Project** > **Teams Toolkit**. --1. Select **Zip App Package**, then select either **For Local** or **For Azure**. -- :::image type="content" source="images/vs-zip1-v4.png" alt-text="Screenshot is an example of showing the navigation to zip app package for local and Azure." lightbox="images/vs-zip1-v4.png"::: --1. You can also upload zip app package from **Solution Explorer** section, if you right-click on **MyTeamsApp1**. In this scenario, the project name is MyTeamsApp1. --1. Select **Teams Toolkit** > **Zip App Package** > **For Local** or **For Azure**. -- :::image type="content" source="images/vs-solution-explorer1-v4.png" alt-text="Screenshot is an example of showing the list of Teams toolkit menus from solution explorer." lightbox="images/vs-solution-explorer1-v4.png"::: --Teams Toolkit generates the zip app package, the following steps help to preview the app manifest file: --1. Right-click on **manifest.template.json** file under **appPackage** folder. --1. Select **Preview Manifest File** > **For Local** or **For Azure**. -- :::image type="content" source="images/vs-preview1-v4.png" alt-text="Screenshot is an example of showing the preview app manifest menu for local and Azure." lightbox="images/vs-preview1-v4.png"::: --This displays the preview of the app manifest file in Visual Studio. --## Sync local changes to Developer Portal --After you've previewed the app manifest file in Visual Studio, you can sync the local changes to Developer Portal. --Select **Project** > **Teams Toolkit** > **Update Manifest in Teams Developer Portal**. ---You can also sync the local changes to Developer Portal from the context menu of **Solution Explorer** section. After the local changes are synced, you can preview the app manifest file in Developer Portal. ---The changes are updated to Developer Portal. --> [!TIP] -> -> * Select **Overwrite and update** or **Cancel** from the **Warning** dialog box to make any manual updates that can be overwritten in Developer Portal. ---When you create a Teams command bot using Visual Studio, two app IDs are registered in Microsoft Entra ID. You can identify the app IDs in Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**. ----## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [App manifest schema](~/resources/schem) -* [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md) -* [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md) -* [Provision cloud resources using Visual Studio](provision-vs.md) -* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) -+* [Deploy Teams app to the cloud using Visual Studio][Deploy Microsoft Teams app to the cloud using Microsoft Visual Studio](deploy-vs.md) |
| platform | Add Single Sign On Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/add-single-sign-on-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs # Add single sign-on to your Teams app Microsoft Teams provides single sign-on (SSO) function for an app to obtain signed in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting some of the Microsoft Entra ID flows and integrations behind some simple APIs. This enables you to add SSO features easily to your Teams app. - ## Enable Single Sign-on in Teams Toolkit for Visual Studio -Teams provides SSO function for an app using the Teams Toolkit for Microsoft Visual Studio. +Teams provides SSO function for an app using the Microsoft Teams Toolkit for Microsoft Visual Studio. 1. Open **Visual Studio**. 1. Select **Project** > **Teams Toolkit** > **Add Authentication Code**. - :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-add-authentication-code.PNG" alt-text="Screenshot shows the add authentication code."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-add-authentication-code.PNG" alt-text="Screenshot shows the option to add authentication code."::: Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** folder, including the app manifest (previously called Teams app manifest) template file for Microsoft Entra application and authentication redirect pages. Link the files to your Teams application by updating authentication configurations to ensure the SSO works for your application. -* In the Microsoft Entra app manifest file, specify the URIs such as, the URI to identify the Microsoft Entra authentication app and the redirect URI for returning token. +* In the Microsoft Entra app manifest file, specify the URIs (Uniform Resource Identifier) such as, the URI to identify the Microsoft Entra authentication app and the redirect URI for returning token. * In the app manifest file, add the SSO application to link it with Teams application. * Add SSO application information in Teams Toolkit configuration files in order to make sure the authentication app can be registered on backend service and start Teams Toolkit when you're debugging or previewing Teams application. Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo 1. Update Microsoft Entra app manifest: `TeamsFx-Auth/aad.manifest.template.json` file is a Microsoft Entra app manifest template. You can copy and paste this file to any folder of your project, and rename as `aad.manifest.json` and take note of the path to this file. The following updates in the template to create/update a Microsoft Entra app for SSO: - * `identifierUris`: It's used to uniquely identify and access the resource. Set the correct redirect Uris into `identifierUris` to successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest#identifieruris-attribute). + * `identifierUris`: It's used to uniquely identify and access the resource. Set the correct redirect URIs into `identifierUris` to successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest#identifieruris-attribute). ```json "identifierUris":[ Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo ] ``` - * `replyUrlsWithType`: It lists registered redirect_uri values that Microsoft Entra ID accepts as destinations when returning tokens. Set necessary redirect Uris into `replyUrlsWithType` to successfully return token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest#replyurlswithtype-attribute). + * `replyUrlsWithType`: It lists registered redirect_uri values that Microsoft Entra ID accepts as destinations when returning tokens. Set necessary redirect URIs into `replyUrlsWithType` to successfully return token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest#replyurlswithtype-attribute). ```json "replyUrlsWithType":[ Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo } ``` -1. Update `appsettings.json` and `appsettings.Development.json` files for Microsoft Entra related configs needs to be configure to your .Net project settings: +1. Update `appsettings.json` and `appsettings.Development.json` files for Microsoft Entra related configs needs to be configured to your .NET project settings: ```json TeamsFx: { Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo ## Teams bot application 1. Update Microsoft Entra app manifest in the `TeamsFx-Auth/aad.manifest.template.json` file.-1. You can copy the file to any folder of your project, and rename as the `aad.manifest.json` file and note the path to this file for later reference. Make the following updates in the template to create/update a Microsoft Entra app for SSO. +1. You can copy the file to any folder of your project, and rename as the `aad.manifest.json` file and note the path to this file for later reference. Make the following updates in the template to create or update a Microsoft Entra app for SSO. - * `identifierUris`: Used to uniquely identify and access the resource. You need to set correct Redirect Uris into "identifierUris" for successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest#identifieruris-attribute). + * `identifierUris`: Used to uniquely identify and access the resource. You need to set correct Redirect URIs into "identifierUris" for successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest#identifieruris-attribute). Example for TeamsFx Bot Template: Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo > [!NOTE] > You can use `${{ENV_NAME}}` to reference variables in the `env/.env.{TEAMSFX_ENV}` file. - * `replyUrlsWithType`: It lists registered redirect_uri values that Microsoft Entra ID accepts as destinations when returning tokens. You need to set necessary Redirect Uris into "replyUrlsWithType" for successfully returning token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest#replyurlswithtype-attribute). + * `replyUrlsWithType`: It lists registered redirect_uri values that Microsoft Entra ID accepts as destinations when returning tokens. You need to set necessary Redirect URIs into "replyUrlsWithType" for successfully returning token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest#replyurlswithtype-attribute). Example: Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo 1. TeamsFx__Authentication__ClientSecret: Microsoft Entra app client secret. 1. TeamsFx__Authentication__OAuthAuthority: Microsoft Entra app oauth authority. 1. TeamsFx__Authentication__Bot__InitiateLoginEndpoint: Auth start page for Bot.- 1. TeamsFx__Authentication__ApplicationIdUri: Microsoft Entra app identify uris. + 1. TeamsFx__Authentication__ApplicationIdUri: Microsoft Entra app identifies URIs. Example for TeamsFx Bot template: Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo > [!NOTE] > If you want add additional configs to your Azure Webapp, add the configs in the webAppSettings. -1. Update the `appsettings.json` file and the `appsettings.Development.json` file for Microsoft Entra related configs that needs to be configured to your .Net project settings: +1. Update the `appsettings.json` file and the `appsettings.Development.json` file for Microsoft Entra related configs that needs to be configured to your .NET project settings: ``` TeamsFx: { Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** fo * [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md) * [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md) * [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app)----## Add SSO to Teams app in Visual Studio --For applications that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Microsoft Entra consent flow. --**Advantages** --The following are the advantages of SSO in Teams: --* SSO with Microsoft Entra ID refreshes the authentication token in the background, which minimizes the number of times users need to enter their sign in credentials. --* SSO signs in the user in different devices automatically, while using the app. --Teams tabs and bots have similar flow for SSO support, for more information, see: --1. [SSO authentication in Tabs](~/tabs/how-to/authentication/tab-sso-overview.md) -2. [SSO authentication in Bots](~/bots/how-to/authentication/auth-aad-sso-bots.md) --## Enable SSO support --Teams Toolkit helps you add SSO to the following Teams capabilities in Visual Studio: --* Tab -* Notification bot: Restify server -* Command bot --### Add SSO using Visual Studio --You can perform the following steps to add SSO using Teams Toolkit in Visual Studio: --1. Open **Visual Studio**. -1. Select **Create a new project** under **Get started**. -- :::image type="content" source="images/vs-2022-preview-create-proj_1-v4.png" alt-text="open visual studio code to create a new project" lightbox="images/vs-2022-preview-create-proj-v4.png"::: --1. Enter **Teams** in the search box and from the list, select **Microsoft Teams app**. -1. Select **Next**. -- :::image type="content" source="images/vs-2022-preview-select-teams_1-v4.png" alt-text="Select a Microsoft Teams project by searching for teams." lightbox="images/vs-2022-preview-select-teams-v4.png"::: -- The **Configure your new project** window appears. --1. Enter your **Project name**. -- > [!NOTE] - > The project name you are entering is automatically filled in the Solution name also. If you want, you can change the solution name with no affect on project name. --1. Select **Create**. -- > [!NOTE] - > You can change the default location of your project by selecting ●●●. -- :::image type="content" source="images/vs-2022-preview-create-teamsapp_1-v4.png" alt-text="enter project and solution name" lightbox="images/vs-2022-preview-create-teamsapp-v4.png"::: -- The **Create a new Teams application** window appears. --1. Select the required application type under **Create a new Teams application**, clear the **Configure with single sign-on** check box. --1. Select **Create**. -- :::image type="content" source="images/vs-2022-preview-create-teamsapp-sso-uncheck_1-v4.png" alt-text="select the teams app to be created and uncheck sso check box" lightbox="images/vs-2022-preview-create-teamsapp-sso-uncheck-v4.png"::: --1. After the project is created, select **Project** > **Teams Toolkit** > **Add Authentication Code**. -- :::image type="content" source="images/vs-2022-preview-add-auth-code_1-v4.png" alt-text="Add authentication code" lightbox="images/vs-2022-preview-add-auth-code-v4.png"::: --## Customize your project using Teams Toolkit --The following table lists the changes by Teams Toolkit: -- |**Type**|**File**|**Purpose**| - |--|--|--| - |Create|`aad.template.json` under `template\appPackage`|Microsoft Entra application manifest represents your Microsoft Entra app. `template\appPackage` helps you to register a Microsoft Entra app during local debug or provision.| - |Modify|`manifest.template.json` under `template\appPackage`|`webApplicationInfo` object is added into your app manifest (previously called Teams app manifest) template. Teams requires this field to enable SSO. When local debugging or provisioning is triggered, you can see the change.| - |Modify|`appsettings.json` and `appsettings.Development.json`|Configs are added and used by TeamsFx SDK to your app settings. You can update and add the `TeamsFx` object if you have other `appsettings` files.| - |Create|`Auth\tab`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\tab` for a tab project.| - |Create|`Auth\bot`|Reference code, auth redirect pages and a `README.md` file are generated in the folder `Auth\bot` for a bot project.| --> [!NOTE] -> Teams Toolkit makes no changes in the cloud by adding SSO, until you trigger a local debug. You can update your code to ensure SSO is working in the project. --## Update your app to use SSO --The following steps help you to enable SSO in your app: --> [!NOTE] -> The changes are based on the scaffold templates. ---<br> -<br><details> -<summary><b>Tab project -</b></summary> --1. You can move `GetUserProfile.razor` file from the `Auth\tab` folder to the`Components\` folder. `GetUserProfile` file implements a function that uses TeamsFx SDK to call Microsoft Graph API to get the user info. --1. After getting the user info, you can replace `<AddSSO />` with `<GetUserProfile />` in the `Components/Welcome.razor` file. --</details> -<details> -<summary><b>Command bot project -</b></summary> --1. Ensure to upgrade your SDK version to: - * TeamsFx, version 1.1.0 or later. - * `Microsoft.Bot.Builder`, version 4.17.1 or later. --2. Create a `Pages` folder, and move files to the `Auth\bot\Pages`, which contains HTML pages that are hosted by bot app. When SSO authentication process is initiated with Microsoft Entra ID, they redirect user to the HTML pages. --3. After the user is redirected to the HTML pages, you can create `SSO` folder and move files in `Auth\bot\SSO`. This folder contains three files as a reference for SSO implementation: -- * `SsoDialog.cs`: This file creates a `ComponentDialog` that is used for SSO. -- * `SsoOperations.cs`: This file implements a class in the function to get user info with SSO token. You can follow the method defined in `SsoOperations.cs` and create your own method that requires SSO token. -- * `TeamsSsoBot.cs`: This file creates a `TeamsActivityHandler` with `SsoDialog` that adds and triggers a command `showUserInfo`. -- > [!NOTE] - > Ensure to replace `{Your_NameSpace}` with your project namespace in the three files (`SsoDialog.cs`, `SsoOperations.cs`, and `TeamsSsoBot.cs`). -- :::image type="content" source="images/vs-2022-preview-replace-namespace_1-v4.png" alt-text="Replace name space with the your name space"::: --4. You can now update `Program.cs`. -- 1. You can find the following code in the file `Program.cs`, and add the code blocks in step b: -- ```csharp - builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>(); - ``` -- 1. Add the following code blocks: -- ```csharp - builder.Services.AddRazorPages(); - // Create the Bot Framework Adapter with error handling enabled. - builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>(); - builder.Services.AddSingleton<IStorage, MemoryStorage>(); - // Create the Conversation state. (Used by the Dialog system itself.) - builder.Services.AddSingleton<ConversationState>(); - // The Dialog that will be run by the bot. - builder.Services.AddSingleton<SsoDialog>(); - // Create the bot as a transient. In this case the ASP Controller is expecting an IBot. - builder.Services.AddTransient<IBot, TeamsSsoBot<SsoDialog>>(); - builder.Services.AddOptions<AuthenticationOptions>().Bind(builder.Configuration.GetSection("TeamsFx").GetSection(AuthenticationOptions.Authentication)).ValidateDataAnnotations(); - builder.Services.AddOptions<BotAuthenticationOptions>().Configure<IOptions<AuthenticationOptions>>((botAuthOption, authOptions) => { - AuthenticationOptions authOptionsValue = authOptions.Value; - botAuthOption.ClientId = authOptionsValue.ClientId; - botAuthOption.ClientSecret = authOptionsValue.ClientSecret; - botAuthOption.OAuthAuthority = authOptionsValue.OAuthAuthority; - botAuthOption.ApplicationIdUri = authOptionsValue.ApplicationIdUri; - botAuthOption.InitiateLoginEndpoint = authOptionsValue.Bot.InitiateLoginEndpoint; - }).ValidateDataAnnotations(); - ``` -- 1. After you've added the code blocks, you can find and delete the following code in the file: -- ```csharp - // Create the bot as a transient. In this case the ASP Controller is expecting an IBot. - builder.Services.AddTransient<IBot, TeamsBot>(); - ``` -- 1. Find the following code and replace it with the codes given in step e: -- ```csharp - app.UseEndpoints(endpoints => - { - endpoints.MapControllers(); - }); - ``` -- 1. Replace the codes in step d with the following codes: -- ```csharp - app.UseEndpoints(endpoints => - { - endpoints.MapControllers(); - endpoints.MapRazorPages(); - }); - ``` --5. You can open `Templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the app manifest: -- ```JSON - { - "title": "show", - "description": "Show user profile using Single Sign On feature" - } - ``` --</details> -<details> -<summary><b>Add a new command to the bot -</b></summary> --The following steps help to add a new command, after you've added SSO in your project: --> [!NOTE] -> The instructions apply only to command bot. --1. You can create a new method in class `SsoOperations` in `SSO/SsoOperations` and add your own business logic to call Graph API: -- ```csharp - public static async Task GetUserImageInfo(ITurnContext stepContext, string token, BotAuthenticationOptions botAuthOptions) - { - await stepContext.SendActivityAsync("Retrieving user information from Microsoft Graph ..."); - var authProvider = new DelegateAuthenticationProvider((request) => - { - request.Headers.Authorization = - new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token); - return Task.CompletedTask; - }); - var graphClient = new GraphServiceClient(authProvider); - // You can add following code to get your photo size: - // var photo = await graphClient.Me.Photo.Request().GetAsync(); - // await stepContext.SendActivityAsync($"Size of your photo is: {photo.Width} * {photo.Height}"); - } - ``` --1. Find the following line to register a new command: -- ```csharp - ((SsoDialog)_dialog).addCommand("showUserInfo", "show", SsoOperations.ShowUserInfo); - ``` --1. You can register the new command `"photo"` to configure the method `'GetUserImageInfo'` by adding the following code: -- ```csharp - ((SsoDialog)_dialog).addCommand("getUserImageInfo", "photo", SsoOperations.GetUserImageInfo); - ``` --1. Open the file `templates\appPackage\manifest.template.json`, and add the following lines under `command` in `commandLists` of your bot to register your command in the app manifest: -- ```JSON - { - "title": "photo", - "description": "Show user photo size using Single Sign On feature" - } - ``` --</details> -<br> -- > [!NOTE] - > Teams Toolkit uses the Microsoft Entra application manifest file to register a Microsoft Entra app for SSO. You need to press **F5** to debug your app and test your SSO configuration. --<a name='customize-azure-ad-app-registration'></a> --## Customize Microsoft Entra app registration --The [Microsoft Entra app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of app registration. You can update the app manifest file as needed. If you need to include more API permissions to access your required APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template). -For more information on viewing your Microsoft Entra app in Azure portal, see [how to view Microsoft Entra application in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal). --### Simplified SSO with TeamsFx --TeamsFx helps to reduce your tasks by using SSO and accessing cloud resources down to single-line statements with zero configuration. With TeamsFx SDK, you can write user authentication code with the user identity `TeamsUserCredential`, such as in a browser environment. --For more information on TeamsFx SDK, see: --* [TeamsFx SDK](../TeamsFx-SDK.md) or [API reference](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true) -* [Microsoft Teams Framework (TeamsFx) Sample Gallery](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2) --<a name='how-to-use-an-existing-azure-ad-app'></a> --## How to use an existing Microsoft Entra app --For more information about how to use an existing Microsoft Entra app in your TeamsFx project, see the [steps](https://github.com/OfficeDev/TeamsFx/wiki/Using-existing-Azure-AD-app-in-TeamsFx-project). --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Prerequisites for creating your Teams app](tools-prerequisites-v4.md) -* [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md) -* [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md) -* [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app) - |
| platform | Build Environments V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/build-environments-v4.md | Last updated 11/29/2021 # Prepare to build apps using Teams Toolkit in Visual Studio -Teams Toolkit supports different build environments for creating apps. It helps to integrate Azure Functions capabilities and cloud services in the Teams app that you've built. +Microsoft Teams Toolkit supports different build environments for creating apps. It helps to integrate Microsoft Azure Functions capabilities and cloud services in the Microsoft Teams app that you've built. :::image type="content" source="../../assets/images/teams-toolkit-v2/buildapps-visual-studio.png" alt-text="Prepare to build apps using Teams Toolkit in visual studio."::: ## Build environments -Teams Toolkit in Visual Studio offers a set of environments to build your Teams app in C# using Blazor framework. +Teams Toolkit in Microsoft Visual Studio offers a set of environments to build your Teams app in C# using Blazor framework. ### Create your Teams app using C# and Blazor Azure Functions provides "compute on-demand" in two significant ways: 1. Allows implementing system's logic into your readily available blocks of code. These blocks are called functions. 1. Meets the requirement with as many resources and function instances as necessary as the requests increase. -Azure Functions integrates with an array of [cloud services](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) to provide feature-rich implementations. The following are the common scenarios for Azure Functions: +Azure Functions integrates with an array of [cloud services](deploy-vs.md#deploy-microsoft-teams-app-to-the-cloud-using-microsoft-visual-studio) to provide feature-rich implementations. The following are the common scenarios for Azure Functions: * Building a web API * Processing to database changes |
| platform | Create New Project Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/create-new-project-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Create a new Teams project using Teams Toolkit in Visual Studio -+# Create a new Microsoft Teams project using Microsoft Teams Toolkit You can create Teams apps in Visual Studio using the app templates. You can search and select any of the following Teams template to create a new app. -* Notification Bot -* Command Bot -* Workflow Bot +* Bot * Tab * Message Extension You can see Teams app templates already populated in Teams Toolkit for various T * [Prerequisites for all types of environment and create your Teams app](tools-prerequisites-v4.md) * [Prepare to build apps using Microsoft Teams Toolkit](build-environments-v4.md) * [Provision cloud resources using Visual Studio](provision-vs.md)-* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) ----In this article, learn how to create a new Teams project using Microsoft Visual Studio. --Teams Toolkit provides Microsoft Teams app templates in Visual Studio to create Teams apps. You can search and select the Teams app template that you require when you create a new project. Teams Toolkit for Visual Studio provides Teams app templates for creating: --* Tab app -* Command bot -* Notification bot -* Message Extension app --## Prerequisites --| | Install | For using... | -| | | | -| | **Required** | | -| | Visual Studio latest version | You can install the enterprise edition of Visual Studio, and then select the **ASP.NET and web development** workload and **Microsoft Teams Development Tools** for installing.| -| | Teams Toolkit | A Visual Studio workload that creates a project scaffolding for your app. Use latest version. | -| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to upload your Teams app into local Teams environment for testing app behavior. | - | | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Microsoft 365 account with the appropriate permissions to install an app. | --## Create a new Teams app --The steps to create a new Teams app are similar for all types of apps except notification bot. The following steps help you to create a new tab app: --1. Open Visual Studio. -1. Create a new project by using one of the following two options: -- * Select **Create a new project** under **Get started** to select a project template. - * Select **Continue without Code** to open Visual Studio without selecting a Teams Toolkit template. -- :::image type="content" source="images/vs-create-new-project1_1_2-v4.png" alt-text="Create new project with code from get started"::: -- * If your open Visual Studio code without selecting a Teams Toolkit template, select **File > New > Project** in Visual Studio to create a Teams app. -- :::image type="content" source="images/vs-create-new-project2_1_2-v4.png" alt-text="Create new project from file menu"::: -- * The **Create a new project** window appears. --1. Enter **teams** in the search box and then list, select **Microsoft Teams App** from the search results. -- :::image type="content" source="images/visual-studio-v4.png" alt-text="Search and choose microsoft teams app"::: --1. Select **Next**. -- The **Configure your new project** window appears. -- :::image type="content" source="images/vs-ms-teams-app-project-name_1_2-v4.png" alt-text="Name your application"::: -- 1. Enter a suitable name for your project. -- > [!NOTE] - > The project name you are entering is automatically filled in the **Solution name**. If you want, you can change the solution name with no effect on the project name. -- 1. Select the folder location where you want to create the project workspace. - 1. Enter a different solution name, if you want. - 1. If required, select the checkbox to save the project and solution in the same folder. For this tutorial, you don't need this option. - 1. Select **Create**. -- The **Create a new Teams application** window appears. --1. Ensure **Tab** is selected, then select **Create**. -- > [!NOTE] - > If you want to add single sign-on capability to your Teams app, select the Configure with single sign-on checkbox. For more information on single sign-in in Teams app created using Teams Toolkit, see [Add single sign-on to your Teams apps](/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio). -- :::image type="content" source="images/vs-ms-teams-app-type_3_1-v4.png" alt-text="Select the teams app type"::: --You can select any type of Teams app for your project. -- The **GettingStarted .txt** window appears. -- :::image type="content" source="images/vs-getting-started-page_1-v4.png" alt-text="Select the Getting Started teams toolkit"::: --You have created the app project scaffolding for your Teams app using Teams Toolkit template. --### Directory Structure --Teams Toolkit provides all components for building an app. After creating the project, you can view the project folders and files under **Solution Explorer**. --* **Directory structure for basic Teams apps** -- :::image type="content" source="images/vs-create-new-project-solution-explorer_1_3-v4.png" alt-text="Select the tab Solution Explorer teams toolkit"::: --* **Directory structure for scenario-based Teams apps** -- :::image type="content" source="images/vs-create-new-project-solution-explorer_2-v4.png" alt-text="Select the Solution Explorer teams toolkit"::: --## Teams app templates in Teams Toolkit for Visual Studio --You can see Teams app templates already populated in Teams Toolkit for various Teams app types. The following table lists all the templates available: --|Teams app templates |Description | -||| -|**Notification Bot** |Notification bot app can send notifications to your Teams client. There are multiple ways to trigger the notification. For example, trigger the notification by HTTP request, or by time. You can select triggered notification based on your business scenario. | -|**Command Bot** |You can type a command to interact with the bot using the command bot app. | -|**Tab** |Tab app shows a webpage inside Teams, and it enables single sign-on (SSO) using Teams account. | -|**Message Extension** |Message extension app implements simple features like creating an Adaptive Card, searching Nugget packages, unfurling links for the `dev.botframework.com` domain. | --After the project is created, Teams Toolkit automatically opens **GettingStarted** window. You can see the instructions in **GettingStarted** window and check out the different features in Teams Toolkit. --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Build a Teams app with Blazor](~/sbs-gs-blazorupdate.yml) -* [Build a Teams app with C# or .NET](~/sbs-gs-csharp.yml) -* [Prerequisites for all types of environment and create your Teams app](tools-prerequisites-v4.md) -* [Prepare to build apps using Microsoft Teams Toolkit](build-environments-v4.md) -* [Provision cloud resources using Visual Studio](provision-vs.md) -* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) -+* [Deploy Teams app to the cloud using Visual Studio][Deploy Microsoft Teams app to the cloud using Microsoft Visual Studio](deploy-vs.md) |
| platform | Debug Background Process V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-background-process-v4.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Debug background processes using Visual Studio -+# Debug background processes using Microsoft Visual Studio Visual Studio uses the `launchSettings.json` file to store configuration information that describes how to start an ASP.NET Core application. The file holds essential application settings used solely during development on the local machine. You can find it in the Properties folder of your project. It specifies details like the command to run, the browser's URL, and the required environment variables to be set. -After selecting **Prepare Teams App Dependencies**, Teams Toolkit updates the launchUrl using the real Teams app ID, Teams tenant ID, and Microsoft 365 account. +After selecting **Prepare Teams App Dependencies**, Microsoft Teams Toolkit updates the launchUrl using the real Microsoft Teams app ID, Teams tenant ID, and Microsoft 365 account. ## Start local tunnel You can view the project folders and files under **Explorer** in Visual Studio a * [Provision cloud resources in Visual Studio](provision-vs.md) * [Deploy Teams app to the cloud VS](deploy-vs.md) * [Customize app manifest in Teams Toolkit](TeamsFx-preview-and-customize-app-manifest-vs.md)----The local debug process involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Microsoft Visual Studio Code. The Visual Studio Code launches the debuggers, and Microsoft Edge or Google Chrome launches a new browser instance. --The debug process workflow is as follows: --1. `launch.json` file configures the debugger in Visual Studio Code. --2. Visual Studio Code runs the compound **preLaunchTask**, **Start Teams App Locally** in `.vscode/tasks.json` file. --3. Visual Studio Code then launches the debuggers specified in the compound configurations, such as **Attach to Bot**, **Attach to Backend**, **Attach to Frontend**, and **Launch Bot**. --4. Microsoft Edge or Google Chrome launches a new browser instance and opens a web page to load Teams client. --## Verification of prerequisites --Teams Toolkit checks the following prerequisites during the debug process: --* Node.js, applicable for the following project types: -- |Project type|Node.js LTS version| - |-|--| - |Tab | 14, 16 (recommended) | - |SPFx Tab | 14, 16 (recommended)| - |Bot | 14, 16 (recommended)| - |Message extension | 14, 16 (recommended) | --For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type). --* Teams Toolkit prompts you to sign in to Microsoft 365 account, if you haven't signed in with your valid credentials. -* Custom app upload for your developer tenant is turned on, to prevent local debug termination. -* Teams Toolkit installs Ngrok npm package `ngrok@4.2.2` in `~/.fx/bin/ngrok`, if Ngrok isn't installed or the version doesn't match the requirement. Ngrok binary version 2.3 is applicable for bot and message extension. The Ngrok binary is managed by Ngrok npm package in `/.fx/bin/ngrok/node modules/ngrok/bin`. -* Teams Toolkit installs Azure Functions Core Tools npm package. `azure-functions-core-tools@3` for **Windows** and **MacOs** in `~/.fx/bin/func`, if Azure Functions Core Tools version 4 isn't installed or the version doesn't match the requirement. The Azure Functions Core Tools npm package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates. -* Teams Toolkit installs .NET Core SDK for **Windows** and **MacOS** in `~/.fx/bin/dotnet`.NET Core SDK version applicable for Azure Functions, if .NET Core SDK isn't installed or the version doesn't match the requirement. For Linux, the local debug terminates. -- The following table lists the .NET Core versions: -- | Platform | Software| - | | | - |Windows, macOS (x64), and Linux | **3.1 (recommended)**, 5.0, 6.0 | - |macOS (arm64) |6.0 | --* Development certificate, if the development certificate for localhost isn't installed for tab in **Windows** or **MacOS**, then Teams Toolkit prompts you to install it. -* Azure Functions binding extensions defined in `api/extensions.csproj`, if Azure Functions binding extensions isn't installed, then Teams Toolkit installs Azure Functions binding extensions. -* npm packages, applicable for tab app, bot app, message extension, and Azure Functions. If npm packages aren't installed, then Teams Toolkit installs all npm packages. -* Bot and message extension, Teams Toolkit starts Ngrok to create an HTTP tunnel for bot and message extension. -* Ports available, if tab, bot, message extension, and Azure Functions ports are unavailable, the local debug terminates. -- The following table lists the ports available for components: -- | Component | Port | - | | | - | Tab | 53000 | - | Bot or message extension | 3978 | - | Node inspector for bot or message extension | 9239 | - | Azure Functions | 7071 | - | Node inspector for Azure Functions | 9229 | --<!-- The following table lists the limitations if the required software is unavailable for debugging: --|Project type|Installation| Limitation| -|-|--|--| -|Tab without Azure functions | Node.js LTS versions 10, 12, **14 (recommended)**, 16 | The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| -|Tab with Azure functions | Node.js LTS versions 10, 12, **14 (recommended)** |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| -|Bot | Node.js LTS versions 10, 12, **14 (recommended)**, 16|The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| -|Message extension | Node.js LTS versions 10, 12, **14 (recommended)**, 16 |The local debug terminates, if Node.js isn't installed or the version doesn't match the requirement.| -|Sign-in to Microsoft 365 account | Microsoft 365 credentials |Teams Toolkit prompts you to sign-in to Microsoft 365 account, if you haven't signed in. | -|Bot, message extension | Ngrok version 2.3| ΓÇó If Ngrok isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. </br> ΓÇó The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.| -|Azure functions | Azure Functions Core Tools version 3| ΓÇó If Azure Functions Core Tools isn't installed or the version doesn't match the requirement, the Teams Toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. </br> ΓÇó The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.| -|Azure functions |.NET Core SDK version|ΓÇó If .NET Core SDK isn't installed or the version doesn't match the requirement, the Toolkit installs .NET Core SDK for Windows and macOS in `~/.fx/bin/dotnet`.</br> ΓÇó For Linux, the local debug terminates.| -|Azure functions | Azure functions binding extensions defined in `api/extensions.csproj`| If Azure functions binding extensions isn't installed, the Toolkit installs Azure functions binding extensions.| -|NPM packages| NPM packages for tab app, bot app, message extension app, and Azure functions|If NPM isn't installed, the Toolkit installs all NPM packages.| -|Bot and message extension | Ngrok |Toolkit starts Ngrok to create a HTTP tunnel for bot and message extension. | --> [!NOTE] -> If tab, bot, message extension, and Azure functions ports are unavailable, the local debug terminates. --Use the following .NET Core versions: --| Platform | Software| -| | | -|Windows, macOs (x64), Linux | **3.1 (recommended)**, 5.0, 6.0 | -|macOs (arm64) |6.0 | --> [!NOTE] -> If the development certificate for localhost isn't installed for tab in Windows or MacOS, the Teams Toolkit prompts you to install it.</br> --> --When you select **Start Debugging (F5)**, Teams Toolkit output channel displays the progress and result after checking the prerequisites. -- :::image type="content" source="images/prerequisites-debugcheck1-v4.png" alt-text="Prerequisites check summary."::: --## Register and configure Teams app --In the set-up process, Teams Toolkit prepares the following registrations and configurations for your Teams app: --1. [Registers and configures Microsoft Entra app](#registers-and-configures-microsoft-azure-active-directoryazure-ad-app) --1. [Registers and configures bot](#registers-and-configures-bot) --1. [Registers and configures Teams app](#registers-and-configures-teams-app) --<a name='registers-and-configures-microsoft-azure-active-directoryazure-ad-app'></a> --### Registers and configures Microsoft Entra app --1. Registers a Microsoft Entra app. --2. Creates a Client Secret. --3. Exposes an API. -- a. Configures Application ID URI. For tab, `api://localhost/{appId}`. For bot or message extension, `api://botid-{botid}`. -- b. Adds a scope named `access_as_user`. Enables it for **Admin and users**. --4. Configures API permissions. Adds Microsoft Graph permission to **User.Read**. -- The following table lists the configuration of the authentication: -- | Project type | Redirect URIs for web | Redirect URIs for single-page application | - | | | | - | Tab | `https://localhost:53000/auth-end.html` | `https://localhost:53000/auth-end.html?clientId={appId>}` | - | Bot or message extension | `https://ngrok.io/auth-end.html` | NA | -- The following table lists the configurations of Microsoft 365 client application with the client IDs: -- | Microsoft 365 client application | Client ID | - | | | - | Teams desktop, mobile | 1fec8e78-bce4-4aaf-ab1b-5451cc387264 | - | Teams web | 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 | - | microsoft365.com (formerly office.com) | 4345a7b9-9a63-4910-a426-35363201d503 | - | microsoft365.com (formerly office.com) | 4765445b-32c6-49b0-83e6-1d93765276ca | - | Microsoft 365 desktop app | 0ec893e0-5785-4de6-99da-4ed124e5296c | - | Outlook desktop | d3590ed6-52b3-4102-aeff-aad2292ab01c | - | Outlook Web Access | 00000002-0000-0ff1-ce00-000000000000 | - | Outlook Web Access | bc59ab01-8403-45c6-8796-ac3ef710b3e3 | --### Registers and configures bot --For tab app or message extension: --1. Registers a Microsoft Entra application. --1. Creates a Client Secret for the Microsoft Entra application. --1. Registers a bot in [Microsoft Bot Framework](https://dev.botframework.com/) using the Microsoft Entra application. --1. Adds Teams channel. --1. Configures messaging endpoint as `https://{ngrokTunnelId}.ngrok.io/api/messages`. --### Registers and configures Teams app --Registers a Teams app in [Developer Portal](https://dev.teams.microsoft.com/home) using the app manifest (previously called Teams app manifest) template in `templates/appPackage/manifest.template.json`. --After registration and configuration of the app, local debug files generates. --## Take a tour of your app source code --You can view the project folders and files under **Explorer** in Visual Studio Code after the Teams Toolkit registers and configures your app. The following table lists the local debug files and the configuration types: --| Folder name| Contents| Debug configuration type | -| | | | -| `.fx/configs/config.local.json` | Local debug configuration file | The values of each configuration generate and saves during local debug. | -| `templates/appPackage/manifest.template.json` | The app manifest template file for local debug | The placeholders in the file during local debug. | -| `tabs/.env.teams.local` | Environment variables file for tab | The values of each environment variable generate and saves during local debug. | -| `bot/.env.teamsfx.local` | Environment variables file for bot and message extension| The values of each environment variable generate and saves during local debug. | -| `api/.env.teamsfx.local` | Environment variables file for Azure Functions | The values of each environment variable generate and saves during local debug. | --## See also --* [Teams Toolkit Visual Studio Overview](teams-toolkit-fundamentals-vs.md) -* [Debug your Teams app locally using Visual Studio](debug-local-vs.md) -* [Provision cloud resources in Visual Studio](provision-vs.md) -* [Deploy Teams app to the cloud VS](deploy-vs.md) -* [Customize app manifest in Teams Toolkit](TeamsFx-preview-and-customize-app-manifest-vs.md) - |
| platform | Debug Local Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-local-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Debug your Teams app locally using Visual Studio +# Debug your Microsoft Teams app locally using Microsoft Visual Studio --Visual Studio allows you to debug tabs, bots, and message extensions. You can debug your app locally in Visual Studio using Teams Toolkit by performing: +Visual Studio allows you to debug tabs, bots, and message extensions. You can debug your app locally in Visual Studio using Microsoft Teams Toolkit by performing: ## Set up dev tunnel (Only for bot and message extension) In the debug dropdown menu: 1. Select **Dev Tunnels**. -1. If you have already have an existing dev tunnel, select the existing tunnel from the list. For example, in the following image **PublicDevTunnel** is an existing dev tunnel. +1. If you have already an existing dev tunnel, select the existing tunnel from the list. For example, in the following image **PublicDevTunnel** is an existing dev tunnel. -1. If you haven't already created a tunnel, select **Create a Tunnel...**. A new window appears. +1. If you haven't created a tunnel, select **Create a Tunnel...**. A new window appears. :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-devtunnel.PNG" alt-text="Screenshot shows the dev tunnel for debug option."::: To debug your app after you create a project, perform the following steps: 1. Select **Add** to install your app in Teams. - :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-add-loadapp.png" alt-text="Screenshot shows to add app."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-add-loadapp.png" alt-text="Screenshot shows the option to add app."::: You can also use the hot reload function of Visual Studio during debug. For more information, see [.NET hot reload](https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/). To debug your app after you create a project, perform the following steps: * [Introduction to Azure Functions](/azure/azure-functions/functions-overview) * [Use Teams Toolkit to provision cloud resources](provision-vs.md) * [Deploy to the cloud](deploy-vs.md)----Teams Toolkit helps you to debug and preview your Microsoft Teams app locally. During the debug process, Teams Toolkit automatically starts app services, launches debuggers, and side-loads the Teams app. You can preview your Teams app in Teams web client locally after debugging. --Visual Studio allows you to debug tab, bot, and message extension. You can debug your app locally in Visual Studio using Teams Toolkit by performing: --## Set up ngrok (Only for Bot and Message Extension app) --Use command prompt to run this command: --``` -ngrok http 5130 -``` --### Set up your Teams Toolkit --Perform the following steps using the Teams Toolkit to debug your app after you create a project: --1. Right-click on your project. -1. Select **Teams Toolkit** > **Prepare Teams App Dependencies**. -- :::image type="content" source="images/vs-localdebug-teamsappdependencies-v4.png" alt-text="Teams app dependencies for local debug" lightbox="images/vs-localdebug-teamsappdependencies-v4.png"::: -- > [!NOTE] - > In this scenario the project name is MyTeamsApp1. -- Your Microsoft 365 account needs to have the custom app upload permission before you sign in. Ensure your Teams app can be uploaded to the tenant, otherwise your Teams app can fail to run in Teams Client. --1. Sign in to your **Microsoft 365 Account**, then select **Continue**. -- :::image type="content" source="images/vs-localdebug-signin-m365-v4.png" alt-text="Sign in to Microsoft 365 account"::: -- > [!Note] - > Learn more about the custom app upload permission by visiting [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md). --1. Select **Debug** > **Start Debugging**, or directly select **F5**. -- :::image type="content" source="images/vs-localdebug-Startdebug-v4.png" alt-text="Start Debugging"::: -- Visual Studio launches the Teams app inside Microsoft Teams client in your browser. -- > [!Note] - > Learn more by visiting [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md). --1. After Microsoft Teams is loaded, select **Add** to install your app in Teams. -- :::image type="content" source="images/vs-localdebug-add-loadapp-v4.png" alt-text="Select add to load app"::: -- > [!TIP] - > You can also use hot reload function of Visual Studio during debug. Learn more by visiting <https://aka.ms/teamsfx-vs-hotreload>. -- > [!NOTE] - > Ensure to post HTTP request to `http://localhost:5130/api/notification` to trigger notification, when you're debugging Notification Bot app. If you've selected HTTP trigger when creating the project, you can use any API tools such as curl (Windows Command Prompt), Postman, or any other API tool. -- > [!TIP] - > If you make any changes to the app manifest (previously called Teams app manifest) file (/templates/appPackage/manifest.template.json), ensure that you perform the Prepare Teams App Dependencies command. Before you try to run the Teams app again locally. --## Next step --> [!div class="nextstepaction"] -> [Debug background process](debug-background-process-v4.md) --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Introduction to Azure Functions](/azure/azure-functions/functions-overview) -* [Deploy to the cloud](deploy-vs.md) -+* [Manage multiple environments in Teams Toolkit](TeamsFx-multi-env-v4.md) |
| platform | Debug Overview Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-overview-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Debug your Teams app using Visual Studio +# Debug your Microsoft Teams app using Microsoft Visual Studio --Teams Toolkit automates app startup services, initiates debugging, and uploads Teams app. After debugging, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tabs, bots, and message extensions. +Microsoft Teams Toolkit automates app startup services, initiates debugging, and uploads Teams app. After debugging, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tabs, bots, and message extensions. ## Prerequisites You can launch Teams app as a web app instead of running the app in Teams client * [Use Teams Toolkit to provision cloud resources](provision-vs.md) * [Deploy to the cloud](deploy-vs.md) * [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md)----Teams Toolkit helps you to debug and preview your Microsoft Teams app. Debug is the process of checking, detecting, and correcting issues or bugs to ensure the program runs successfully in Teams. --Teams Toolkit automates app startup services, initiates debug, and uploads Teams app. After debug, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tab, bot, and message extension. During the debug process, Teams Toolkit supports the following debug features: --* Prepare Teams app dependencies -* Start debugging -* Toggle breakpoints -* Hot reload -* Stop debugging --## Prerequisites --| | Install | For using... | -| | | | -| | **Required** | | -| | Visual Studio 2022 version 17.3 | You can install the enterprise edition of Visual Studio, and install the "ASP.NET "workload and Microsoft Teams Development Tools. | -| | Teams Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. | -| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call - all in one place. | -| | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. | -| | [Microsoft 365 developer account](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. | -| | Azure Tools and [Microsoft Azure CLI](/cli/azure/install-azure-cli) | Azure tools to access stored data or to deploy a cloud-based backend for your Teams app in Azure. | -| | **Optional** | | -| |[Ngrok](https://ngrok.com/) | Ngrok is used to forward external messages from Azure Bot Framework to your local machine.| --## Key features of Teams Toolkit --You can see the following key features of Teams Toolkit, that automates the local debugging process of your Teams app: --### Prepare Teams app dependencies --Teams Toolkit prepares local debug dependencies and registers your Teams app in the tenant in your account. For Bot and Message Extension apps, Teams Toolkit will register and configure bot. --### Start debugging --You can perform debugging with a single operation, press **F5** to start debugging. Teams Toolkit builds code, starts services, and launches the app in your browser. --### Toggle breakpoints --You can toggle breakpoints in the source codes of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with the Teams app in your web browser. -The following image shows the toggle breakpoints: ---### Hot reload --Select **Hot Reload** to apply your changes in your Teams app when you want to update and save the source codes simultaneously during debugging. ---Select the option **Hot Reload on File Save** from the dropdown to enable auto hot reload. -- - > [!Tip] - > To learn more about Hot Reload function of Visual Studio during debug you can visit <https://aka.ms/teamsfx-vs-hotreload>. --### Stop debugging --Select **Stop Debugging (Shift+F5)** when the local debug is complete. ---## Customize debug settings --You can customize debug setting for your Teams app to use your bot endpoints and add environment variables: --### Use your bot endpoint --You can set `siteEndpoint` configuration in the `.fx/configs/config.local.json` file to your endpoint. --```JSON -"bot": { - "siteEndpoint": "https://baidu.com" -} -``` --### Add environment variables --You can add `environmentVariables` to `launchSettings.json` file. ---### Launch Teams app as a web app --You can launch Teams app as a web app instead of running in Teams client. --1. Select **Properties** > **launchSettings.json** in Solution Explorer panel under your project. -1. Remove the `launchUrl` from the file. -- :::image type="content" source="images/vs-localdebug-launch-teamsapp-webapp-v4.png" alt-text="Launch teams as a web app by removing launchurl" lightbox="images/vs-localdebug-launch-teamsapp-webapp-v4.png"::: --1. Right-click on **Solution** and select **Properties**. -- :::image type="content" source="images/vs-localdebug-solution-properties-v4.png" alt-text="Right click solution and select properties" lightbox="images/vs-localdebug-solution-properties-v4.png"::: --1. Select **Configuration Properties** > **Configuration** in the dialog box. -1. Clear the **Deploy** checkbox. -1. Select **OK**. -- :::image type="content" source="images/vs-localdebug-disable-deploy-v4.png" alt-text="Uncheck deploy in configuration properties" lightbox="images/vs-localdebug-disable-deploy-v4.png"::: --## Next --> [!div class="nextstepaction"] -> [Debug your app locally](debug-local-vs.md) --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Debug background process](debug-background-process-v4.md) -* [Use Teams Toolkit to provision cloud resources](provision-vs.md) -* [Deploy to the cloud](deploy-vs.md) -* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md) - |
| platform | Deploy Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/deploy-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Deploy Teams app to the cloud using Visual Studio +# Deploy Microsoft Teams app to the cloud using Microsoft Visual Studio Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure. - You can deploy your Teams app to the following cloud resources: * Azure App Services You can deploy your Teams app to the following cloud resources: > > Before you deploy your app code to Azure cloud, you need to complete the provisioning of cloud resources. -To deploy Teams app using Teams Toolkit, follow these steps: +To deploy Teams app using Microsoft Teams Toolkit, follow these steps: 1. Open **Visual Studio**. 1. Select **Create a new project** or open an existing project from the list. This action uploads and deploys the project to Azure Storage. * [Create new Teams app in Visual Studio](~/toolkit/toolkit-v4/create-new-project-vs.md) * [Provision cloud resources using Visual Studio](provision-vs.md) * [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md)-* [Debug your Teams app locally using Visual Studio](debug-local-vs.md#debug-your-teams-app-locally-using-visual-studio) ----## Deploy Teams app to the cloud using Visual Studio --You can deploy the following to the cloud: --* The tab app, such as front-end apps are deployed to Azure Storage, configured for static web hosting. -* The notification bot app with Azure Functions triggers can be deployed to Azure Functions. -* The bot app or message extension is deployed to Azure App Services. --After deploying, you can preview the app in Teams client or the web browser before you start using it. --## Deploy Teams app using Teams Toolkit --1. Open **Visual Studio**. -1. Select **Create a new project** or open an existing project from the list. -1. Right-click on your project **MyTeamsApp4** > **Teams Toolkit** > **Deploy to the cloud...**. -- :::image type="content" source="images/vs-deploy-cloud_1-v4.png" alt-text="deploy to cloud"::: -- > [!NOTE] - > In this scenario the project name is MyTeamsApp4. --1. In the pop-up window that appears, select **Deploy**. -- :::image type="content" source="images/vs-deploy-confirmation-v4.png" alt-text="Deploy to cloud confirmation dialog"::: -- After the deploy process completes, you can see a pop-up with the confirmation that it's successfully deployed. You can also check the status in the output window. -- :::image type="content" source="images/VS-deploy-popup-v4.png" alt-text="deploy to cloud popup"::: --### Preview your app --To preview your app, you need to create a **Zip App Package** and upload into the Teams client. --1. Select **Project** > **Teams Toolkit** > **Zip App Package**. -1. Select **For Local** or **For Azure** to generate Teams app package. -- :::image type="content" source="images/vs-deploy-ZipApp-package1-v4.png" alt-text="deploy to cloud popup."::: --**To preview your app in Teams client** --1. Select **Project** > **Teams Toolkit** > **Preview in Teams**. -- :::image type="content" source="images/vs-deploy-preview-teams2-v4.png" alt-text="Preview Teams app in teams client"::: -- Now your custom app is uploaded into Teams. -- :::image type="content" source="images/sideload-teams_1-v4.PNG" alt-text="Screenshot shows the custom app upload in teams client."::: --The other way to preview your app: --1. Right-click on your project **MyTeamsApp4** under **Solution Explorer**. -1. Select **Teams Toolkit** > **Preview in Teams** to launch the Teams app in web browser. -- :::image type="content" source="images/vs-deploy-preview-teams2-v4.png" alt-text="Preview teams app in web browser"::: -- > [!NOTE] - > The same menu options are available in Project menu. -- Now your custom app is uploaded into Teams. -- :::image type="content" source="images/sideload-teams_1-v4.PNG" alt-text="Screenshot shows the custom app upload in teams client."::: --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Create and deploy an Azure cloud service](/azure/cloud-services/cloud-services-how-to-create-deploy-portal) -* [Create new Teams app in Visual Studio](~/toolkit/toolkit-v4/create-new-project-vs.md) -* [Provision cloud resources using Visual Studio](provision-vs.md) -* [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md) -* [Debug your Teams app locally using Visual Studio](debug-local-vs.md#debug-your-teams-app-locally-using-visual-studio) -+* [Debug your Teams app locally using Visual Studio][Deploy Microsoft Teams app to the cloud using Microsoft Visual Studio](deploy-vs.md) |
| platform | Explore Teams Toolkit Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/explore-Teams-Toolkit-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs # Explore Teams Toolkit in Visual Studio +In this article, learn how to explore Microsoft Teams Toolkit and its features in Microsoft Visual Studio. -> [!IMPORTANT] ->We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. --In this article, learn how to explore Teams Toolkit and its features in Visual Studio. --Teams Toolkit appears as a workload in the app you've created in Visual Studio. For more information, see [How to create a Teams app](create-new-project-vs.md). +Teams Toolkit appears as a workload in the app you've created in Visual Studio. For more information, see [How to create a Microsoft Teams app](create-new-project-vs.md). You can view Teams Toolkit in Visual studio in the following ways: To view the Teams Toolkit from the **Project** menu, follow these steps: 1. Select **Teams Toolkit**. > [!NOTE]- > In this scenario the project name is **MyTeamsApp**. + > In this scenario the project name is **MyTeamsApp14**. :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/ttk-solution explorer.png" alt-text="Screenshots the Teams toolkit operations from Project"::: After you've created your Teams app project, you can use the following options t |Function |Description | ||| |**Prepare Teams App Dependencies** |Before you debug locally, ensure that you prepare your app for dependencies. This option helps you to set up the local debug dependencies and register Teams app in the Teams platform. You must have a Microsoft 365 account. For more information, see [how to debug your Teams app locally using Visual Studio](debug-local-vs.md). |-|**Open Manifest File** | Helps you to open the app manifest (previously called Teams app manifest) file. Hover over the parameters to preview the values. For more information, see [how to edit app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | -|**Update Manifest in Teams Developer Portal** | Helps you to update the app manifest file. When you update the app manifest file, only then you can redeploy the app manifest file to Azure without deploying the whole project again. Use this command to update your changes to remote. For more information, see [how to edit app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | +|**Update Manifest in Teams Developer Portal** | Helps you to update the app manifest (previously called Teams app manifest) file. When you update the app manifest file, only then you can redeploy the app manifest file to Azure without deploying the whole project again. Use this command to update your changes to remote. For more information, see [how to edit app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | |**Add Authentication Code** | Helps you obtain signed-in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting from the Microsoft Entra ID, which flows and integrates with simple APIs. For more information, see [how to add single sign-on to Teams app](add-single-sign-on-vs.md). | |**Provision in the Cloud** | Helps you to create Azure resources that host your Teams app. For more information, see [how to provision cloud resources using Visual Studio](provision-vs.md). |-|Deploy to the Cloud | Helps you to copy your code to the cloud resources that you provisioned in Microsoft Entra ID. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-vs.md). | -|**Preview in Teams** | Launches the Teams web client and lets you preview the Teams app in your browser. | +|**Deploy to the Cloud** | Helps you to copy your code to the cloud resources that you provisioned in Microsoft Entra ID. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-vs.md). | +|**Preview in** | Launches the Teams web client, Outlook and the Microsoft 365 app lets you preview the Teams app in your browser. | |**Zip App Package** | Generates a Teams app package in the **Build** folder under the project. You can upload the app package to the Teams client and run the Teams app. |+|**Teams Toolkit Documentation** | Launches a web page to view Teams Toolkit documentation. | ## See also After you've created your Teams app project, you can use the following options t * [App manifest schema](~/resources/schem) * [Prepare to build apps using Teams Toolkit](build-environments-v4.md) ---Teams Toolkit appears within Visual Studio as a workload. When you've created a Teams Toolkit app, you can see Teams Toolkit options in the following ways: --# [Project](#tab/prj) --You can access Teams Toolkit under **Project**. --1. Select **Project** > **Teams Toolkit**. -1. You can access different Teams Toolkit options: -- :::image type="content" source="images/teams-toolkit-project-menu-v4.png" alt-text="Teams toolkit project menu" lightbox="images/teams-toolkit-project-menu-v4.png"::: --# [Solution Explorer](#tab/solutionexplorer) -- You can access Teams Toolkit under **Solution Explorer**. --1. Select **View** > **Solution Explorer** to view **Solution Explorer** panel. -1. Right-click on your app project name. -1. Select **Teams Toolkit** to see the menu items. -- :::image type="content" source="images/teams-toolkit-operations-menu1_1_2-v4.png" alt-text="Teams toolkit operations from Project"::: -- > [!NOTE] - > In this scenario the project name is **MyTeamsApp**. ----After you've created your Teams app project, you can use the following options to develop and build your app: ---|Function |Description | -||| -|**Prepare Teams App Dependencies** |Before you debug locally, ensure that you prepare your app for dependencies. This option helps you to set up the local debug dependencies and register Teams app in the Teams platform. You must have a Microsoft 365 account. For more information, see [how to debug your Teams app locally using Visual Studio](debug-local-vs.md). | -|**Open Manifest File** | This option helps you to open the app manifest file. Hover over the parameters to preview the values. For more information, see [how to edit the app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | -|**Update Manifest in Teams Developer Portal** | This option helps you to update the app manifest file. When you update the app manifest file, only then you can redeploy the app manifest file to Azure without deploying the whole project again. Use this command to update your changes to remote. For more information, see [how to edit the app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | -|**Add Authentication Code** | This option helps you obtain signed-in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting from the Microsoft Entra ID which flows and integrates with simple APIs. For more information, see [how to add single sign-on to Teams app](add-single-sign-on-vs.md). | -|**Provision to the Cloud** | This option helps you to create Azure resources that host your Teams app. For more information, see [how to provision cloud resources using Visual Studio](provision-vs.md). | -|**Deploy to the Cloud** | This option helps you to copy your code to the cloud resources that you provisioned in Microsoft Entra ID. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio). | -|Preview in Teams | This option launches the Teams web client and lets you preview the Teams app in your browser. | -|**Zip App Package** | This option generates a Teams app package in the `Build` folder under the project. You can upload the app package to the Teams client and run the Teams app. | --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Create a new Teams app using Teams Toolkit](create-new-project-vs.md) -* [App manifest schema](~/resources/schem) -* [Prepare to build apps using Teams Toolkit](build-environments-v4.md) - |
| platform | Install Teams Toolkit Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/install-Teams-Toolkit-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Install Teams Toolkit in Visual Studio +# Install Teams Toolkit in Microsoft Visual Studio --> [!IMPORTANT] -> We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. --You can learn how to install Teams Toolkit and enjoy enhanced experience for app development. +You can learn how to install Microsoft Teams Toolkit and enjoy enhanced experience for app development. ## Install Teams Toolkit for Visual Studio -1. Download and open [Visual Studio installer](https://aka.ms/VSDownload). +1. Download and open [Microsoft Visual Studio installer](https://aka.ms/VSDownload). 1. Select **Install**. If you've already installed Visual Studio, select **Modify**. Visual Studio installer shows all workloads. - :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/visual-studio-install.png" alt-text="Screenshot shows how to install Visual studio."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/visual-studio-install.png" alt-text="Screenshot shows how to install Visual studio." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/visual-studio-install.png"::: 1. From the installation screen, perform the following steps: 1. Select **Workloads** > **ASP.NET and web development**. 1. On the right pane, go to **Installation details** > **Optional** and then select **Microsoft Teams development tools**.- 1. Select **Install**. Visual Studio is installed and a pop-up apears. + 1. Select **Install**. Visual Studio is installed and a pop-up appears. 1. Select **Launch**. The Visual Studio 2022 window appears. * [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) * [Prepare to build apps](build-environments-v4.md) * [Provision cloud resources](provision-vs.md)-* [Deploy Teams app to the cloud](deploy-vs.md) ----The Microsoft Entra manifest contain definitions of all the attributes of a Microsoft Entra application object in the Microsoft identity platform. --## Prerequisites --Before installing Teams Toolkit for Visual Studio, you need to [download and install Visual Studio 2022](https://aka.ms/VSDownload) using the Visual Studio Installer. -- > [!IMPORTANT] - > It's recommend you use Visual Studio 2022 version 17.4.1 or later for Teams Toolkit. It is the latest release to fix several known issues in previous versions of Visual Studio. --1. Download the [Visual Studio installer](https://aka.ms/VSDownload), or open it if already installed. -1. Select **Install** or select **Modify** if you've already installed Visual Studio. -- Visual Studio installer shows all workloads, whether installed or available for installation. -- :::image type="content" source="images/visual-studio-install_1_2-v4.png" alt-text="Screenshot shows how to install Visual studio."::: -- Select the following options to install Teams Toolkit: - 1. Select the **Workloads** tab, then select the **ASP.NET and web development** workload. - 1. On the right, select the **Microsoft Teams development tools** in the **Optional** section of the **Installation details** panel. - 1. Select **Install**. --1. After the installation completes, select **Launch** to open Visual Studio. -- :::image type="content" source="images/visual-studio-launch_1_2-v4.png" alt-text="Screenshot shows how to launch visual studio."::: --Teams Toolkit menu options are available in Visual Studio only when an app project created using Teams Toolkit is open. ---## Next steps --> [!div class="nextstepaction"] -> [Explore Teams Toolkit](explore-Teams-Toolkit-vs.md) --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Prepare to build apps](build-environments-v4.md) -* [Provision cloud resources](provision-vs.md) -* [Deploy Teams app to the cloud](deploy-vs.md) -+* [Deploy Teams app to the cloud](deploy-vs.md)s |
| platform | Provision Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/provision-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs -# Provision cloud resources in Visual Studio +# Provision cloud resources in Microsoft Visual Studio TeamsFx integrates with Azure and the Microsoft 365 cloud, which allows to place your app in Azure with a single command. TeamsFx integrates with Azure Resource Manager (ARM), which enables to provision Azure resources that your application needs for code approach. - ## Sign in to your Azure account 1. Open **Visual Studio**. After you open your project in Visual Studio, to provision cloud resources follo :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-warning.png" alt-text="Screenshot shows the provision warning."::: - The provisioning process creates resources in the Azure cloud. You can monitor the progress by observing the Teams Toolkit output window. + The provisioning process creates resources in the Azure cloud. You can monitor the progress by observing the Microsoft Teams Toolkit output window. 1. In the pop-up window that appears, to view all the resources that are provisioned, select **View provisioned resources**. If you don't have a Microsoft Entra app for your bot yet or you've one but don't * [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) * [Deploy Teams app to the cloud](deploy-vs.md) * [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md)----> [!NOTE] -> Teams toolkit doesn't provide support to deploy resources to other cloud platforms except Azure, however, the user can deploy manually. --## Provision using Teams Toolkit in Visual Studio --The following steps help you to provision cloud resources using Visual Studio: --### Sign in to your Microsoft 365 account --1. Open **Visual Studio**. -1. Open the Microsoft Teams app project. -1. Select **Project** > **Teams Toolkit** > **Prepare Teams App Dependencies**. -- :::image type="content" source="images/teams-toolkit-vs-prepare-app-dependencies1_1-v4.png" alt-text="Prepare teams app dependencies"::: --1. Select **Sign in...** to sign in to Microsoft 365 account. -- :::image type="content" source="images/teams-toolkit-vs-prepare1_1-v4.png" alt-text="Sign in to Microsoft 365"::: -- > [!NOTE] - > If you are already singed in, your username displays, or you have an option to **Add an account**. --1. Your default web browser opens to let you [sign in](https://developer.microsoft.com/en-us/microsoft-365/dev-program) to the account. --1. Select **Continue** after you've signed in to your account. -- :::image type="content" source="images/teams-toolkit-vs-signin-M365_1-v4.png" alt-text="Confirm by selecting continue"::: --### Sign in to your Azure account --1. Open **Visual Studio**. -1. Open the Teams App project. -1. Select **Project** > **Teams Toolkit** > **Provision in the cloud**. -- :::image type="content" source="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Sign in to Azure account"::: --1. Select **Sign in...** to sign in to your Azure account. -- :::image type="content" source="images/teams-toolkit-vs-provision-start_1-v4.png" alt-text="Sign in to your Azure account"::: -- > [!NOTE] - > If you're already signed in, your username is displayed, or you have an option to **Add an account**. -- After sign in to your Azure account using your credentials, the browser closes automatically. --### To provision cloud resources --After you open your project in Visual Studio: --1. Select **Project** > **Teams Toolkit** > **Provision in the cloud**. -- :::image type="content" source="images/teams-toolkit-vs-provision-in-cloud2-v4.png" alt-text="Provision in cloud"::: -- **Provision** window appears. --1. Enter the following details to provision your resources: -- 1. Select your **Subscription name** from the dropdown menu. - 1. Select your **Resource group** from the dropdown menu or you can create new **Resource group** by selecting **New...**. - 1. Select your **Region** from the dropdown menu. -- 1. Select **Provision**. -- :::image type="content" source="images/teams-toolkit-vs-provision-select-subscription1_1-v4.png" alt-text="Select resource group"::: --1. In the pop-up window that appears, Select **Provision**. -- :::image type="content" source="images/teams-toolkit-vs-provision-warning_1-v4.png" alt-text="Provision warning"::: -- The provisioning process creates resources in the Azure cloud. You can monitor the progress by observing the Teams Toolkit output window. --1. In the pop-up window that appears, Select **View Provisioned Resources** to view all the resources that were provisioned. -- :::image type="content" source="images/teams-toolkit-vs-provision-provision-success_1-v4.png" alt-text="View provisioned resources"::: --## Create resources --When you trigger provision command in Teams Toolkit or TeamsFx CLI, you can create the following resources: --* Microsoft Entra app under your Microsoft 365 tenant. -* Teams app registration under your Microsoft 365 tenant's Teams platform. -* Azure resources under your selected Azure subscription. --When you create a new project, you also need to create Azure resources. The ARM templates define all the Azure resources and help you to create the required Azure resources during provision. --The following list shows the resource creation for different types of app and Azure resources: -<br> --<details> -<summary><b>Resource creation for Teams Tab app</b></summary> --| Resource | Purpose | Description | -| | | | -| App service plan | Hosts your web app of tab. | Not applicable | -| App service | Hosts your Blazor tab app. | Not applicable | -| Manage identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams message extension app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. | -| App Service plan | Hosts your web bot app. | Not applicable | -| App Service | Hosts your bot app. | Adds user assigned identity to access other Azure resources. | -| Manage identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams command bot app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. | -| App service plan | Hosts your web bot app. | Not applicable | -| App service | Hosts your bot app. | Adds user assigned identity to access other Azure resources. | -| Manage identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams notification bot with HTTP trigger (Web API server) app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. | -| App service plan | Hosts your web bot app. | Not applicable | -| App service | Hosts your bot app. | Adds user assigned identity to access other Azure resources. | -| Managed Identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams notification bot with HTTP trigger (Azure Functions) app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams | -| Manage identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | -| Storage account | Helps to create function app. | Not applicable | -| App service plan | Hosts the function bot App. | Not applicable | -| Function app | Hosts your bot app. | - Adds user assigned identity to access other Azure resources.<br>- Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>- Adds an authentication setting that only allows requests from your Teams app.<br>- Adds app settings required by TeamsFx SDK. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams notification bot with timer trigger (Azure Functions) app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. | -| Manage identity | Authenticates Azure service-to-service requests. | Shares across different capabilities and resources. | -| Storage account | Helps to create function app. | Not applicable | -| App service plan | Hosts the function bot app. | Not applicable | -| Function app | Hosts your bot app. | - Adds user assigned identity to access other Azure resources.<br>-Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>- Adds an authentication setting that only allows requests from your Teams app.<br>- Adds app settings required by TeamsFx SDK. | --</details> -<br> --<details> -<summary><b>Resource creation for Teams notification bot with HTTP trigger + timer trigger (Azure Functions) app</b></summary> --| Resource | Purpose | Description | -| | | | -| Azure bot | Registers your app as a bot with the bot framework. | Connects bot to Teams. | -| Manage identity | Authenticate Azure service-to-service requests. | Shares across different capabilities and resources. | -| Storage account | Helps to create function app. | Not applicable | -| App service plan | Hosts the function bot app. | Not applicable | -| Function App | Hosts your bot app. | -Adds user assigned identity to access other Azure resources.<br>-Adds Cross-origin resource sharing (CORS) rule to allow requests from your tab app.<br>-Adds an authentication setting that only allows requests from your Teams app.<br>-Adds app settings required by TeamsFx SDK. | --</details> -<br> --### Manage your resources --You can sign in to [Azure portal](https://portal.azure.com/) and manage all resources created by Teams Toolkit. --* You can select a resource group from the existing list or the new resource group that you've created. -* You can see the details of the resource group you've selected in the overview section of the table of contents. --## Customize resource provision --Teams Toolkit enables you to use an infrastructure-as-code approach to define the Azure resources that you want to provision. You can change the configuration in Teams Toolkit as per your requirement. --Teams Toolkit uses ARM template to define Azure resources. The ARM template is a set of `bicep` files that defines the infrastructure and configuration for your project. You can customize Azure resources by modifying the ARM template. For more information, see [bicep document](/azure/azure-resource-manager/bicep). --Provision with ARM involves changing the following sets of files, parameters, and templates: --* ARM parameter files (`azure.parameters.{your_env_name}.json`) located in `.fx\configs` folder, for passing parameters to templates. -* ARM template files located in `templates\azure` folder contains following files: -- | File | Function | Allow customization | - | | | | - | main.bicep | Provides an entry point for Azure resource provision. | Yes | - | provision.bicep | Creates and configures Azure resources. | Yes | - | config.bicep | Adds TeamsFx required configurations to Azure resources. | Yes | - | provision\xxx.bicep | Creates and configures each Azure resource consumed by `provision.bicep`. | Yes | - | teamsfx\xxx.bicep | Adds TeamsFx required configurations to each Azure resource consumed by `config.bicep`.| No | --> [!NOTE] -> When you add resources or capabilities to your project, `teamsfx\xxx.bicep` is regenerated, you can't customize the same. To modify the bicep files, you can use Git to track your changes to `teamsfx\xxx.bicep` files. This doesn't make you lose any changes while adding resources or capabilities to your project. --The ARM template files use placeholders for parameters. The purpose of the placeholders is to ensure that new resources can be created in a new environment. The actual values are resolved from `.fx\states\state.{env}.json` file. --<a name='azure-ad-app-related-parameters'></a> --### Microsoft Entra app related parameters --| Parameter name | Default value placeholder | Meaning of the placeholder | How to customize | -| | | | | -| Microsoft 365 ClientId | {{state.fx-resource-aad-app-for-teams.clientId}} | Your app's Microsoft Entra app client Id created during provision. | [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1). | -| Microsoft 365 ClientSecret | {{state.fx-resource-aad-app-for-teams.clientSecret}} | Your app's Microsoft Entra app client secret is created during provision. | [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1). | -| Microsoft 365 TenantId | {{state.fx-resource-aad-app-for-teams.tenantId}} | Tenant Id of your app's Microsoft Entra app. | [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1). | -| Microsoft 365 OAuthAuthorityHost | {{state.fx-resource-aad-app-for-teams.oauthHost}} | OAuth authority host of your app's Microsoft Entra app. | [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1). | -| botAadAppClientId | {{state.fx-resource-bot.botId}} | Bot's Microsoft Entra app client Id is created during provision. | [Use an existing Microsoft Entra app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1).| -| botAadAppClientSecret | {{state.fx-resource-bot.botPassword}} | Bot's Microsoft Entra app client secret is created during provision. | [Use an existing Microsoft Entra app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1). | --### Reference environment variables in parameter files --When the value is secret, then you don't need to hardcode them in parameter file. The parameter files support referencing the values from the environment variables. You can use this syntax `{{$env.YOUR_ENV_VARIABLE_NAME}}` in the parameter values for Teams Toolkit to resolve from the current environment variable. --The following example reads the value of the `mySelfHostedDbConnectionString` parameter from the environment variable `DB_CONNECTION_STRING`: --```json -... - "mySelfHostedDbConnectionString": "{{$env.DB_CONNECTION_STRING}}" -... -``` --### Customize ARM template files --If the predefined templates don't meet your app requirements, you can customize the ARM templates under `templates\azure` folder. For example, you can customize the ARM template to create some extra Azure resources for your app. You need to have basic knowledge of bicep language, which is used to author ARM template. --To ensure the TeamsFx tool functions properly, customize ARM template that satisfies the following requirements: --* Ensure that the folder structure and file name remain unchanged. The tool may append new content to the existing files when you add more resources or capabilities to your project. -* Ensure that the name of auto-generated parameters and its property names remain unhanged. The auto-generated parameters may be used when you add more resources or capabilities to your project. -* Ensure that the output of auto-generated ARM template is unchanged. You can add more outputs to ARM template. The output is `.fx\states\state.{env}.json` and can be used in other features, such as deploy and validate manifest files. --### Customize Teams app --You can customize your bot or the Teams app by adding configuration snippets to use a Microsoft Entra app created for your Teams app. -Perform in the following ways to customize the Teams app: --* [Use an existing Microsoft Entra app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1) -* [Use an existing Microsoft Entra app for your bot](#use-an-existing-azure-ad-app-for-your-bot-1) --<a name='use-an-existing-azure-ad-app-for-your-teams-app-1'></a> --#### Use an existing Microsoft Entra app for your Teams app --You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use a Microsoft Entra app created for your Teams app. If you don't have a Microsoft Entra app yet or you already have one but don't know where to find the correct value, see [how to use existing Microsoft Entra app in TeamsFx project](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/using-existing-aad.md): --```json -"$schema": "https://aka.ms/teamsfx-env-config-schema", -"description": "...", -"manifest": { - ... -}, -// Add code below. Note you need to replace the placeholders with real values. -"auth": { - "clientId": "<your Microsoft Entra app client id>", - "clientSecret": "{{$env.ENV_NAME_THAT_STORES_YOUR_SECRET}}", - "objectId": "<your Microsoft Entra app object id>", - "accessAsUserScopeId": "<id of the access_as_user scope>" -} -``` --After adding the snippet, add your client secret to the related environment variable for Teams Toolkit to resolve the actual client secret during provision. --> [!NOTE] -> Ensure that not to share the same Microsoft Entra app in multiple environments. If you don't have permission to update the Microsoft Entra app, you get a warning with instructions to manually update the Microsoft Entra app. Follow these instructions to update your Microsoft Entra app after provision. --<a name='use-an-existing-azure-ad-app-for-your-bot-1'></a> --#### Use an existing Microsoft Entra app for your bot --You can add the following configuration snippet to `.fx\configs\config.{env}.json` file to use the Microsoft Entra app created for your bot: --```json -"bot": { - "appId": "<your Microsoft Entra app client id>", - "appPassword": "{{$env.ENV_NAME_THAT_STORES_YOUR_SECRET}}" -} -``` --After adding the snippet, add your client secret to the related environment variable for Teams Toolkit to resolve the actual client secret during provision. --#### Skip adding user for SQL database --If you get an insufficient permission error when Teams Toolkit tries to add user to SQL database, add the following configuration snippet to `.fx\configs\config.{env}.json` file to skip adding SQL database user: --```json -"skipAddingSqlUser": true -``` --## See also --* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) -* [Deploy Teams app to the cloud](deploy-vs.md) -* [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md) - |
| platform | Teams Toolkit Fundamentals Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/teams-toolkit-fundamentals-vs.md | -zone_pivot_groups: teams-toolkit-platform-vs # Teams Toolkit Visual Studio Overview --> [!IMPORTANT] -> We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. --Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio. +Microsoft Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Microsoft Visual Studio. * Start with a project template for common custom app built for your org (LOB app) scenarios or from a sample. * Save setup time with automated app registration and configuration. Teams Toolkit makes it simple to get started with app development for Microsoft ## Available for Visual Studio -Teams Toolkit v17.7 is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see how to [install Teams Toolkit](./install-Teams-Toolkit-vs.md). +Teams Toolkit is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see how to [install Teams Toolkit](./install-Teams-Toolkit-vs.md). | Teams Toolkit | Visual Studio | | - | - | Enhance the capabilities of Microsoft Copilot by converting your app into a plug ## See also -[Install Teams Toolkit](install-Teams-Toolkit-vs.md) ----Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio. --* Start with a project templates for common custom app built for your org (LOB app) scenarios or from a sample. -* Save setup time with automated app registration and configuration. -* Run and debug to Teams directly from familiar tools. -* Smart defaults for hosting in Azure using infrastructure-as-code and Bicep. -* Bring your app to your organization or the Teams Store using built-in publishing tools. ---## Available for Visual Studio --Teams Toolkit is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see [install Teams Toolkit](~/toolkit/toolkit-v4/install-Teams-Toolkit-vs.md). --| Teams Toolkit | Visual Studio | -| - | - | -| Installation | Available in the Visual Studio Installer | -| Build with | C#, .NET, ASP.NET, Blazor | --## Features --The following list provides the key features of Teams Toolkit: --* [Project templates](#project-templates) -* [Automatic registration and configuration](#automatic-registration-and-configuration) --### Project templates --You can start directly with the capability-focused templates such as tabs, bots, and message extensions or by following existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with templates for common custom app built for your org (LOB app) scenarios and smart defaults to accelerate your time to production. ---### Automatic registration and configuration --You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, configure settings, such as Microsoft Entra ID automatically. Sign in with your Microsoft 365 account to control where the app is configured and customized the included Microsoft Entra manifest when you need flexibility. --#### TeamsFx .NET SDK Reference docs --* [Microsoft.Extensions.DependencyInjection Namespace](/../dotnet/api/Microsoft.Extensions.DependencyInjection) -* [Microsoft.TeamsFx Namespace](/../dotnet/api/Microsoft.TeamsFx) -* [Microsoft.TeamsFx.Configuration Namespace](/../dotnet/api/Microsoft.TeamsFx.Configuration) -* [Microsoft.TeamsFx.Conversation Namespace](/../dotnet/api/Microsoft.TeamsFx.Conversation) -* [Microsoft.TeamsFx.Helper Namespace](/../dotnet/api/Microsoft.TeamsFx.Helper) --## See also --[Install Teams Toolkit](install-Teams-Toolkit-vs.md) -+[Install Teams Toolkit](install-Teams-Toolkit-vs.md) |
| platform | Tools Prerequisites V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/tools-prerequisites-v4.md | Last updated 02/21/2024 # Prerequisites for creating your Teams app using Visual Studio -Before you create your Teams app project, ensure that the prerequisites are in place. You must: +Before you create your Microsoft Teams app project, ensure that the prerequisites are in place. You must: * [Install required tools to build your Teams app](#install-required-tools-to-build-your-teams-app) * [Prepare Accounts to build your Teams app](#accounts-to-build-your-teams-app) To create a free Microsoft 365 developer account: ### Azure account -An Azure account allows you to host a Teams app or the back-end resources for your Teams app to Azure. You can do this using Teams Toolkit in Visual Studio Code. You must have an Azure subscription in the following scenarios: +An Azure account allows you to host a Teams app or the back-end resources for your Teams app to Azure. You can do this using Teams Toolkit in Visual Studio. You must have an Azure subscription in the following scenarios: * If you already have an existing app on a different cloud provider other than Azure, and you want to integrate the app on Teams platform. * If you want to host the back-end resources for your app using another cloud provider, or on your own servers if they're available in the public domain. An Azure account allows you to host a Teams app or the back-end resources for yo After creating the app, you must load your app in Teams without distributing it. This process is known as custom app upload. Sign in to your Microsoft 365 account to view this option. -You can verify if the custom app upload permission is enabled using either Visual Studio Code or Teams client. +You can verify if the custom app upload permission is enabled using Teams client. -<br> -<details> -<summary><b>Verify custom app upload permission using Visual Studio Code</b></summary> --You can use this method to verify custom app upload permission only after you have created an app project using Teams Toolkit. If you haven't created an app project, you can verify custom app upload permission using Teams client. --1. Open **Visual Studio Code**. -1. Select **Teams Toolkit** from the Visual Studio Code activity bar. -- > [!NOTE] - > If you're unable to see the option, see [install Teams Toolkit](../install-Teams-Toolkit.md) to install Teams Toolkit extension in Visual Studio Code. --1. Create a new Teams Toolkit app project or open an existing app project. --1. Select **Sign in to Microsoft 365** under **ACCOUNTS**. -- :::image type="content" source="images/accounts1-v4.png" alt-text="accounts details"::: --1. Verify if you can see the option **Sideloading enabled** as shown in the following image: -- :::image type="content" source="images/sideloading_1-v4.png" alt-text="Screenshot shows you the custom app upload in Teams."::: --</details> -<br> <details> <summary><b>Verify custom app upload permission using Teams client</b></summary> 1. In the Teams client, select **Apps** > **Manage your apps** > **Upload an app**. - :::image type="content" source="images/upload-app_1-v4.png" alt-text="Screenshot showing the selection of upload an app highlighted in red."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/upload-app.png" alt-text="Screenshot shows the option to select upload an app in Teams manage your apps."::: 1. Check if you can see the option **Upload a custom app** as you can see in the following image: - :::image type="content" source="images/upload-custom-app-v4.png" alt-text="Screenshot shows the option to upload a custom app."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/upload-custom-app.png" alt-text="Screenshot shows the option to select upload a custom apps."::: </details> If you have admin rights, you can enable custom app upload: 1. Select the :::image type="icon" source="images/showall icon-v4.png" border="false":::icon > **Teams**. - :::image type="content" source="images/m365-admin-center_1-v4.png" alt-text="Microsoft 365 Admin center"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/m365-admin-center.png" alt-text="Screenshot shows the option to select Teams under Admin centers."::: > [!Note] > It can take up to 24 hours for the Teams option to appear. You can [upload your custom app to a Teams environment](/microsoftteams/upload-custom-apps) for testing and validation. If you have admin rights, you can enable custom app upload: 1. Sign in to Microsoft Teams admin center with your admin credentials. 1. Select the :::image type="icon" source="images/showall icon-v4.png" border="false"::: icon > **Teams apps** > **Setup policies**. - :::image type="content" source="images/m365-admin-center1_1-v4.png" alt-text="Microsoft 365 Admin center1"::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/m365-admin-setup-policies.png" alt-text="Screenshot shows the option to select setup policies."::: 1. Select **Global (Org-wide default)**. :::image type="content" source="images/select-manage-policies_1-v4.png" alt-text="Select Manage Policies"::: - 1. Set toggle **Upload custom apps** to **On** position. + 1. Turn on the **Upload custom apps** toggle. :::image type="content" source="images/Upload-custom-apps_1-v4.png" alt-text="Upload Custom Apps"::: |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Discover Microsoft Teams platform features that are in developer preview. You ca Developer preview is a public program that provides early access to unreleased Teams platform features. -**2024 February** --* ***February 12, 2024***: [Build API-based message extension using Developer Portal for Teams.](messaging-extensions/build-api-based-message-extension.md) +**2024 March** -* ***February 06, 2024***: [Introduced systemDefault reserved activity type for send activity feed notifications](tabs/send-activity-feed-notification.md#requirements-to-use-the-activity-feed-notification-apis). +***March 15, 2023***: [Extend static tabs to channels with a customizable experience.](tabs/what-are-tabs.md) :::column-end::: :::row-end::: Developer preview is a public program that provides early access to unreleased T | **Date** | **Update** | **Find here** | | -- | | -|+| 12/02/2024 | Build API-based message extension using Developer Portal for Teams. | Build message extension > [Build API-based message extension](messaging-extensions/build-api-based-message-extension.md) | +| 06/02/2024 | Introduced `systemDefault` reserved activity type for send activity feed notifications| Build tabs > [Send activity feed notifications](tabs/send-activity-feed-notification.md#requirements-to-use-the-activity-feed-notification-apis)| |25/01/2024| Actions help to integrate your app into your user's workflow by enabling easy discoverability and seamless interaction with the content. | Extend your app across Microsoft 365 > [Actions in Microsoft 365](m365-apps/actions-in-m365.md)| |12/01/2024| Introduced Teams Toolkit command line interface v3. | Tools and SDKs > Tools > [Teams Toolkit command line interface](toolkit/Teams-Toolkit-CLI.md)| |