| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Build Basic Tab App | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/build-basic-tab-app.md | Start Microsoft Teams app development with your first Teams tab app. In this tutorial, get familiarized with a basic Teams tab app in one of the following ways: -* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you. +* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app instantaneously. It opens Visual Studio Code (VS Code), where the Teams Toolkit extension, the app source code, and all the dependencies are pre-packaged for you. * **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup. # [GitHub Codespaces](#tab/teamstoolkitcodespaces) Before you create your codespace, ensure that you have: * A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md) > [!TIP]-> [GitHub codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need. +> [GitHub Codespaces](https://github.com/features/codespaces) offers free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need. To create a Teams tab app with GitHub Codespaces, follow the steps: To create a Teams tab app with GitHub Codespaces, follow the steps: <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=standardLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fhello-world-tab-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces"></a> - You may be asked to sign in to GitHub account if you haven't. + You might be asked to sign in to GitHub account if you haven't. 1. Select **Create new codespace**. To create a Teams tab app with GitHub Codespaces, follow the steps: :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your tab."lightbox="../assets/images/get-started/building-codespace.png"::: - Teams Toolkit prepares the tab app project for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code. + Teams Toolkit prepares the tab app project for you and opens it in VS Code in the browser. Teams Toolkit icon appears in the activity bar of VS Code. 1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account. To create a Teams tab app with GitHub Codespaces, follow the steps: :::image type="content" source="../assets/images/get-started/tab-in-teams.png" alt-text="Screenshot shows you the tab app loaded in the Teams client."::: - The Tab app is installed in the Teams client and opens. + The tab app is installed in the Teams client and opens. You've successfully created the tab app and loaded in the Teams client. To create a Teams tab app with GitHub Codespaces, follow the steps: # [Step-by-step guide](#tab/step-by-step-guide) -If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. +If you would want to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your basic tab app. Unlike GitHub Codespaces, you need to set up your development environment. Let's -If a bot is what you are interested in, go to: +If a bot is what you're interested in, go to: > [!div class="nextstepaction"] > [Start building a bot](build-notification-bot.md) -If you want to build message extension app, go to: +If you want to build a message extension app, go to: > [!div class="nextstepaction"] > [Build message extension](build-message-extension.md) |
| platform | Build Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/build-message-extension.md | A message extension allows the users to interact with your web service through b :::image type="content" border="false" source="../assets/images/get-started/get-started-me.png" alt-text="Screenshot shows you the conceptual message extension in Teams client."::: -In this tutorial, you'll learn to build a search based message extension app, this app allows the users to search npm packages from the Node Package Manager (npm) directory. +In this tutorial, you'll learn to build a search-based message extension app, and the app allows users to search npm packages from the Node Package Manager (npm) directory. Get familiarized with search based message extension app in one of the following ways: -* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you. +* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app instantaneously. It opens Visual Studio Code (VS Code), where the Teams Toolkit extension, the app source code, and all the dependencies are pre-packaged for you. * **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup. # [GitHub Codespaces](#tab/teamstoolkitcodespaces) Before you create your codespace, ensure that you have: * A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md) > [!TIP]-> [GitHub Codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespaces that you no longer need. +> [GitHub Codespaces](https://github.com/features/codespaces) offers free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespaces that you no longer need. -To create a search based message extension app with GitHub Codespaces, follow the steps: +To create a search-based message extension app with GitHub Codespaces, follow the steps: 1. Select the following button to open GitHub Codespaces. <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=basicLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fnpm-search-message-extension-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open message extension in GitHub Codespaces"></a> - You may be asked to sign in to GitHub account if you haven't. + You might be asked to sign in to GitHub account if you haven't. 1. Select **Create new codespace**. To create a search based message extension app with GitHub Codespaces, follow th :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your message extension."::: - Teams Toolkit prepares the message extension for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code. + Teams Toolkit prepares the message extension for you and opens it in VS Code in the browser. Teams Toolkit icon appears in the activity bar of VS Code. 1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account. To create a search based message extension app with GitHub Codespaces, follow th :::image type="content" source="../assets/images/get-started/codespace/me-in-teams.png" alt-text="Screenshot shows you the message extension loaded in the Teams client."::: - You've successfully created the search based message extension and loaded in the Teams client. + You've successfully created the search-based message extension and loaded in the Teams client. :::image type="content" source="../assets/images/get-started/codespace/me-teams-chat.png" alt-text="Screenshot shows your message extension loaded in the Teams client."::: # [Step-by-step guide](#tab/step-by-step-guide) -If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. +If you would want to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your message extension app. |
| platform | Build Notification Bot | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/build-notification-bot.md | The notification bot proactively sends messages in Teams channel or group chat o In this tutorial, get familiarized with a notification bot app in one of the following ways: -* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app almost instantaneously. It opens Visual Studio Code, where the Teams Toolkit extension, the app source code, and all dependencies are pre-packaged for you. +* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app instantaneously. It opens Visual Studio Code (VS Code), where the Teams Toolkit extension, the app source code, and all the dependencies are pre-packaged for you. * **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup. # [GitHub Codespaces](#tab/teamstoolkitcodespaces) Before you create your codespace, ensure that you have: * A [Microsoft 365 tenant](../concepts/build-and-test/prepare-your-o365-tenant.md) > [!TIP]-> [GitHub Codespaces](https://github.com/features/codespaces) offers the free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need. +> [GitHub Codespaces](https://github.com/features/codespaces) offers free plan up to a fixed amount of usage every month. If you need to free up the space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need. To create a Teams notification bot with GitHub Codespaces, follow the steps: To create a Teams notification bot with GitHub Codespaces, follow the steps: <a href="https://github.com/codespaces/new?hide_repo_select=true&ref=v3&repo=348288141&machine=basicLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fnotification-codespaces%2Fdevcontainer.json&resume=1" target="_blank"><img src="https://github.com/codespaces/badge.svg" alt="Open hello-world tab in GitHub Codespaces"></a> - You may be asked to sign in to GitHub account if you haven't. + You might be asked to sign in to GitHub account if you haven't. 1. Select **Create new codespace**. To create a Teams notification bot with GitHub Codespaces, follow the steps: :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your notification bot."::: - Teams Toolkit prepares the notification bot project for you and opens it in Visual Studio Code in the browser. Teams Toolkit icon appears in the activity bar of Visual Studio Code. + Teams Toolkit prepares the notification bot project for you and opens it in VS Code in the browser. Teams Toolkit icon appears in the activity bar of VS Code. 1. Select **Sign in to your Microsoft 365** and **Sign in to Azure** to sign in with your Microsoft 365 account. To create a Teams notification bot with GitHub Codespaces, follow the steps: > [!Tip] >- > In real time, events are triggered by an external source, such as a third party API that cause the notification bot to send the user a notification. To emulate an event trigger, you can send an event manually via curl commands on terminal. + > In real time, events are triggered by an external source, such as a third-party API that cause the notification bot to send the user a notification. To emulate an event trigger, you can send an event manually via curl commands on terminal. The notification bot app sends a notification as an Adaptive Card to your Teams client: To create a Teams notification bot with GitHub Codespaces, follow the steps: # [Step-by-step guide](#tab/step-by-step-guide) -If you would like to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. +If you would want to learn how to start a project with Teams Toolkit from scratch, let's go through the step-by-step guide. Unlike GitHub Codespaces, you need to set up your development environment. Let's start building your notification bot app. Unlike GitHub Codespaces, you need to set up your development environment. Let's -If you want to build message extension, go to: +If you want to build a message extension, go to: > [!div class="nextstepaction"] > [Build message extension](build-message-extension.md) |
| platform | Choose What Suits You | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/choose-what-suits-you.md | -You've built your first tab app, notification bot, and message extension. You can build a Teams app as per your app's requirements. Based on factors, such as business needs, development environment, domain knowledge, select the environment and tools to build your app. +You've built your first tab app, notification bot, and message extension. You can build a Teams app as per your app's requirements. Based on the factors, such as business needs, development environment, and domain knowledge, select the environment and tools to build your app. A Teams app offers you the flexibility of choosing your build environment. It includes tools, framework, and languages to approach your app development. Build your Teams app in the environment that's best suited for your app. You can even select a combination. For example, you can use Teams Toolkit to build an app with JavaScript and host it on a SharePoint site. -This section takes you through the various options that you have for building your Teams app as per your requirements. +This section takes you through the various options that you've for building your Teams app as per your requirements. * [Teams collaborative platform](#teams-collaborative-platform) * [Tools and SDKs](#tools-and-sdks) You can build your Microsoft Teams app with the help of the following tools and To start building your Teams app, you can select the tools and SDKs based on your app requirements: -1. **App capabilities**: Choose the capabilities for your app. You can choose single or a combination of capabilities based on your app requirements. -1. **SDKs you need**: Choose the SDKs based on the capability that you are building for your app. For example, if you're building AI capability for your bot app, you must select Teams AI library. +1. **App capabilities**: Choose the capabilities for your app. You can choose a single or a combination of capabilities based on your app requirements. +1. **SDKs you need**: Choose the SDKs based on the capability that you're building for your app. For example, if you're building AI capability for your bot app, you must select Teams AI library. 1. **UI Components**: Choose the UI components to design your app based on your app capability. 1. **Languages**: Choose the language in which you want to build your app.-1. **Recommended Tools**: Choose the tools based on the language that you've selected. You can also use Developer Portal to manage and publish your app. Teams Toolkit allows you to build your app with JavaScript, TypeScript, or C# in Visual Studio Code or Visual Studio. +1. **Recommended Tools**: Choose the tools based on the language that you've selected. You can also use Developer Portal to manage and publish your app. Teams Toolkit allows you to build your app with JavaScript, TypeScript, or C# in Visual Studio Code (VS Code) or Visual Studio. | App capabilities | User interactions | Recommended tools | SDKs | Languages | |--|-|--|--|--|-| **Tabs** | A full-screen embedded web experience. | Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [Teams JavaScript client library](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) for UI functionalities, SharePoint Framework (SPFx), and Microsoft Graph SDK.| C#, TypeScript, and JavaScript (including React). | -| **Bots** | A chat bot that converses with members. |Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK. | C#, TypeScript, and JavaScript. | -| **Message extensions** | Shortcuts for inserting external content into a conversation or taking action on messages. | Visual Studio Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK. | C#, TypeScript, and JavaScript. | +| **Tabs** | A full-screen embedded web experience. | VS Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [Teams JavaScript client library](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) for UI functionalities, SharePoint Framework (SPFx), and Microsoft Graph SDK | C#, TypeScript, and JavaScript (including React) | +| **Bots** | A chat bot that converses with members. |VS Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK | C#, TypeScript, and JavaScript | +| **Message extensions** | Shortcuts for inserting external content into a conversation or taking action on messages. | VS Code or Visual Studio with Teams Toolkit extension, or [TeamsFx CLI](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md) if you prefer using CLI | [TeamsFx SDK](/javascript/api/@microsoft/teamsfx/?view=msteams-client-js-latest&preserve-view=true), [Bot Framework SDK](https://dev.botframework.com/), Teams AI library, and Microsoft Graph SDK | C#, TypeScript, and JavaScript | > [!NOTE] > You can also create and build your Teams app with various SDKs. Teams supports a ### Explore Tools -The following tools in the Teams platform helps you during app development: +The following tools in the Teams platform help you during app development: | App development phase | Teams platform tools | |--|-| Azure OpenAI Service provides REST API access to OpenAI's powerful language mode ### Teams Toolkit -Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio Code and Visual Studio. +Teams Toolkit makes it simple to get started with app development for Microsoft Teams using VS Code and Visual Studio. > [!div class="nextstepaction"] > [Teams Toolkit](~/toolkit/teams-toolkit-fundamentals.md) If you are already familiar with Yeoman workflow, you can use to build your apps **Build your app** :::column-end::: :::column span="2":::- Looking for app development inspiration? Browse our list of real-world scenarios and industry solutions with high fidelity concept mocks to understand the various ways a Teams app can help your users. + Looking for app development inspiration? Browse our list of real-world scenarios and industry solutions with high-fidelity concept mocks to understand the various ways a Teams app can help your users. > [!div class="nextstepaction"] > [See app scenarios](https://adoption.microsoft.com/en-us/extensibility-look-book-gallery/) You can preview your Teams apps running in other high usage Microsoft 365 experi **Integrate with Teams** :::column-end::: :::column span="2":::- Blend the features users love about an existing web app, service, or system with the collaborative features of Teams. + Blend the features that users love about an existing web app, service, or system with the collaborative features of Teams. > [!div class="nextstepaction"] > [Integrate an existing app](~/samples/integrating-web-apps.md) You can preview your Teams apps running in other high usage Microsoft 365 experi **A little code goes a long way** :::column-end::: :::column span="2":::- You don't need to be an expert programmer to build a great Teams app. Try one of several low-code solutions. + You don't need to be an expert programmer to build a great Teams app. Try one of several the low-code solutions. > [!div class="nextstepaction"] > [Create a low-code app](~/samples/teams-low-code-solutions.md) |
| platform | Get Started Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/get-started-overview.md | -Experience the Teams app with GitHub Codespaces or walk through the steps to build a basic, real-world Teams app. The Get started also introduces you to common tools, fundamental concepts, and more advanced functionalities. +Experience the Teams app with GitHub Codespaces or walk through the steps to build a basic, real-world Teams app. The Get started also introduces you to the common tools, fundamental concepts, and more advanced functionalities. Here's an idea of what you'll learn: -* Get up and running quickly with the Microsoft Teams Toolkit. +* Get started quickly with the Microsoft Teams Toolkit. * Build tab, scenario-based apps, and message extension with GitHub Codespaces or step-by-step guide. * Learn about tutorials and code samples available for building your Teams app. * Learn about various tools and SDKs available for building your Teams app. ## Build your first Teams app -In this section, learn more how to build Teams app with different capabilities, such as tab, scenario-based bot app, and message extension. +In this section, learn how to build Teams app with different capabilities, such as tab, scenario-based bot app, and message extension. 1. Select the type of Teams app that you want to build: * **Build a basic Teams tab app**: You can get started with building a Teams app with a basic tab app. - * **Build a scenario-based Teams bot app**: You can build a Teams app that is suitable for a particular scenario or use-case. For example, a notification bot is suitable to send notifications but not to chat. + * **Build a scenario-based Teams bot app**: You can build a Teams app that is suitable for a particular scenario or use-case. For example, a notification bot is suitable for sending notifications but not to chat. - * **Build message extension Teams app**: You can build a search based message extension Teams app. + * **Build message extension Teams app**: You can build a search-based message extension Teams app. 2. Choose your path to build your selected app: * **GitHub Codespaces**: Allows you to run, test, and debug your app in a development environment without the need for any of the setup.- * **Step by step guide**: Allows you to create a Teams app from scratch with all development environment setup. + * **Step-by-step guide**: Allows you to create a Teams app from scratch with all development environment setup. :::image type="content" border="false" source="../assets/images/get-started/codescpaces-vs-manual.png" alt-text="Screenshot shows your choices to build Teams app with codespaces and step-by-step guide."lightbox="../assets/images/get-started/codescpaces-vs-manual.png"::: Based on the capabilities you want for your app, choose an appropriate developme | App capabilities | Tabs | Bots | Message extensions | |--|-|--|--| | **User interactions** | A full-screen embedded web experience. | A chat bot that converses with members. | Shortcuts for inserting external content into a conversation or taking action on messages. |-| **Recommended tools** | Microsoft Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI | Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI | Visual Studio Code with Teams Toolkit extension, or TeamsFx CLI | +| **Recommended tools** | Microsoft Visual Studio Code (VS Code) with Teams Toolkit extension, or TeamsFx CLI if you prefer using CLI | VS Code with Teams Toolkit extension, or TeamsFx CLI | VS Code with Teams Toolkit extension, or TeamsFx CLI | | **SDKs** | TeamsFx SDK for core libs and Teams JavaScript client library for UI functionalities | TeamsFx SDK and Bot Framework SDK | TeamsFx SDK and Bot Framework SDK | | **Technology stacks or Languages** | Web technology in general, HTML, CSS, and JavaScript (incl. React). | Node.js, C#, Java, and Python. | Node.js, C#, Java, and Python. | If you want to build a basic tab app, go to: > [!div class="nextstepaction"] > [Build your basic tab app](build-basic-tab-app.md) -If a bot is what you are interested in, go to: +If a bot is what you're interested in, go to: > [!div class="nextstepaction"] > [Start building a bot](build-notification-bot.md) -If you want to build message extension app, go to: +If you want to build a message extension app, go to: > [!div class="nextstepaction"] > [Build message extension](build-message-extension.md) |
| platform | Glossary | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/glossary.md | Common terms and definitions used in Microsoft Teams developer documentation. | [Link unfurling](../messaging-extensions/how-to/link-unfurling.md) | A feature used with message extension and meeting to unfold links pasted into a compose message area. The links expand to show additional information about the link in Adaptive Cards or in the meeting stage view. | | [LOB apps](../tabs/how-to/authentication/tab-sso-register-aad.md) | Line of business (LOB) applications are internal or specific within an organization or business. It's custom to the organization that created it. Your organization can make LOB applications available through Microsoft store. <br> **See also**: [Store validation guidelines](#s); [Teams store](#t); [Personal app](#p); [Shared app](#s); [Customer-owned app](#c) | | [Local environment](../toolkit/TeamsFx-multi-env.md#create-a-new-environment-manually-in-visual-studio-code) | A default development environment created by Teams Toolkit. <br>**See also**: [Environment](#e); [Dev environment](#d) |-| [Local workbench](../sbs-gs-spfx.yml) | The default option to run and debug a Teams app in Visual Studio Code that is created using SPFx. <br>**See also**: [Workbench](#w); [Teams workbench](#t) | +| [Local workbench](../sbs-gs-spfx.yml) | The default option to run and debug a Teams app in Visual Studio Code (VS Code) that is created using SPFx. <br>**See also**: [Workbench](#w); [Teams workbench](#t) | | [Location capability](../concepts/device-capabilities/location-capability.md) | A device capability that you can integrate with your app to know the geographical location of the app user for an enhanced collaborative experience. This feature is currently available only for Teams mobile clients only. <br>**See also**: [Capability](#c); [Media capability](#m); [Device Capability](#d); [Teams Mobile](#t) | | [Low code apps](../samples/teams-low-code-solutions.md) | A custom Teams app built from scratch using Microsoft Power Platform that requires little or no coding, and can be developed and deployed quickly. | Common terms and definitions used in Microsoft Teams developer documentation. | [Thread discussion](../tabs/design/tabs.md#thread-discussion) | A conversation posted on a channel or chat between users. <br>**See also** [Conversation](#c); [Channel](#c) | | [Teams](../overview.md) | Microsoft Teams is the ultimate message app for your organization. It's a workspace for real-time collaboration and communication, meetings, file and app sharing. | | [Teams identity](../tabs/how-to/authentication/tab-sso-overview.md) | The Microsoft account or Microsoft 365 account of an app user that is used to log in to Teams client, web, or mobile app. |-| [Teams Toolkit](../toolkit/teams-toolkit-fundamentals.md) | The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the Visual Studio Code environment. | +| [Teams Toolkit](../toolkit/teams-toolkit-fundamentals.md) | The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the VS Code environment. | | [TeamsFx](../toolkit/teamsfx-cli.md) | TeamsFx is a text-based command line interface that accelerates Teams application development. It's also called TeamsFx CLI.| | [TeamsFx SDK](../toolkit/teamsfx-sdk.md) | TeamsFx SDK is pre-configured in scaffolded project using TeamsFx toolkit or CLI. | | [TeamsJS library](../tabs/how-to/using-teams-client-library.md) | The TeamsJS library enables you to create hosted experiences in Teams. Starting with TeamsJS v.2.0.0, you can extend Teams apps to run in Outlook and Office. | | [Teams Mobile](../concepts/design/plan-responsive-tabs-for-teams-mobile.md) | Microsoft Teams available as a mobile app. | | [Teams store](../concepts/deploy-and-publish/appsource/publish.md) | A store landing page that brings apps to users in a single place. The apps are categorized by usage, industry, and more. An app must follow Store validation guidelines and obtain an approval before it's available to users via the Teams store. <br>**See also**: [Store validation guidelines](#s); [Microsoft store](#m) |-| [Teams workbench](../sbs-gs-spfx.yml) | A workbench in Visual Studio Code used at build for Teams apps created using SPFx and Teams Toolkit. <br>**See also**: [Workbench](#w); [Local workbench](#l) | +| [Teams workbench](../sbs-gs-spfx.yml) | A workbench in VS Code used at build for Teams apps created using SPFx and Teams Toolkit. <br>**See also**: [Workbench](#w); [Local workbench](#l) | | [Tenant ID](../bots/how-to/authentication/bot-sso-register-aad.md) | The unique identifier of the tenant where your app is registered in Azure AD portal. Your app may be classified as a single-tenant or a multi-tenant app. <br> **See also**: [Single-tenant app](#s); [Multi-tenant apps](#m) | | [Token exchange URL](../bots/how-to/authentication/bot-sso-register-aad.md) | It's the application ID URI that is used for exchanging token. It's configured while configuring the OAuth connection for bot resource. <br> **See also**: [Application ID URI](#u); [SSO](#s) | | [TokenExchangeResource property](../bots/how-to/authentication/bot-sso-code.md) | It's a property of `OAuthCard` class that gets or sets the resource to try to perform token exchange with. Teams refreshes the token if the `TokenExchangeResource` property is populated on the card. <br> **See also**: [OAuth card](#o); [SSO](#s) <br> For more information, see [Microsoft Bot Schema 4.0](/dotnet/api/microsoft.bot.schema.oauthcard) | Common terms and definitions used in Microsoft Teams developer documentation. | [Website url](../tabs/design/tabs-mobile.md) | A property in the app manifest file (`websiteUrl`) that links the app to the website of the organization or landing page of the relevant product. It's a mandatory configuration for Teams mobile client. <br>**See also**: [App manifest](#a); [Teams Mobile](#t) | | [Web app](../samples/integrate-web-apps-overview.md) | An app that runs on a web server. It can be integrated with Microsoft Teams Platform. | | [Webhook](../webhooks-and-connectors/what-are-webhooks-and-connectors.md) | It's a feature of a Teams app used to integrate it with external apps. <br>**See also**: [Incoming Webhook](#i) ; [Outgoing Webhook](#o); [Connector](#c) |-| [Web part](../sbs-gs-spfx.yml) | A UI component used to build a page or a site in a Teams app created using Visual Studio Code and SharePoint Framework. <br>**See also**: [SPFx](#s) | -| [Workbench](../sbs-gs-spfx.yml) | Overall Visual Studio Code UI that encompasses UI components, such as title bar, panel, and more. <br>**See also**: [Local workbench](#l); [Teams workbench](#t) | +| [Web part](../sbs-gs-spfx.yml) | A UI component used to build a page or a site in a Teams app created using VS Code and SharePoint Framework. <br>**See also**: [SPFx](#s) | +| [Workbench](../sbs-gs-spfx.yml) | Overall VS Code UI that encompasses UI components, such as title bar, panel, and more. <br>**See also**: [Local workbench](#l); [Teams workbench](#t) | ## Y |
| platform | Teams Toolkit Tutorial | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/teams-toolkit-tutorial.md | You can build your own Microsoft Teams app with different capabilities using the ## Teams app tutorials -Now, let's build your Teams app. You can use the following languages or framework and prepare your development environment for building your app. +Now, let's build your Teams app. You can use the following languages or frameworks and prepare your development environment for building your app. | | **Tab** | **Bot** | **Message extension** | | | | | | |
| platform | Extend M365 Teams Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/extend-m365-teams-message-extension.md | ms.localizationpriority: high > [!NOTE] >-> * If you've connected your message extension bot to an **Outlook** channel, you must to migrate to the **Microsoft 365** channel. +> If you've connected your message extension bot to an **Outlook** channel, you must to migrate to the **Microsoft 365** channel. Search-based [message extensions](/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions) allow users to search an external system and share results through the compose message area of the Microsoft Teams client. You can now bring production search-based Teams message extensions to preview audiences in Outlook for Windows desktop and outlook.com by [extending your Teams apps across Microsoft 365](overview.md). Alternately, you can use the ready-made Outlook-enabled app in the following sec ### Quickstart -To start with a [sample message extension](https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/NPM-search-connector-M365) that's already enabled to run in Outlook, use Teams Toolkit extension for Visual Studio Code. +To start with a [sample message extension](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/NPM-search-connector-M365) that's already enabled to run in Outlook, use Teams Toolkit extension for Visual Studio Code. -1. From Visual Studio Code, open the command palette (`Ctrl+Shift+P`), type `Teams: Create a new app`. -1. Select **Create a new Teams app** option. -1. Select **Search-based message extension** to download the sample code for a Teams message extension using the latest Teams app manifest. For more information, see [Teams developer manifest](../resources/schem). +1. Open your app project in **Visual Studio Code**. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Select **Teams: Create a New App**. +1. From the dropdown list that appears, select **Message Extension**. +1. Select **Custom Search Results** to download the sample code for a Teams message extension using the latest Teams app manifest. For more information, see [Teams developer manifest](../resources/schem). :::image type="content" source="images/toolkit-palatte-search-sample.png" alt-text="The screenshot is an example that shows the Type 'Create a new Teams app' VS Code command palette to list Teams sample options."::: To start with a [sample message extension](https://github.com/OfficeDev/TeamsFx- 1. Select preferred programming language. 1. Select a location on your local machine for the workspace folder and enter your application name.-1. Open the command palette (`Ctrl+Shift+P`) and type `Teams: Provision in the cloud` to create the required app resources (Azure App Service, App Service plan, Azure Bot, and Managed Identity) in your Azure account. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Enter **Teams: Provision**, to create the Teams app. Few resources under **Teams: Provision** such as Azure App Service, App Service plan, Azure Bot, and Managed Identity in your Azure account. 1. Select a subscription and a resource group.-1. Select **Provision**. -1. Open the command palette (`Ctrl+Shift+P`) and type `Teams: Deploy to the cloud` to deploy the sample code to the provisioned resources in Azure and start the app. +1. Select **Provision**. Alternatively, you can select **Provision** under **LIFECYCLE** section. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under **LIFECYCLE** section. 1. Select **Deploy**. From here, you can skip ahead to [Add Microsoft 365 channel for your bot](#add-microsoft-365-channel-for-your-bot) to complete the final step of enabling the Teams message extension to work in Outlook. (The app manifest is already referencing the correct version, so no updates are necessary). You have two options for updating your app manifest: # [Teams Toolkit](#tab/manifest-teams-toolkit) -1. Open the command palette: `Ctrl+Shift+P`. -1. Run the `Teams: Upgrade Teams manifest` command and select your app manifest file. Changes will be made in place. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Run the `Teams: Upgrade Teams manifest` command and select your app manifest file. Your app manifest files is updated with the latest changes. # [Manual steps](#tab/manifest-manual) Azure Active Directory (AD) single sign-on (SSO) for message extensions works th The final step is to sideload your updated message extension ([app package](/microsoftteams/platform/concepts/build-and-test/apps-package)) into Teams. After you complete, message extension appears in your installed *Apps* from the compose message area. -1. Package your Teams application (manifest and app [icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you used Teams Toolkit to create your app, you can easily do this using the **Zip Teams metadata package** option in the *Deployment* menu of Teams Toolkit. +1. Package your Teams application (manifest and app [icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you use Teams Toolkit to create your app, you can easily do this using the **Zip Teams App Package** option in the **UTILITY** section of Teams Toolkit. Select the `manifest.json` file for your app and the appropriate environment. - :::image type="content" source="images/toolkit-zip-teams-metadata-package.png" alt-text="The screenshot is an example that shows 'Zip Teams metadata package' option in Teams Toolkit extension for Visual Studio Code."::: + :::image type="content" source="images/toolkit-zip-teams-app-package.png" alt-text="The screenshot is an example that shows Zip Teams metadata package option in Teams Toolkit extension for Visual Studio Code."::: 1. Go to **Microsoft Teams** and sign in using your sandbox tenant account. 1. Select **Apps** to open the **Manage your apps** pane. Then select **Upload an app**. - :::image type="content" source="../assets/images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the 'Upload an app' option."::: + :::image type="content" source="~/assets/images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Upload an app option."::: -1. Choose **Upload a customized app** option, select your app package, and install (*Add*) it to your Teams client. +1. Choose the **Upload a custom app** option, select your app package, and install (**Add**) it to your Teams client. - :::image type="content" source="../assets/images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the 'Upload a customized app' option in Teams."::: + :::image type="content" source="~/assets/images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the Upload a customized app option in Teams."::: After it's sideloaded through Teams, your message extension is available in Outlook for Windows desktop and web. To preview your app running in Outlook on the web: 1. Select **New message**. 1. Select **Apps** on the ribbon. - :::image type="content" source="images/outlook-web-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'Apps' menu on the ribbon of the mail composition window to launch your message extension."::: + :::image type="content" source="~/m365-apps/images/outlook-web-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'Apps' menu on the ribbon of the mail composition window to launch your message extension."::: Your message extension is listed. You can invoke it from there and use it just as you would while composing a message in Teams. To preview your app running in Outlook on Windows desktop: 1. Select **New Email**. 1. Select **All Apps** on the ribbon. - :::image type="content" source="images/outlook-desktop-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'All Apps' menu on the ribbon of the composition window to launch your message extension."::: + :::image type="content" source="~/m365-apps/images/outlook-desktop-compose-more-apps.png" alt-text="The screenshot is an example that shows the 'All Apps' menu on the ribbon of the composition window to launch your message extension."::: Your message extension is listed, it opens an adjacent pane to display search results. ## Troubleshooting - While your updated message extension will continue to run in Teams with full [feature support for message extensions](/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions), there are limitations in this early preview of the Outlook-enabled experience to be aware of: + While your updated message extension continues to run in Teams with full [feature support for message extensions](/microsoftteams/platform/messaging-extensions/what-are-messaging-extensions), there are limitations in this early preview of the Outlook-enabled experience to be aware of: * Message extensions in Outlook are limited to the mail [*compose* context](/microsoftteams/platform/resources/schema/manifest-schema#composeextensions). Even if your Teams message extension includes `commandBox` as a *context* in its manifest, the current preview is limited to the mail composition (`compose`) option. Invoking a message extension from the global Outlook *Search* box isn't supported.-* [Action-based message extension](/microsoftteams/platform/messaging-extensions/how-to/action-commands/define-action-command?tabs=AS) commands aren't supported in Outlook. If your app has both search- and action-based commands, it will surface in Outlook, but the action menu won't be available. +* [Action-based message extension](/microsoftteams/platform/messaging-extensions/how-to/action-commands/define-action-command?tabs=AS) commands aren't supported in Outlook. If your app has both search- and action-based commands, it surfaces in Outlook, but the action menu won't be available. * Insertion of more than five [Adaptive Cards](/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design) in an email isn't supported; Adaptive Cards v1.5 and later aren't supported. * [Card actions](/microsoftteams/platform/task-modules-and-cards/cards/cards-actions?tabs=json) of type `messageBack`, `imBack`, `invoke`, and `signin` aren't supported for inserted cards. Support is limited to `openURL`: when selected, the user is redirected to the specified URL in a new tab. Use the [Microsoft Teams developer community channels](/microsoftteams/platform/ ### Debugging -As you test your message extension, you can identify the source (originating from Teams versus Outlook) of bot requests by the [channelId](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#channel-id) of the [Activity](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md) object. When a user performs a query, your service receives a standard Bot Framework `Activity` object. One of the properties in the Activity object is `channelId`, which will have the value of `msteams` or `outlook`, depending on where the bot request originates. For more information, see [search based message extensions SDK](/microsoftteams/platform/resources/messaging-extension-v3/search-extensions). +As you test your message extension, you can identify the source (originating from Teams versus Outlook) of bot requests by the [channelId](<https://github.com/MicrosFrom> Teams Toolkitoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#channel-id) of the [Activity](https://github.com/Microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md) object. When a user performs a query, your service receives a standard Bot Framework `Activity` object. One of the properties in the Activity object is `channelId`, which has the value of `msteams` or `outlook`, depending on where the bot request originates. For more information, see [search based message extensions SDK](/microsoftteams/platform/resources/messaging-extension-v3/search-extensions). ## Code sample | **Sample Name** | **Description** | **Node.js** | ||--|--|-| NPM Search Connector | Use Teams Toolkit to build a message extension app. Works in Teams, Outlook. | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/NPM-search-connector-M365) | +| NPM Search Connector | Use Teams Toolkit to build a message extension app. Works in Teams, Outlook. | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/NPM-search-connector-M365) | | Teams Link Unfurling | Simple Teams app to demonstrate link unfurling. Works in Teams, Outlook. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/msgext-link-unfurling/nodejs) | Tab in stage view | Microsoft Teams tab sample app for demonstrating a tab in stage view. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/msgext-link-unfurling/nodejs) |
| platform | Extend M365 Teams Personal Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/extend-m365-teams-personal-tab.md | Title: Extend a Teams personal tab app for Microsoft 365 + Title: Extend a Teams personal tab app across Microsoft 365 description: Learn how to update your personal tab app to run in Outlook and Microsoft 365 app, in addition to Microsoft Teams. Last updated 02/28/2023 ms.localizationpriority: medium -# Extend a Teams personal tab across Microsoft 365 app +# Extend a Teams personal tab across Microsoft 365 -Personal tabs provide a great way to enhance the Microsoft Teams experience. Using personal tabs, you can provide a user access to their application right within Teams, without the user having to leave the experience or sign in again. With this preview, personal tabs can light up within other Microsoft 365 applications too. This tutorial demonstrates the process of taking an existing Teams personal tab and updating it to run in both Outlook and Microsoft 365 desktop and web experiences, as well as Microsoft 365 for Android app. +Personal tabs provide a great way to enhance the Microsoft Teams experience. Using personal tabs, you can provide a user access to their application right within Teams, without the user having to leave the experience or sign in again. With this preview, personal tabs can light up within other Microsoft 365 applications too. This tutorial demonstrates the process of taking an existing Teams personal tab and updating it to run in both Outlook and Microsoft 365 app desktop and web experiences, and Microsoft 365 for Android app. -Updating your personal app to run in Outlook and Microsoft 365 involves these steps: +Updating your personal app to run in Outlook and Microsoft 365 app involves these steps: > [!div class="checklist"] > To complete this tutorial, you need: If you have an existing personal tab app, make a copy or a branch of your production project for testing and update your App ID in the app manifest to use a new identifier (distinct from the production App ID, for testing). -If you'd like to use sample code instead of your own production code, you can use the Todo List sample. You can either follow the setup steps in the [Todo List Sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/main/todo-list-with-Azure-backend) GitHub repository or use the Teams Toolkit extension to create a new Teams app (select *Start from a sample > Todo List with backend on Azure*). After you've created a personal tab, return to this article to extend it across Microsoft 365. +If you'd like to use sample code instead of your own production code, you can use the Todo List sample. You can either follow the setup steps in the [Todo List Sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/todo-list-with-Azure-backend) GitHub repository or use the Teams Toolkit extension to create a new Teams app (select **Start from a sample** > **Todo List with backend on Azure**). After you've created a personal tab, return to this article to extend it across Microsoft 365. -Alternately, you can use a basic single sign-on *hello world* app that's already Microsoft 365 app enabled, as shown in the following [Quickstart](#quickstart) section, and then skip to [sideload your app in Teams](#sideload-your-app-in-teams). +Alternately, you can use a basic single sign-on (SSO) **hello world** app that's already Microsoft 365 app enabled, as shown in the following [Quickstart](#quickstart) section, and then skip to [sideload your app in Teams](#sideload-your-app-in-teams). ### Quickstart -To start with a personal tab that's already enabled to run in Outlook and Microsoft 365 app, you can use Teams Toolkit extension for Visual Studio Code. +To start with a personal tab that's already enabled to run in Teams, Outlook, and Microsoft 365 app, you can use Teams Toolkit extension for Visual Studio Code. -1. From Visual Studio Code, open the command palette (`Ctrl+Shift+P`), type `Teams: Create a new app`. -1. Select **Create a new Teams app** option. -1. Select **SSO enabled personal tab**. +1. Open your app project in **Visual Studio Code**. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Select **Teams: Create a New App**. +1. Select the **Tab** option. +1. Select **Basic tab**. - :::image type="content" source="images/toolkit-tab-sample.png" alt-text="The Screenshot is an example that shows the Todo List sample (Works in Teams, Outlook and Microsoft 365 app) in Teams Toolkit."::: -1. Select your preferred programming language. + :::image type="content" source="images/toolkit-tab-sample.png" alt-text="The Screenshot is an example that shows the Todo List sample (Works in Teams, Outlook, and Microsoft 365 app) in Teams Toolkit."::: ++1. Select preferred programming language. 1. Select a location on your local machine for the workspace folder and enter your application name.-1. Once your app has been created, within the Teams Toolkit extension, make sure you are signed in to the appropriate Microsoft 365 Developer Program sandbox tenant and Azure account. These can be found within the **Accounts** section of the extension. -1. Open the command palette (`Ctrl+Shift+P`) and type `Teams: Provision in the cloud` to create the required app resources (App Service plan, Storage account, Function App, Managed Identity) in your Azure account. -1. Select a subscription and a resource group. If you choose to create a new resource group, you will also need to specify the Location. +1. Once your app has been created, within the Teams Toolkit extension, make sure you're signed in to the appropriate Microsoft 365 Developer Program sandbox tenant and Azure account. These options can be found within the **ACCOUNTS** section of the extension. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Enter **Teams: Provision**, to create the Teams app resources such as Azure App Service, App Service plan, Azure Bot, and Managed Identity in your Azure account. Alternatively, you can select **Provision** under **LIFECYCLE** section. +1. Select a subscription and a resource group. If you choose to create a new resource group, you'll need to specify the Location. 1. Select **Provision**.-1. Open the command palette (`Ctrl+Shift+P`) and type `Teams: Deploy to the cloud` to deploy the sample code to the provisioned resources in Azure and start the app. +1. Select **Command Palette...** under the View option or **Ctrl+Shift+P**. +1. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under **LIFECYCLE** section. 1. Select **Deploy**. -From here, you can skip ahead to [sideload your app in Teams](#sideload-your-app-in-teams) and preview your app in Outlook and Microsoft 365 app. (The app manifest and TeamsJS API calls have already been updated for Microsoft 365 app.) +From here, you can skip ahead to [sideload your app in Teams](#sideload-your-app-in-teams) and preview your app in Outlook and the Microsoft 365 app. (The app manifest and TeamsJS API calls have already been updated for Microsoft 365 app.) ### SharePoint Framework (SPFx) apps If you used Teams Toolkit to create your personal app, you can also use it to va ## Update TeamsJS references -To run in Outlook and Microsoft 365 app, your app needs to refer to the npm package `@microsoft/teams-js@2.0.0` (or higher). While code with downlevel versions is supported in Outlook and Microsoft 365 app, deprecation warnings are logged, and support for downlevel versions of TeamsJS in Outlook and Microsoft 365 app will eventually cease. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js). +To run in Outlook and Microsoft 365 app, your app needs to refer to the npm package `@microsoft/teams-js@2.0.0` (or higher). While code with downlevel versions is supported in Outlook and Microsoft 365 app, deprecation warnings are logged, and support for downlevel versions of TeamsJS in Outlook and Microsoft 365 app are eventually ceased. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js). You can use Teams Toolkit to help identify and automate the required code changes to upgrade from 1.x TeamsJS versions to TeamsJS 2.x.x versions. Alternately, you can perform the same steps manually; refer to [TeamsJS library](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for details. Upon completion, your *package.json* file references `@microsoft/teams-js@2.0.0` > [!div class="checklist"] >-> * Import statements for teams-js@2.x.x -> * [Function, Enum, and Interface calls](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for teams-js@2.x.x +> * Import statements for <teams-js@2.x.x> +> * [Function, Enum, and Interface calls](../tabs/how-to/using-teams-client-library.md#whats-new-in-teamsjs-version-2xx) for <teams-js@2.x.x> > * `TODO` comment reminders flagging areas that might be impacted by [Context](../tabs/how-to/using-teams-client-library.md#updates-to-the-context-interface) interface changes > * `TODO` comment reminders to [convert callback functions to promises](../tabs/how-to/using-teams-client-library.md#callbacks-converted-to-promises) If your app makes use of [Content Security Policy](https://developer.mozilla.org The final step to running your app in Microsoft 365 and Outlook is to sideload your updated personal tab [app package](..//concepts/build-and-test/apps-package.md) in Microsoft Teams. -1. Package your Teams application ([manifest](../resources/schem) and [app icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you used Teams Toolkit to create your app, you can easily do this using the **Zip Teams metadata package** option in the **Deployment** menu of Teams Toolkit. +1. Package your Teams application ([manifest](../resources/schem) and [app icons](/microsoftteams/platform/resources/schema/manifest-schema#icons)) in a zip file. If you used Teams Toolkit to create your app, you can easily do this using the **Zip Teams App Package** option in the **UTILITY** section of Teams Toolkit. Select the `manifest.json` file for your app and the appropriate environment. - :::image type="content" source="images/toolkit-zip-teams-metadata-package.png" alt-text="'The screenshot is an example that shows the Zip Teams metadata package' option in Teams Toolkit extension for Visual Studio Code."::: + :::image type="content" source="images/toolkit-zip-teams-app-package.png" alt-text="The screenshot is an example that shows the Zip Teams App Package option in Teams Toolkit extension for Visual Studio Code."::: 1. Go to **Microsoft Teams** and sign in using your sandbox tenant account. 1. Select **Apps** to open the **Manage your apps** pane. Then select **Upload an app**. - :::image type="content" source="images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Manage your apps pane and Publish an app options."::: + :::image type="content" source="~/assets/images/teams-manage-your-apps.png" alt-text="The screenshot is an example that shows the Manage your apps pane and Publish an app options."::: -1. Choose **Upload a customized app** option and select your app package. +1. Choose the **Upload a custom app** option and select your app package. - :::image type="content" source="images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the option to upload am app in Teams."::: + :::image type="content" source="~/assets/images/teams-upload-custom-app.png" alt-text="The screenshot is an example that shows the option to upload am app in Teams."::: After it's sideloaded to Teams, your personal tab is available in Outlook and Microsoft 365 app. You must sign in with the same credentials that you used to sideload your app into Teams. When running the Microsoft 365 for Android app, you need to restart the app to use your personal tab app from the Microsoft 365 app. Use the [Microsoft Teams developer community channels](/microsoftteams/platform/ ### Debugging -From Teams Toolkit, you can Debug (`F5`) your tab application running in Microsoft 365 and Outlook, in addition to Teams. +From Teams Toolkit, you can Debug (**F5**) your tab application running in Teams, and Microsoft 365 app and Outlook. :::image type="content" source="images/toolkit-debug-targets.png" alt-text="The screenshot is an example that shows the dropdown menu of debug in Teams in the Teams Toolkit."::: -Upon first run of local debug in Microsoft 365 app or Outlook, you're prompted to sign in to your Microsoft 365 tenant account and install a self-signed test certificate. You'll also be prompted to manually install Teams. Select **Install in Teams** to open a browser window and manually install your app. Then select **Continue** to proceed to debug your app in Microsoft 365 / Outlook. -+Select the desired target and then launch the debug experience. Upon first run of local debug, you're prompted to sign in to your Microsoft 365 tenant account. Provide feedback and report any issues with the Teams Toolkit debugging experience at [Microsoft Teams Framework (TeamsFx)](https://github.com/OfficeDev/TeamsFx/issues). To debug your app in Outlook for Android: :::image type="content" source="images/office-android-debug.png" alt-text="The screenshot is an example that shows the list of webviews in devtool."::: -1. Debug your tab app within the Android WebView. In the same way you [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device +1. Debug your tab app within the Android WebView. In the same way, [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device. ##### Debugging Microsoft 365 for Android Teams Toolkit (`F5`) debugging isn't yet supported with Microsoft 365 for Android app. Here's how to remotely debug your app running in Microsoft 365 for Android app: -1. If you debug using a physical Android device, connect it to your dev machine and enable the option for [USB debugging](https://developer.android.com/studio/debug/dev-options). This is enabled by default with the Android emulator. +1. If you debug using a physical Android device, connect it to your dev machine and enable the option for [USB debugging](https://developer.android.com/studio/debug/dev-options). This function is enabled by default with the Android emulator. 1. Launch the Microsoft 365 app From your Android device. 1. Open your profile **Me > Settings > Allow debugging**, and toggle on the option for **Enable remote debugging**. Teams Toolkit (`F5`) debugging isn't yet supported with Microsoft 365 for Androi :::image type="content" source="images/office-android-debug.png" alt-text="The screenshot is an example that shows the list of webviews in devtool."::: -1. Debug your tab app within the Android WebView. In the same way you [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device. +1. Debug your tab app within the Android WebView. In the same way, [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device. ## Code sample | **Sample Name** | **Description** | **Node.js** | ||--|--|-| Todo List | Editable todo list with SSO built with React and Azure Functions. Works only in Teams (use this sample app to try the upgrade process described in this tutorial). | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/todo-list-with-Azure-backend) | -| Todo List (Microsoft 365) | Editable todo list with SSO built with React and Azure Functions. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/todo-list-with-Azure-backend-M365)| +| Todo List | Editable todo list with SSO built with React and Azure Functions. Works only in Teams (use this sample app to try the upgrade process described in this tutorial). | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/todo-list-with-Azure-backend) | +| Todo List (Microsoft 365) | Editable todo list with SSO built with React and Azure Functions. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2.1.0/todo-list-with-Azure-backend-M365)| | Image Editor (Microsoft 365 app) | Create, edit, open, and save images using Microsoft Graph API. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/m365-extensibility-image-editor) | | Sample Launch Page (Microsoft 365 app) | Demonstrates SSO authentication and the TeamsJS library capabilities as available in different hosts. Works in Teams, Outlook, Microsoft 365 app. | [View](https://github.com/OfficeDev/microsoft-teams-library-js/tree/main/apps/sample-app) | | Northwind Orders app | Demonstrates how to use the TeamsJS library v.2 to extend teams application to other Microsoft 365 host apps. Works in Teams, Outlook, Microsoft 365 app. Optimized for mobile.| [View](https://github.com/microsoft/app-camp/tree/main/experimental/ExtendTeamsforM365) | |
| platform | Define Action Command | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/action-commands/define-action-command.md | First, you must decide the location from where your action command must be invok Commands context = message - > [!NOTE] - > The initial invoke to your bot includes a JSON object containing the message from which it was invoked. You can process the message before presenting them with a task module. + > [!NOTE] + > + > * The initial invoke to your bot includes a JSON object containing the message from which it was invoked. You can process the message before presenting a task module. + > + > * When the user selects ellipses **…**, an overflow menu is displayed. However, by default, message actions for apps created by you for your organization or third-party apps aren't displayed. After the user selects **More actions**, they can see the message actions and select the required option. The respective message action is displayed in the overflow menu. The overflow menu displays the three most recent message actions. You can't pin the message action to be displayed. The following image displays the locations from where action command is invoked: |
| platform | Add Single Sign On | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-single-sign-on.md | You can perform the following steps to add SSO using Teams Toolkit in Visual Stu | -- | --| |Develop Single Sign-on Experience in Teams | [How to Develop Single Sign-on Experience](https://github.com/OfficeDev/TeamsFx/wiki/Develop-single-sign-on-experience-in-Teams) | +> [!NOTE] +> When SSO is enabled, Teams Toolkit by default provisions a single-tenant Azure AD app, which means only user and guest accounts in the same directory as your M365 account can sign in to your Teams app. For more information on supporting multi-tenant to update your TeamsFx project, see [Multi-tenancy support for Azure AD app](https://github.com/OfficeDev/TeamsFx/wiki/Multi-tenancy-Support-for-Azure-AD-app). + ## See also * [Teams Toolkit Overview](teams-toolkit-fundamentals.md) |