| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Tool Sdk Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/tool-sdk-overview.md | Teams platform brings you different tools to build and develop your Teams apps. | | Teams Toolkit | Yeoman Teams project | | -- | - | -- | | Environment variables | Use `.env` file | Use `.env` file |-| Generate manifest | Teams Toolkit auto-generates when creating projects. | gulp manifest | +| Generate manifest | Teams Toolkit autogenerates when creating projects. | gulp manifest | | Deploy Teams app | Automatically update use command `Teams: Update Teams App` |gulp tenant: deploy | | Create Microsoft Entra app | Automatically create when debugging or provisioning the project. Users can also use their existing Microsoft Entra app by filling in Teams app ID in `.env` file. | Manual | | Add SSO | Provide SSO-enabled samples and how-to guides to add SSO. | Manual | The following flow diagram explains the different SDKs, libraries, and its relat :::image type="icon" source="../../assets/icons/blue-dot.png" border="false"::: Library that requires another library to build apps. Your project automatically pulls into another library.</br> :::image type="icon" source="../../assets/icons/red-dot.png" border="false"::: Library that passes your app a reference to another library. </br> :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Library that's underlying service or API. </br> ### Teams Developer Platform SDKs & libraries The following flow diagram explains the different SDKs, libraries, and its relat | SDKs and libraries | Why do you need? | Related SDKs and libraries | | -- | -- | -- | | [Azure Bot Services](/azure/bot-service/bot-service-overview) | Azure Bot Service is a collection of libraries, tools, and services that let you build, test, deploy, and manage intelligent bots. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **Bot Framework SDK**. |-| [Azure OpenAI](/azure/cognitive-services/openai/overview) | Azure OpenAI Service provides REST API access to OpenAI's powerful language models including the GPT-3, Codex and Embeddings model series. Besides, the new GPT-4 and ChatGPT (gpt-35-turbo) model series are now available in preview. These models can be adapted to your specific task including but not limited to content generation, summarization, semantic search, and natural language to code translation. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **Teams AI Library**. | +| [Azure OpenAI](/azure/cognitive-services/openai/overview) | Azure OpenAI Service provides REST API access to OpenAI's powerful language models including the GPT-3, Codex, and Embeddings model series. Besides, the new GPT-4 and ChatGPT (gpt-35-turbo) model series are now available in preview. These models can be adapted to your specific task including but not limited to content generation, summarization, semantic search, and natural language to code translation. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **Teams AI Library**. | | [Microsoft Graph](/graph/sdks/sdks-overview) | Microsoft Graph is the gateway to data and intelligence in Microsoft 365. It provides a unified programmability model that you can use to access the tremendous amount of data in Microsoft 365, Windows, and Enterprise Mobility + Security. Use the wealth of data in Microsoft Graph to build apps for organizations and consumers that interact with millions of users. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **Microsoft Graph SDK**. | | [SharePoint REST API](/sharepoint/dev/sp-add-ins/get-to-know-the-sharepoint-rest-service?tabs=csom) | You can remotely engage with SharePoint data using any technology that supports Representational State Transfer (REST) web requests. You can perform basic create, read, update, and delete (CRUD) operations by using the REST interface provided by SharePoint. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **SharePoint Framework (SPFx)**. | | [Azure Fluid Relay](/azure/azure-fluid-relay/overview/overview) | The Fluid Framework is an open source, platform independent framework. Azure Fluid Relay is a managed service for the Fluid Framework that helps developers build real-time collaborative experiences and replicate states across connected JavaScript clients in real-time. | :::image type="icon" source="../../assets/icons/grey-dot.png" border="false"::: Used for **Fluid Framework**. |++### Recommendations ++| Tool | Details | +| -- | -- | +| Teams Toolkit | We recommend using [Teams Toolkit v5](../../toolkit/teams-toolkit-fundamentals.md) to build your apps, as Teams Toolkit v4 is available only with limited functionality. | +| Teams Toolkit CLI | We recommend that you use [Teams Toolkit CLI v3](../../toolkit/Teams-Toolkit-CLI.md) to build your Teams app, as TeamsFx CLI v1 and TeamsFx CLI v2 are available only with limited functionality. | |
| platform | Api Based Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/api-based-overview.md | Title: Build message extensions using API -description: Learn how to build a message extension from an OpenAPI description document (API) using Teams Toolkit. +description: Learn how to build a message extension from an OpenAPI description document (OAD) using using Developer Portal for Teams, Visual Studio Code, Teams Toolkit CLI, or Visual Studio. ms.localizationpriority: medium Last updated 10/19/2023 > * API-based message extensions only support search commands. > * API-based message extensions are available only in [public developer preview](../resources/dev-preview/developer-preview-intro.md). -Message extensions built using API (API-based) use a web service to manage user requests and responses and don't require a bot registration or a Bot Framework. You can configure and deploy API-based message extensions using Teams Toolkit. API-based message extensions help your apps to interact directly with third-party data, apps, and services, enhancing its capabilities. With APIs for message extension, you can: +Message extensions built using API (API-based) use a web service to manage user requests and responses and don't require a bot registration or a Bot Framework. You can configure and deploy API-based message extensions using Developer Portal for Teams, Visual Studio Code, Teams Toolkit command line interface (CLI), or Visual Studio. API-based message extensions help your apps to interact directly with third-party data, apps, and services, enhancing its capabilities. With APIs for message extension, you can: * Retrieve real-time information, such as latest news coverage on a product launch. * Retrieve knowledge-based information, for example, my teamΓÇÖs design files in Figma. * Perform actions on behalf of the user, for example, create a Contoso ticket. -You can create an API-based message extension using an [OpenAPI Description (OAD)](https://learn.openapis.org/specification/) document. After you've created an OpenAPI Description document, upload the OpenAPI Description document to Teams Toolkit to generate and integrate the client code in your app's project. Create or generate a response rendering template to manage the responses from the API. +You can create an API-based message extension using an [OpenAPI Description (OAD)](https://learn.openapis.org/specification/) document. After you've created an OpenAPI Description document, use the OpenAPI Description document to generate and integrate the client code in your app's project. Create or generate a response rendering template to manage the responses from the API. See the video to learn more about building an API-based message extension using Teams Toolkit: </br> The following code is an example of a Response rendering template: <br/> |Property |Type |Description |Required | | |||| |`version` | `string` | The schema version of the current response rendering template. | Yes |-|`jsonPath` | `string` | The path to the relevant section in the results to which the responseCardTemplate and previewCardTemplate should be applied. If not set, the root object is treated as the relevant section. If the relevant section is an array, each entry is mapped to the responseCardTemplate and the previewCardTemplate. | No | +|`jsonPath` | `string` | The path to the relevant section in the results to which the responseCardTemplate and previewCardTemplate should be applied. If not set, the root object is treated as the relevant section. If the relevant section is an array, each entry is mapped to the responseCardTemplate and the previewCardTemplate. | No | |`responseLayout` | `responseLayoutType` | Specifies the layout of the results in the message extension flyout. The Supported types are `list` and `grid`. | Yes | |`responseCardTemplate` | `adaptiveCardTemplate` | A template for creating an Adaptive Card from a result entry. | Yes | |`previewCardTemplate` | `previewCardTemplate` | A template for creating a preview card from a result entry. The resulting preview card is displayed in the message extension flyout menu. | Yes | Update app manifest (previously called Teams app manifest) with the `composeExte |Name |Description | |||-|`composeExtensions.composeExtensionType` | Compose extension type. Update the value to `apiBased`. | +|`composeExtensions.composeExtensionType` | Compose extension type. Update the value to `apiBased`. | |`composeExtensions.apiSpecificationFile` | References an OpenAPI Description file in the app package. Include when type is `apiBased`. | |`composeExtensions.commands.id` | Unique ID that you assign to search command. The user request includes this ID. The ID must match the `OperationId` available in the OpenAPI Description. | |`composeExtensions.commands.context` | Array where the entry points for message extension is defined. The default values are `compose` and `commandBox`. | |
| platform | Build Api Based Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/build-api-based-message-extension.md | API-based message extensions are a potent tool that enhances your Teams app's fu </details> -You can create an API-based message extension using Developer Portal for Teams, Visual Studio Code, Teams Toolkit CLI, or Visual Studio. +You can create an API-based message extension using Developer Portal for Teams, Visual Studio Code, Teams Toolkit command line interface (CLI), or Visual Studio. # [Developer Portal for Teams](#tab/developer-portal-for-teams) To test your API-based message extension created in the Developer Portal for Tea > [!NOTE] > Teams Toolkit support for API-based message extension is available only in Teams Toolkit pre-release version. Before you get started, ensure that you've installed a [Teams Toolkit pre-release version](../toolkit/install-Teams-Toolkit.md#install-a-pre-release-version-1). -To build am API-based message extension using Visual Studio Code, follow these steps: +To build am API-based message extension using Teams Toolkit for Visual Studio Code, follow these steps: 1. Open **Visual Studio Code**. 1. From the left pane, Select **Teams Toolkit**. To build am API-based message extension using Visual Studio Code, follow these s :::image type="content" source="../assets/images/Copilot/api-based-me-ttk-accounts.png" alt-text="Screenshot shows the Microsoft 365 and Azure sign in option in Teams Toolkit."::: 1. From the left pane, Select **Run and Debug (Ctrl+Shift+D)**.-1. From the launch configuration dropdown, select `Preview in Teams (Edge)` or `Preview in Teams (Chrome)` . Teams Toolkit launches Teams web client in a browser window. +1. From the launch configuration dropdown, select `Preview in Teams (Edge)` or `Preview in Teams (Chrome)`. Teams Toolkit launches Teams web client in a browser window. 1. Go to a chat message and select the **Actions and apps** icon. In the flyout menu, search for your app. 1. Select your message extension from the list and enter a search command in the search box. 1. Select an item from the list. The item unfurls into an Adaptive Card in the message compose area. To build am API-based message extension using Visual Studio Code, follow these s # [Teams Toolkit CLI](#tab/teams-toolkit-cli) +To create an API-based message extension using Teams Toolkit CLI, follow these steps: + 1. Go to **Command Prompt**. 1. Enter the following command: |
| platform | Build Bot Based Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/build-bot-based-message-extension.md | Title: Build message extensions using Bot Framework -description: Learn how to build a bot message extension using Bot Framework with Teams Toolkit. +description: Learn about Bot-based message extension using Bot Framework to interact with your web service from different locations in the Teams client. ms.localizationpriority: medium There are two types of message extension commands, action command and search com # [Search commands](#tab/search-commands) -Message extension search commands allow users to search external systems and insert the results of that search into a message in the form of a card. This document guides you on how to select search command invoke locations, and add the search command to your app manifest. +Message extension search commands allow users to search external systems and insert the results of that search into a message in the form of a card. This document guides you on how to select search command invoke locations, and add the search command to your app manifest. > [!NOTE] > The result card size limit is 28 KB. The card isn't sent if its size exceeds 28 KB. |
| platform | Build Bot Based Plugin | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/build-bot-based-plugin.md | A plugin allows Copilot for Microsoft 365 to interact directly with third-party All bot-based search message extensions are eligible for plugin support, subject to validation to ensure the plugin meets quality, security, privacy, and usefulness expectations. -You can create a bot-based search message extension using Teams Toolkit for Visual Studio Code, Visual Studio, Teams Toolkit CLI, or Developer Portal for Teams and extend the message extension to function as a plugin in Copilot for Microsoft 365. +You can create a bot-based search message extension using Teams Toolkit for Visual Studio Code, Visual Studio, Teams Toolkit command line interface (CLI), or Developer Portal for Teams and extend the message extension to function as a plugin in Copilot for Microsoft 365. ## Prerequisites Before you get started, ensure that you're familiar with the following standards > [!IMPORTANT] > Plugins for Microsoft Copilot for Microsoft 365 are in preview and only work in Microsoft 365 Chat in Microsoft Teams. +Let's create a bot-based search message extension that can search npm registries in Teams and Copilot and share results through the compose message area of the Microsoft Teams client. + # [Visual Studio Code](#tab/visual-studio-code) Before you get started, ensure that you install the following tools to build and deploy your message extension: To trigger the message extension as plugin in M365 Chat, follow these steps: :::image type="content" source="../assets/images/Copilot/bot-based-VSC-plugin-toggle.png" alt-text="Screenshot shows the Plugin option, list of plugins, and the toggle enabled for bot-based-ME-test-local plugin."::: -1. From the message compose area, send a message to M365 Chat to find Contoso information. For example, find Contoso product in Contoso-local. +1. From the message compose area, send a message to M365 Chat to search for npm package information in Teams and Copilot. For example, find the npm package info on teamsfx-react in npm-searchlocal. :::image type="content" source="../assets/images/Copilot/bot-based-VSC-trigger-plugin.png" alt-text="Screenshot shows the plugin prompt and the response from M365 Chat."::: To trigger the message extension as plugin in M365 Chat, follow these steps: Before you get started, ensure that you install the following tools to build and deploy your message extension: -* Install the Visual Studio Enterprise 2022 Preview version 17.9.0 Preview 1.0 and install the **Microsoft Teams development tools** under **ASP.NET and web development** workload. +* Install the Visual Studio Enterprise 2022 Preview version 17.9.0 Preview 1.0 or later and install the **Microsoft Teams development tools** under **ASP.NET and web development** workload. * Ensure that the Copilot feature flag is enabled. To enable the feature flag, follow these steps: 1. Open **Visual Studio**. 1. Go to **Tools** > **Options**. To create a bot-based search message extension plugin using Visual Studio, follo The tunnel you created is listed under **Dev Tunnels > (name of the tunnel)**. 1. Go to **Solution Explorer** and select your project.-1. Right-click the project menu and select **Teams Toolkit** > **Prepare Teams App Dependencies**. +1. Right-click the project menu and select **Teams Toolkit** > **Prepare Teams App Dependencies**. :::image type="content" source="../assets/images/Copilot/bot-based-VS-teams-app-dependencies.png" alt-text="Screenshot shows the Prepare Teams app dependencies option under Teams Toolkit in Visual Studio app project."::: To trigger the message extension as plugin in M365 Chat, follow these steps: 1. Go to **Visual Studio**. 1. In the debug dropdown, select **Copilot (browser)**. Visual Studio launches Teams web client. - :::image type="content" source="../assets/images/Copilot/bot-based-VSC-debug-Copilot.png" alt-text="Screenshot shows the Copilot (Browser) debug option in Visual Studio."::: + :::image type="content" source="../assets/images/Copilot/bot-based-VSC-debug-Copilot.png" alt-text="Screenshot shows the Copilot (Browser) debug option in Visual Studio."::: 1. Go to **Teams web client** > **Apps**. 1. Search for **M365 Chat** and open the **M365 Chat** app. To trigger the message extension as plugin in M365 Chat, follow these steps: :::image type="content" source="../assets/images/Copilot/bot-based-VS-me-plugin-toggle.png" alt-text="Screenshot shows the Plugin option, list of plugins, and the toggle enabled for bot-based-ME-test-local plugin."::: -1. From the compose message area, send a message to M365 Chat to find Contoso information. For example, find Contoso product in Contoso-local. +1. From the message compose area, send a message to M365 Chat to search for npm package information in Teams and Copilot. For example, find the npm package info on teamsfx-react in npmsearchlocal. :::image type="content" source="../assets/images/Copilot/bot-based-VS-trigger-plugin.png" alt-text="Screenshot shows the plugin prompt and the Adaptive Card response with content and preview card from M365 Chat. The response contains a list of four products with Contoso product name. "::: To create a bot-based search message extension plugin using Teams Toolkit CLI, f To trigger the message extension through M365 Chat, follow these steps: 1. Select **Apps**.-1. Search for **M365 Chat** and open the **M365 Chat** app. +1. Search for **M365 Chat** and open the **M365 Chat** app. 1. Select **Plugins**. 1. From the list of plugins, turn on the toggle for your app. :::image type="content" source="../assets/images/Copilot/bot-based-VSC-plugin-toggle.png" alt-text="Screenshot shows the Plugin option, list of plugins, and the toggle enabled for bot-based-ME-test-local plugin."::: -1. From the compose message area, send a message to M365 Chat to find Contoso information. For example, find Contoso product in Contoso-local. +1. From the message compose area, send a message to M365 Chat to search for npm package information in Teams and Copilot. For example, find the npm package info on teamsfx-react in npm-searchlocal. :::image type="content" source="../assets/images/Copilot/bot-based-VSC-trigger-plugin.png" alt-text="Screenshot shows the plugin prompt and the response from M365 Chat."::: To trigger the message extension through M365 Chat, follow these steps: # [Developer Portal for Teams](#tab/developer-portal-for-teams) +To create a bot-based search message extension plugin using Developer portal for Teams, follow these steps: + 1. Go to **Teams Developer Portal**. 1. Go to **Apps**. 1. Select **+ New apps**. |
| platform | Teamsfx Preview And Customize App Manifest | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-preview-and-customize-app-manifest.md | zone_pivot_groups: teams-toolkit-platform ::: zone pivot="visual-studio-code-v5" + App manifest (previously called Teams app manifest) describes how your app integrates into Teams. After scaffolding, the default app manifest file is available at `appPackage/manifest.json`. The app manifest file contains some environment variables with format of `${{XX_XX}}`, and the actual values are resolved using Teams Toolkit with env files like `env/.env.dev` and `env/.env.local`. To preview app manifest with actual content, Teams Toolkit generates the preview app manifest files under `appPackage/build` folder: To preview values for all the environment, you can hover over the placeholder. I ::: zone-end ::: zone pivot="visual-studio-code-v4"-> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](teams-toolkit-fundamentals.md#teams-toolkit-overview) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. -## Customize app manifest for Visual Studio Code App manifest (previously called Teams app manifest) describes how your app integrates into Teams. The app manifest template file `manifest.template.json` is available under `templates/appPackage` folder after scaffolding. The template file with placeholders, and the actual values are resolved by Teams Toolkit using files under `.fx/configs` and `.fx/states` for different environments. |
| platform | Add Single Sign On | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-single-sign-on.md | +# Add single sign-on to Teams app ::: zone pivot="visual-studio-code-v5" -# Add single sign-on to 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 few of the Microsoft Entra ID flows and integrations behind simple APIs. This enables you to add SSO features easily to your Teams app. You can perform the following steps to add SSO using Teams Toolkit in Visual Stu ::: zone-end ::: zone pivot="visual-studio-code-v4"-> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. + 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. |
| platform | Create New Project | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/create-new-project.md | To learn more about the directory structure of different types of scenario-based ::: zone pivot="visual-studio-code-v4" -## Create a new Teams project using Teams Toolkit --> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](~/toolkit/teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. --In this section, you can learn how to create a new Teams project using Microsoft Visual Studio Code and Visual Studio. - ## Create a new Teams project for Visual Studio Code You can build a new Teams project by selecting **Create a new Teams app** in Teams Toolkit. You can create the following types of apps in Teams Toolkit: |
| platform | Debug Local | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-local.md | zone_pivot_groups: teams-toolkit-platform # Debug your Teams app locally + 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 uploads Teams app. You can preview your Teams app in Teams web client locally after debugging. ::: zone pivot="visual-studio-code-v5" The configuration **Attach to Frontend** or **Launch App** launches Microsoft Ed ::: zone pivot="visual-studio-code-v4" -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - 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. ## Debug your Teams app locally for Visual Studio Code |
| platform | Debug Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-overview.md | zone_pivot_groups: teams-toolkit-platform # Debug your Teams app + 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. ::: zone pivot="visual-studio-code-v5" Teams Toolkit utilizes Visual Studio Code multi-target debugging to debug tab, b ::: zone pivot="visual-studio-code-v4" -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - 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. ## Debug your Teams app for Visual Studio Code |
| platform | Deploy | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/deploy.md | zone_pivot_groups: teams-toolkit-platform # Deploy Teams app to the cloud using Microsoft Visual Studio Code + Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure. ::: zone pivot="visual-studio-code-v5" This action upload and deploys generated sppkg to SharePoint app catalog. You ca ::: zone pivot="visual-studio-code-v4" -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure. ## Deploy Teams app to the cloud using Microsoft Visual Studio Code |
| platform | Explore Teams Toolkit | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/explore-Teams-Toolkit.md | zone_pivot_groups: teams-toolkit-platform # Explore Teams Toolkit -> [!IMPORTANT] -> -> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - ::: zone pivot="visual-studio-code-v5" + You can explore the look and feel of Teams Toolkit within the Visual Studio Code. This section gives you a tour of Teams Toolkit and its features. From the task pane, you can see the following sections: ::: zone pivot="visual-studio-code-v4" + You can explore the Teams Toolkit v4 look and feel within the Visual Studio Code. This section gives you a tour of Teams Toolkit v4 and its features. |
| platform | Faq | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/faq.md | Last updated 11/29/2021 # FAQ for Teams Toolkit -> [!IMPORTANT] -> -> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> [Teams Toolkit vs](toolkit-v4/teams-toolkit-fundamentals-vs.md) extension will soon be deprecated. Following are the FAQs for [Provision cloud resources using Teams Toolkit](provision.md): |
| platform | Install Teams Toolkit | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/install-Teams-Toolkit.md | zone_pivot_groups: teams-toolkit-platform # Install Teams Toolkit -> [!IMPORTANT] -> -> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - ::: zone pivot="visual-studio-code-v5" + This section helps you to know about the prerequisites, install Teams Toolkit for Visual Studio Code, and install a different version of Teams Toolkit. ## Prerequisites The Teams Toolkit for Visual Studio Code extension is available in a pre-release ::: zone pivot="visual-studio-code-v4" + The Microsoft Entra manifest contain definitions of all the attributes of a Microsoft Entra application object in the Microsoft identity platform. ## Prerequisites |
| platform | Provision | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/provision.md | zone_pivot_groups: teams-toolkit-platform # Provision cloud resources + 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. ::: zone pivot="visual-studio-code-v5" You can follow the steps to add environment variables to the .env files to use a ::: zone pivot="visual-studio-code-v4" -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. - 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. > [!NOTE] |
| platform | Teams Toolkit Fundamentals | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/teams-toolkit-fundamentals.md | zone_pivot_groups: teams-toolkit-platform # Teams Toolkit Overview -> [!IMPORTANT] -> -> * We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> * Teams Toolkit isn't supported in Government Community Cloud (GCC) and GCC-High environments. -> * Teams Toolkit v4 extension will soon be deprecated. - ::: zone pivot="visual-studio-code-v5" + Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio Code. * Start with a project template for common custom app built for your org (LOB app) scenarios or from a sample. You can access Teams Developer Portal where you can configure, distribute, and m ::: zone pivot="visual-studio-code-v4" + Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio Code. * Start with a project templates for common custom app built for your org (LOB app) scenarios or from a sample. |
| platform | Teams Toolkit Tutorial | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/teams-toolkit-tutorial.md | Last updated 05/16/2023 # Teams app tutorials and related code samples -> [!IMPORTANT] -> -> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4extension will soon be deprecated. You can build your own Teams app with different capabilities using the step-by-step guide or tutorial and code samples. |
| platform | AAD Manifest Customization V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/AAD-manifest-customization-v4.md | Last updated 05/20/2022 # Edit Microsoft Entra manifest in Teams Toolkit v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. The Microsoft Entra manifest contain definitions of all the attributes of a Microsoft Entra application object in the Microsoft identity platform. You can customize Microsoft Entra manifest template to update Microsoft Entra ap The following permissions are used property IDs: - - The `resourceAppId` property is used for different APIs. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the name directly instead of UUID, and for other APIs use UUID. + * The `resourceAppId` property is used for different APIs. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the name directly instead of UUID, and for other APIs use UUID. - - The `resourceAccess.id` property is used for different permissions. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the permission name directly instead of UUID, and for other APIs use UUID. + * The `resourceAccess.id` property is used for different permissions. For `Microsoft Graph`, and `Office 365 SharePoint Online` enter the permission name directly instead of UUID, and for other APIs use UUID. - - The `resourceAccess.type` property is used for delegated permission or application permission. `Scope` means delegated permission and `Role` means application permission. + * The `resourceAccess.type` property is used for delegated permission or application permission. `Scope` means delegated permission and `Role` means application permission. </details> You can customize Microsoft Entra manifest template to update Microsoft Entra ap <summary>4. Deploy Microsoft Entra application changes for remote environment</summary> -- Open the command palette and select: **Teams: Deploy Microsoft Entra app manifest**.+* Open the command palette and select: **Teams: Deploy Microsoft Entra app manifest**. :::image type="content" source="images/add deploy4-v4.png" alt-text="deploy4"::: -- Additionally you can right click on the `aad.template.json` and select **Deploy Microsoft Entra app manifest** from the context menu.+* Additionally you can right click on the `aad.template.json` and select **Deploy Microsoft Entra app manifest** from the context menu. :::image type="content" source="images/add deploy5-v4.png" alt-text="deploy5"::: You need to interact with Microsoft Entra application during various stages of y Teams Toolkit performs the following functions during local development: - - Read the `state.local.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit reuses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file. + * Read the `state.local.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit reuses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file. - - Initially ignores some properties in the manifest file that requires more context, such as `replyUrls` property that requires a local development endpoint during the creation of a new Microsoft Entra application with the manifest file. + * Initially ignores some properties in the manifest file that requires more context, such as `replyUrls` property that requires a local development endpoint during the creation of a new Microsoft Entra application with the manifest file. - - After the local dev environment starts successfully, the Microsoft Entra application's `identifierUris`, `replyUrls`, and other properties that aren't available during creation stage are updated accordingly. + * After the local dev environment starts successfully, the Microsoft Entra application's `identifierUris`, `replyUrls`, and other properties that aren't available during creation stage are updated accordingly. - - The changes you've done to your Microsoft Entra application are loaded during next local development session. You can see [Microsoft Entra application changes](https://github.com/OfficeDev/TeamsFx/wiki/) applied manually. + * The changes you've done to your Microsoft Entra application are loaded during next local development session. You can see [Microsoft Entra application changes](https://github.com/OfficeDev/TeamsFx/wiki/) applied manually. 4. **To provision for cloud resources** You need to provision cloud resources and deploy your application while moving your application to the cloud. At stages, such as local debug, Teams Toolkit: - - Reads the `state.{env}.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit re-uses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file. + * Reads the `state.{env}.json` file to find an existing Microsoft Entra application. If a Microsoft Entra application already exists, Teams Toolkit re-uses the existing Microsoft Entra application. Otherwise you need to create a new application using the `aad.template.json` file. - - Ignores some properties in the manifest file initially that requires more context such as `replyUrls` property. This property requires frontend or bot endpoint during the creation of a new Microsoft Entra application with the manifest file. + * Ignores some properties in the manifest file initially that requires more context such as `replyUrls` property. This property requires frontend or bot endpoint during the creation of a new Microsoft Entra application with the manifest file. - - Completes other resources provision, then Microsoft Entra application's `identifierUris`, and `replyUrls` are updated according to the correct endpoints. + * Completes other resources provision, then Microsoft Entra application's `identifierUris`, and `replyUrls` are updated according to the correct endpoints. 5. **To build application** - - The cloud command deploys your application to the provisioned resources. It doesn't include deploying Microsoft Entra application changes you've made. + * The cloud command deploys your application to the provisioned resources. It doesn't include deploying Microsoft Entra application changes you've made. - - Teams Toolkit updates the Microsoft Entra application according to the Microsoft Entra manifest template file. + * Teams Toolkit updates the Microsoft Entra application according to the Microsoft Entra manifest template file. ## Limitations You need to interact with Microsoft Entra application during various stages of y 2. Currently `requiredResourceAccess` property is used for user readable resource application name or permission name strings only for `Microsoft Graph` and `Office 365 SharePoint Online` APIs. You need to use UUID for other APIs. Perform the following steps to retrieve IDs from Azure portal: - - Register a new Microsoft Entra application on [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps). - - Select `API permissions` from the Microsoft Entra application page. - - Select `add a permission` to add the permission you need. - - Select `Manifest`, from the `requiredResourceAccess` property, where you can find the IDs of API, and the permissions. + * Register a new Microsoft Entra application on [Azure portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps). + * Select `API permissions` from the Microsoft Entra application page. + * Select `add a permission` to add the permission you need. + * Select `Manifest`, from the `requiredResourceAccess` property, where you can find the IDs of API, and the permissions. ## See also -- [Teams Toolkit Overview](../teams-toolkit-fundamentals.md)-- [Microsoft Entra manifest](/azure/active-directory/develop/reference-app-manifest)-- [Customize Teams app manifest](../TeamsFx-preview-and-customize-app-manifest.md)-- [Debug your Teams app](../debug-overview.md)-- [Debug your Teams app locally](../debug-local.md)+* [Teams Toolkit Overview](../teams-toolkit-fundamentals.md) +* [Microsoft Entra manifest](/azure/active-directory/develop/reference-app-manifest) +* [Customize Teams app manifest](../TeamsFx-preview-and-customize-app-manifest.md) +* [Debug your Teams app](../debug-overview.md) +* [Debug your Teams app locally](../debug-local.md) |
| platform | Teamsfx Collaboration V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/TeamsFx-collaboration-v4.md | Last updated 11/29/2021 # Collaborate on Teams project using Microsoft Teams Toolkit v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. Multiple developers can work together to debug, provision and deploy for the same TeamsFx project, but it requires manually setting the right permissions of Teams App and Microsoft Entra ID. Teams Toolkit supports collaboration feature to allow developers and project owner to invite other developers or collaborators to the TeamsFx project to debug, provision, and deploy the same TeamsFx project. |
| platform | Teamsfx Multi Env V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/TeamsFx-multi-env-v4.md | Last updated 11/29/2021 # Manage multiple environments in Teams Toolkit v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. Teams Toolkit provides a simple way for you to create and manage multiple environments. You can use environments to provision resources and deploy artifacts to the target environment for your Microsoft Teams app. To create a new environment: 2. Select the **Teams Toolkit** from the Visual Studio Code activity bar. 3. Select **+ Create new environment** under **ENVIRONMENT**. - :::image type="content" source="images/create_new _env_1-v4.PNG" alt-text="Create new environment"::: + :::image type="content" source="images/create_new_env_1-v4.PNG" alt-text="Create new environment"::: If you've more than one environment, you need to select an existing environment to create the new environment. The command copies the file contents of `config.<newEnv>.json` and `azure.parameters.<newEnv>.json` from the selected environment to the new environment that youΓÇÖre creating. |
| 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 | Title: Customize app manifest in Teams Toolkit using Visual Studio -description: In this module, learn how to edit, preview and customize app manifest in different environment in Teams Toolkit. +description: In this module, learn how to edit, preview, and customize app manifest in different environment in Teams Toolkit. ms.localizationpriority: medium zone_pivot_groups: teams-toolkit-platform-vs :::zone pivot="visual-studio-v17-7" -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 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: To preview the app manifest file: 1. Select **Project** > **Teams Toolkit**. |
| platform | Add API Connection V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/add-API-connection-v4.md | Last updated 05/20/2022 # Integrate existing third-party APIs using Teams Toolkit v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. Teams Toolkit allows you to access and use existing APIs for building Teams apps. Your organization or a third-party might have developed these APIs. When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs the following functions: |
| platform | Add Resource V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/add-resource-v4.md | Last updated 11/29/2021 # Add cloud resources of Teams Toolkit v4 to Teams app -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. Teams Toolkit allows you to provision the cloud resources for hosting your app. You can add the cloud resources according to your development needs. The advantage of adding more cloud resources in TeamsFx is that you can autogenerate all configuration files and connect to Teams app by using Teams Toolkit. |
| 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 | Title: Add single sign-on to your Teams app -description: In this module, learn how to add single sign-on (SSO) of Teams Toolkit, enable SSO support, update your application to use SSO +description: In this module, learn how to add single sign-on (SSO) of Teams Toolkit, enable SSO support, update your application to use SSO. ms.localizationpriority: medium For more information about how to use an existing Microsoft Entra app in your Te * [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)+ :::zone-end |
| platform | Faq V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/faq-v4.md | Last updated 11/29/2021 # FAQ for Teams Toolkit v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. You can see the FAQ for all the sections of Teams Toolkit for Visual Studio Code. |
| platform | Publish V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/publish-v4.md | -> [!IMPORTANT] -> -> We've introduced the Teams Toolkit v5 extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. After creating the app, you can distribute your app to different scopes, such as an individual, a team, or an organization. The distribution depends on multiple factors such as needs, business and technical requirements, and your goal for the app. Distribution to different scope may need different review process. In general, the bigger the scope, the more review the app needs to go through for security and compliance concerns. |
| platform | Publish Your Teams Apps Using Developer Portal V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/publish-your-teams-apps-using-developer-portal-v4.md | Last updated 07/29/2022 # Publish your Teams apps using Developer Portal v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. You can configure and manage your app in Developer Portal within Teams Toolkit. |
| platform | Sideload And Test App V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/sideload-and-test-app-v4.md | Last updated 03/03/2022 # Upload and test the custom apps in Teams environment v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. After adding API connection, you can test API connection in the Teams Toolkit local environment and deploy your application to the cloud. In CI/CD pipeline, after set-up with different platform, you need to create Azure service principal to provision and deploy resources. |
| platform | Teams Toolkit Tutorial V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/teams-toolkit-tutorial-v4.md | Last updated 05/16/2023 # Teams app tutorials and code samples v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. You can build your own Teams app with different capabilities using the step-by-step guide or tutorial and code samples. Now, let's build your first Teams app. You can use the following language (or fr ## Code samples -Code samples are designed to help understand and build your own Microsoft Teams app with different capabilities and scenarios. To learn more about list of code samples, see [microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples). +Code samples are designed to help understand and build your own Microsoft Teams app with different capabilities and scenarios. To learn more about list of code samples, see [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples). |
| platform | Test App Behavior V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/test-app-behavior-v4.md | Last updated 03/03/2022 # Test app behavior in different environment v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. You can test your Teams app after integrating with Microsoft Teams. To test your Teams app, you need to create at least one workspace in your environment. You can use Teams Toolkit for testing your Teams app: |
| platform | Use CICD Template V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/use-CICD-template-v4.md | Last updated 04/20/2022 # Set up CI/CD pipelines v4 -> [!IMPORTANT] -> -> We've introduced the [Teams Toolkit v5](../teams-toolkit-fundamentals.md) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Teams Toolkit v5 for building your Teams app. -> -> Teams Toolkit v4 extension will soon be deprecated. TeamsFx helps to automate your development workflow while building Teams application. The following are the tools and templates you can use to set up CI/CD pipelines, create workflow templates, and customize CI/CD workflow with GitHub, Azure DevOps, Jenkins, and other platforms. To provision and deploy resources, you can create Azure service principals and publish the Teams app using Teams Developer Portal. To publish Teams app manually, you may leverage [Developer Portal for Teams](https://dev.teams.microsoft.com/home). |
| platform | Add Incoming Webhook | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-incoming-webhook.md | Title: Create an Incoming Webhook -description: Create Incoming Webhook to Teams app and post external requests to Teams. Remove Incoming Webhook. Sample code(C#, Node.js) to send card using Incoming Webhook. +description: Create an Incoming Webhook to Teams app and post external requests to Teams. Remove Incoming Webhook. Sample code(C#, Node.js) to send card using Incoming Webhook. ms.localizationpriority: high Last updated 01/25/2023 Last updated 01/25/2023 # Create Incoming Webhooks -An Incoming Webhook lets external applications share content in Microsoft Teams channels. The webhooks are used as tools to track and notify. The webhooks provide a unique URL, to send a JSON payload with a message in card format. Cards are user interface containers that include content and actions related to a single article. You can use cards in the following capabilities: +An Incoming Webhook lets external applications share content in Microsoft Teams channels. The webhooks are used as tools to track and notify. The webhooks provide a unique URL to send a JSON payload with a message in card format. Cards are user interface containers that include content and actions related to a single article. You can use cards in the following capabilities: * Bots * Message extensions * Connectors -> [!IMPORTANT] -> You can choose to build notification bot Teams app other than Incoming Webhooks. They perform similarly but notification bot has more functionalities. For more information, see [Build notification bot with JavaScript](../../sbs-gs-notificationbot.yml) or [Incoming Webhook notification sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/incoming-webhook-notification). To get started, download and explore [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension). For more information, see [Teams Toolkit documents](../../toolkit/teams-toolkit-fundamentals.md). - > [!NOTE] > > * The message size limit is 28 KB. When the size exceeds 28 KB, you receive an error. For more information, see [Limits and specifications for Microsoft Teams](/microsoftteams/limits-specifications-teams). > * If more than four requests are made in a second, the client connection is throttled until the window refreshes for the duration of the fixed rate. A [retry logic with exponential backoff](/azure/architecture/patterns/retry) can mitigate rate limiting for cases where requests exceed the limits within a second. To avoid hitting the rate limits, see [HTTP 429 responses](../../bots/how-to/rate-limit.md#handle-http-429-responses). -See the following video to learn how to create Incoming Webhooks: -<br> --> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4ODcY] - ## Key features of Incoming Webhooks The following table provides the features and description of an Incoming Webhook: The following table provides the features and description of an Incoming Webhook | Features | Description | | -- | -- | |Adaptive Cards using an Incoming Webhook | Adaptive Cards can be sent through Incoming Webhooks. For more information, see [Send Adaptive Cards using Incoming Webhooks](../../webhooks-and-connectors/how-to/connectors-using.md#send-adaptive-cards-using-an-incoming-webhook).|-|Actionable messaging support|Actionable message cards are supported in all Microsoft 365 groups including Teams. If you send messages through cards, you must use the actionable message card format. For more information, see [Legacy actionable message card reference](/outlook/actionable-messages/message-card-reference) and [message card playground](https://messagecardplayground.azurewebsites.net).| +|Actionable messaging support | Actionable message cards are supported in all Microsoft 365 groups including Teams. If you send messages through cards, you must use the actionable message card format. For more information, see [Legacy actionable message card reference](/outlook/actionable-messages/message-card-reference) and [message card playground](https://messagecardplayground.azurewebsites.net).| |Independent HTTPS messaging support|Cards provide information clearly and consistently. Any tool or framework that can send HTTPS POST requests can send messages to Teams through an Incoming Webhook.| |Markdown support|All text fields in actionable messaging cards support basic Markdown. Don't use HTML markup in your cards. HTML is ignored and treated as plain text.|-|Scoped configuration|Incoming Webhook is scoped and configured at the channel level.| +|Scoped configuration|An Incoming Webhook is scoped and configured at the channel level.| |Secure resource definitions|Messages are formatted as JSON payloads. This declarative messaging structure prevents the insertion of malicious code.| <! TBD: A note should be short and eye-catching. No need to put a list item inside a Note or any admonition for that matter. Re-write the below list item. The following table provides the features and description of an Incoming Webhook > * Teams bots, message extensions, Incoming Webhook, and the Bot Framework support Adaptive Cards. Adaptive Card is an open cross-card platform framework that is used in all platforms such as Windows, Android, iOS, and so on. Currently, [Teams connectors](../../webhooks-and-connectors/how-to/connectors-creating.md) don't support Adaptive Cards. However, it is possible to create a [flow](https://flow.microsoft.com/blog/microsoft-flow-in-microsoft-teams/) that posts Adaptive Cards to a Teams channel. > * For more information on cards and webhooks, see [Adaptive cards and Incoming Webhooks](~/task-modules-and-cards/what-are-cards.md#adaptive-cards-and-incoming-webhooks). -## Create Incoming Webhooks +## Create an Incoming Webhook To add an Incoming Webhook to a Teams channel, follow these steps: -1. Open the channel in which you want to add the webhook and select ••• from the upper-right corner. +# [New Teams](#tab/newteams) ++1. In the New Teams client, select **Teams** :::image type="icon" source="../../assets/images/teams-icon.png" border="false"::: and navigate to the channel where you want to add an Incoming Webhook. ++1. Select **More options** ••• on the right side of the channel name. ++1. Select **Manage channel**. ++ :::image type="content" source="../../assets/images/manage-channel-new-teams.png" alt-text="Screenshot shows the Manage channel option under More options for Teams 2.1."::: ++1. Select **Edit**. ++ :::image type="content" source="../../assets/images/edit-connector-new-teams.png" alt-text="Screenshot shows the edit option under Connectors option to add an Incoming Webhook."::: ++1. Search for **Incoming Webhook** and select **Add**. ++ :::image type="content" source="../../assets/images/search-add-webhook.png" alt-text="Screenshot shows the Add option to add an Incoming Webhook."::: ++ The Incoming Webhook dialog appears. ++1. Select **Add**. ++ :::image type="content" source="../../assets/images/add-incoming-webhook.png" alt-text="Screenshot shows the Add option in the Incoming Webhook dialog." lightbox="../../assets/images/add-incoming-webhook-lightbox.png"::: ++ > [!NOTE] + > If youΓÇÖve already added an Incoming Webhook, the **Configure** option appears. Select **Configure** to create an Incoming Webhook. ++1. Provide a name for the webhook and upload an image if necessary. ++1. Select **Create**. ++ :::image type="content" source="../../assets/images/create-incoming-webhook-new-teams.png" alt-text="Screenshot shows the name and image fields to be filled to create the webhook."::: ++1. Copy and save the unique webhook URL present in the dialog. The URL maps to the channel and you can use it to send information to Teams. ++1. Select **Done**. The webhook is now available in the Teams channel. ++ :::image type="content" source="../../assets/images/url_1-new-teams.png" alt-text="Screenshot shows the unique webhook URL."::: ++The following graphical representation provides the steps to create an Incoming Webhook: +++# [Classic Teams](#tab/classicteams) ++1. In the Classic Teams client, select **Teams** :::image type="icon" source="../../assets/images/teams-icon.png" border="false"::: and navigate to the channel where you want to add an Incoming Webhook. ++1. Select **More options** ••• from the upper-right corner. 1. Select **Connectors** from the dropdown menu. - :::image type="content" source="../../assets/images/connectors_1.png" alt-text="This screenshot show how to select connector."::: + :::image type="content" source="../../assets/images/connectors_1.png" alt-text="Screenshot shows how to select connector."::: ++1. Search for **Incoming Webhook** and select **Add**. ++ :::image type="content" source="../../assets/images/search-add-webhook.png" alt-text="Screenshot shows the Add option to add an Incoming Webhook."::: ++ The Incoming Webhook dialog appears. -1. Search for **Incoming Webhook** and select **Configure**. +1. Select **Add**. - :::image type="content" source="../../assets/images/configure_1.png" alt-text="This screenshot shows how to configure and upload an image for your webhooks."::: + :::image type="content" source="../../assets/images/add-incoming-webhook.png" alt-text="Screenshot shows the Add option in the Incoming Webhook dialog." lightbox="../../assets/images/add-incoming-webhook-lightbox.png"::: -1. Provide a name and upload an image for your webhook if necessary. + > [!NOTE] + > If youΓÇÖve already added an Incoming Webhook, the **Configure** option appears. Select **Configure** to create an Incoming Webhook. ++1. Provide a name for the webhook and upload an image if necessary. 1. Select **Create**. To add an Incoming Webhook to a Teams channel, follow these steps: 1. Select **Done**. - :::image type="content" source="../../assets/images/url_1.png" alt-text="This screenshot shows the unique webhook URL."::: + :::image type="content" source="../../assets/images/url_1.png" alt-text="Screenshot shows the unique webhook URL."::: The webhook is now available in the Teams channel. -You can create and send actionable messages through Incoming Webhook or connector for Microsoft 365 Groups. For more information, see [Create and send messages](~/webhooks-and-connectors/how-to/connectors-using.md). +++> [!IMPORTANT] +> You can build a notification bot Teams app using [Teams Toolkit](../../toolkit/teams-toolkit-fundamentals.md) other than an Incoming Webhook. They perform similarly but notification bot has more functionalities. For more information, see [Build notification bot with JavaScript](../../sbs-gs-notificationbot.yml) or [Incoming Webhook notification sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/incoming-webhook-notification). ++You can create and send actionable messages through an Incoming Webhook or connector for Microsoft 365 Groups. For more information, see [create and send messages](~/webhooks-and-connectors/how-to/connectors-using.md). > [!NOTE] > In Teams, select **Settings** > **Member permissions** > **Allow members to create, update, and remove connectors**, so that any team member can add, modify, or delete a connector. -**Example** +### Example # [C#](#tab/dotnet) axios.post(webhookUrl , formatted_Card_Payload ) To remove an Incoming Webhook from a Teams channel, follow these steps: -1. Open the channel and select ••• from the upper-right corner. +# [New Teams](#tab/newteams) ++1. In the New Teams client, select the Teams icon :::image type="icon" source="../../assets/images/teams-icon.png" border="false"::: and navigate to the channel where you want to remove an Incoming Webhook. ++1. Select **More options** ••• on the right side of the channel name. ++1. Select **Manage channel**. ++ :::image type="content" source="../../assets/images/manage-channel-new-teams.png" alt-text="Screenshot shows the Manage channel option under More options."::: ++1. Select **Edit**. ++ :::image type="content" source="../../assets/images/edit-connector-new-teams.png" alt-text="Screenshot shows the edit option under Connectors option."::: ++1. In the left pane, select **Configured**. ++1. Under Incoming Webhook, select **1 Configured**. ++ :::image type="content" source="../../assets/images/configured_1-new-teams.png" alt-text="Screenshot shows how to configure to see list of your current connectors."::: ++1. Select **Manage**. ++ :::image type="content" source="../../assets/images/manage_1.png" alt-text="Screenshot shows how to manage for connector that you want to remove."::: ++1. Select **Remove**. ++ :::image type="content" source="../../assets/images/Select_Remove.png" alt-text="Select remove"lightbox="../../assets/images/Select_Remove.png"::: ++ The Remove Configuration dialog appears. ++1. Select the required checkboxes. ++1. Select **Remove**. ++ :::image type="content" source="../../assets/images/finalremove_1.png" alt-text="Screenshot shows how to remove an Incoming Webhook from Teams channel."::: ++The webhook is now removed from the Teams channel. ++# [Classic Teams](#tab/classicteams) ++1. In the Classic Teams client, select the Teams icon :::image type="icon" source="../../assets/images/teams-icon.png" border="false"::: and navigate to the channel where you want to remove an Incoming Webhook. +1. Select **More options** ••• from the upper-right corner. 1. Select **Connectors** from the dropdown menu.-1. Select **Configured** under **MANAGE**. -1. Select the **1 Configured** to see a list of your current connectors. +1. In the left pane, select **Configured**. +1. Under Incoming Webhook, select **1 Configured**. - :::image type="content" source="../../assets/images/configured_1.png" alt-text="This screenshot shows how to configure to see list of your current connectors."::: + :::image type="content" source="../../assets/images/configured_1-new-teams.png" alt-text="The screenshot shows how to configure to see list of your current connectors."::: -1. Select **Manage** for the connector that you want to remove. +1. Select **Manage**. - :::image type="content" source="../../assets/images/manage_1.png" alt-text="This screenshot shows how to manage for connector that you want to remove."::: + :::image type="content" source="../../assets/images/manage_1.png" alt-text="Screenshot shows how to manage for connector that you want to remove."::: 1. Select **Remove**. :::image type="content" source="../../assets/images/Select_Remove.png" alt-text="Select remove"lightbox="../../assets/images/Select_Remove.png"::: - The **Remove Configuration** window appears. + The Remove Configuration dialog appears. 1. Select the required checkboxes. 1. Select **Remove**. - :::image type="content" source="../../assets/images/finalremove_1.png" alt-text="This screenshot shows how to remove an Incoming Webhooks from Teams channel."::: + :::image type="content" source="../../assets/images/finalremove_1.png" alt-text="Screenshot shows how to remove an Incoming Webhook from Teams channel."::: ++The webhook is now removed from the Teams channel. ++ ## Code sample -| Sample Name | Description | .NET | Node.js | +| Sample name | Description | .NET | Node.js | ||--||--|-| Incoming Webhook |This sample shows how to implement and use Incoming Webhook. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/nodejs)| +| Incoming Webhook |This sample shows how to implement and use an Incoming Webhook. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/nodejs)| ## See also -* [Webhooks and connectors](../what-are-webhooks-and-connectors.md) * [Create Outgoing Webhooks](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md)-* [Create connectors for Microsoft 365 Groups](~/webhooks-and-connectors/how-to/connectors-creating.md) -* [Create and send messages](~/webhooks-and-connectors/how-to/connectors-using.md) * [Build bots for Teams](../../bots/what-are-bots.md) * [Message extensions](../../messaging-extensions/what-are-messaging-extensions.md)-* [Card actions](../../task-modules-and-cards/cards/cards-actions.md) * [Integrate web apps](../../samples/integrate-web-apps-overview.md) * [Share to Teams from web apps](../../concepts/build-and-test/share-to-teams-from-web-apps.md)-* [Secure access and data in Azure Logic Apps](/azure/logic-apps/logic-apps-securing-a-logic-app?tabs=azure-portal) |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Developer preview is a public program that provides early access to unreleased T **2024 February** -* ***February 12, 2024***: [Build API-based message extension using Developer Protal for Teams.](messaging-extensions/build-api-based-message-extension.md) +* ***February 12, 2024***: [Build API-based message extension using Developer Portal for Teams.](messaging-extensions/build-api-based-message-extension.md) * ***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). |