| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Designing Apps In Meetings | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md | Users can add a meeting extension before and during meetings. They also can add In the meeting details, users can select **Add a tab +** to open the app flyout and find apps optimized for meetings. ### Add during a meeting In the meeting details, users can select **Add a tab +** to open the app flyout Once app is added (for example, on desktop), users can access the app in a meeting by selecting **More** :::image type="icon" source="../../assets/icons/teams-client-more.png":::. #### Desktop In a meeting, users can select **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: > **Add an app** and select the app they want. ## Before a meeting Prior to a meeting, your app's available to users in a tab. The following example shows a draft survey question that people will answer during the meeting. ### Anatomy: Meeting tab (before and after meetings) |Counter|Description| |-|--| People might use the in-meeting tab to: #### Mobile #### Desktop ### Anatomy: In-meeting tab |Counter|Description| |-|--| People might use the in-meeting tab to: Optimize your in-meeting tab to fit edge-to-edge within the 280 pixel-wide iframe area. There are 20 pixels of padding on the left and right sides of the iframe and between the tab header. The iframe is full bleed to the bottom of the tab. ### Scrolling Remember the following if you allow scrolling: * Users should only see the content they've scrolled to (nothing above or below). * The scrollbar is part of the iframe content. ### Navigation For scenarios with navigation layers or heavy content, we recommend allowing users to navigate to a secondary layer. Users must be able to go back to the previous layer. ## Use an in-meeting dialog In-meeting dialogs are triggered by a user (such as the meeting organizer) who m ### Mobile ### Desktop ### Anatomy: In-meeting dialog |Counter|Description| |-|--| In-meeting dialogs are triggered by a user (such as the meeting organizer) who m ### Anatomy: In-meeting dialog header There are two header variants. When possible, use the variant with the avatar to reinforce that the dialog is coming from a person. In-meeting dialogs can vary in size to account for different scenarios. Make sur * **Width**: You can specify the width of the dialog's iframe anywhere within the supported size range. * **Height**: You can specify the height of the dialog's iframe anywhere within the supported size range. You also can allow users to scroll vertically if your app content exceeds the maximum height. ## Use the shared meeting stage The shared meeting stage is all about collaboration and participation. Here are :::column-end::: :::column span="3"::: :::column-end::: :::row-end::: The shared meeting stage is all about collaboration and participation. Here are :::column-end::: :::column span="3"::: :::column-end::: :::row-end::: The shared meeting stage is all about collaboration and participation. Here are :::column-end::: :::column span="3"::: :::column-end::: :::row-end::: ### Anatomy: Share all app content to a meeting |Counter|Description| |-|--| The shared meeting stage is all about collaboration and participation. Here are ### Anatomy: Share specific app content to a meeting |Counter|Description| |-|--| Apps shared to the meeting stage vary in size based on the state of the meeting When the side panel isn't open, the meeting stage is 994x678 pixels by default and can be a minimum 792x382 pixels. #### Meeting stage (with side panel) When the side panel is open, the meeting stage is 918x540 pixels by default and can be a minimum 472x382 pixels. ## After a meeting You can go back to a meeting after it ends and view app content. In this example, the meeting organizer can look at poll results in the **Contoso** tab. (Note: From a design standpoint, there's no difference between the pre- and post-meeting tab experience.) ## Best practices Use these recommendations to create a quality app experience. :::row::: :::column span=""::: #### Do: Limit the number of interactions For in-meeting dialogs, remove unnecessary content that doesn't help users accom :::column-end::: :::column span=""::: #### Don't: Introduce unnecessary elements A single in-meeting dialog with multiple interactions can distract from the meet :::row::: :::column span=""::: #### Do: Create a focused environment We recommend keeping your appΓÇÖs experience scoped to just the meeting stage. Y :::column-end::: :::column span=""::: #### Don't: Include competing surfaces Your app should only ask users to focus on a single surface a time, whether it's :::row::: :::column span=""::: #### Do: Use a one-column dialog Since the dialogs are at the center of the meeting stage, task completion should :::column-end::: :::column span=""::: #### Don't: Clutter the space Dense or overly structured content can be distracting and overwhelming, especial :::row::: :::column span=""::: #### Do: Use a one-column tab Given the in-meeting tab's narrow nature, we strongly recommend displaying the c :::column-end::: :::column span=""::: #### Don't: Use multiple columns Due to the limited space of the in-meeting tab, layouts with more than one colum :::row::: :::column span=""::: #### Do: Right align the primary action We recommend positioning the most visually heavy action to the right-most locati :::column-end::: :::column span=""::: #### Don't: Left or center align actions This deviates from the standard Teams pattern for control placement in a dialog :::row::: :::column span=""::: #### Do: Scroll vertically Users expect vertical scrolling in Teams (and elsewhere). This may not apply if :::column-end::: :::column span=""::: #### Don't: Scroll horizontally Horizontal scrolling isnΓÇÖt an expected behavior in Teams (including the meetin :::row::: :::column span=""::: #### Do: Surface complex scenarios in the in-meeting tab If your app includes multiple tasks, we strongly recommend using an in-meeting t :::column-end::: :::column span=""::: #### Don't: Make in-meeting dialogs complex In-meeting dialogs are intended for brief interactions. :::row::: :::column span=""::: #### Do: Focus on dark theme Teams meetings are optimized for dark theme to help reduce visual and cognitive :::column-end::: :::column span=""::: #### Don't: Use unfamiliar colors Colors that clash with the meeting environment may be distracting and appear les :::row::: :::column span=""::: #### Do: Have a back button If you have more than one layer of navigation in an in-meeting tab, users must b :::column-end::: :::column span=""::: #### Don't: Include another dismiss button Providing an option to close in-meeting tab content may cause issues since there :::column span=""::: :::column-end::: :::column span=""::: #### Caution: Avoid modals within the in-meeting tab Modals (also known as task modules) in the already narrow in-meeting tab might w :::row::: :::column span=""::: #### Do: Resize and scale your app responsively App content should dynamically resize and condense in smaller windows. Keep your :::column-end::: :::column span=""::: #### Don't: Crop or clip primary UI components |
| platform | Enable And Configure Your App For Teams Meetings | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md | -# Enable and configure your apps for Teams meetings +# Enable and configure apps for meetings Every team has a different way of communicating and collaborating tasks. To achieve these different tasks, customize Teams with apps for meetings. Enable your apps for Teams meetings and configure the apps to be available in meeting scope within their app manifest. |
| platform | Teams Live Share Capabilities | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-live-share-capabilities.md | -# Live Share capabilities +# Live Share core capabilities The Live Share SDK can be added to your meeting extension's `sidePanel` and `meetingStage` contexts with minimal effort. This article focuses on how to integrate the Live Share SDK into your app and key capabilities of the SDK. |
| platform | Bots | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/design/bots.md | Bots are available in chats, channels, and personal apps. Users can access bots that were added on desktop with an @mention. ### Desktop Users can add a bot one of the following ways: * Using the app flyout by selecting the **More** icon on the left side of Teams. * With an @mention in the new chat or compose box (the following example shows how you can do this in a group chat). - :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention." border="false"::: + :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention."::: ## Introduce a bot In personal contexts, welcome messages set your bot's tone. The message includes #### Mobile #### Desktop ### Welcome message in channels and group chats Your bot's introduction should be slightly different in channels and group chats #### Mobile #### Desktop ### Bot authentication with single sign-on DonΓÇÖt forget: In the bot command menu (**What can I do?**), you must also prov #### Mobile #### Desktop ### Tours In a personal app, a carousel can provide an effective overview of your bot and #### Mobile #### Desktop ### Channels and group chats In channels and group chats, a tour should open in a modal (also known as a [tas #### Mobile #### Desktop ## Chat with a bot You can use bots in the following contexts: #### Mobile |Counter|Description| |-|--| You can use bots in the following contexts: #### Desktop |Counter|Description| |-|--| The list of commands should be brief. The menu is only meant to highlight your b The command menu must always be available regardless of the state of the conversation. ## Understand what people are saying Use a thesaurus and get people from as many different backgrounds as possible to :::row::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::row-end::: The following examples outline the user intent and data in messages sent to bots :::row::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::column span=""::: :::column-end::: :::row-end::: Bots can deliver an exact match to a query or a group of related matches to help #### Mobile #### Desktop ### Multi-turn interactions In the following examples, the bot responds to each message with options for wha #### Mobile #### Desktop ### Reach out to users With proactive messaging, your bot can act like a digest that sends notification In the following example, the user gets a notification that a bot messaged them in another channel. Now in that channel, the user can read their message from the bot. #### Desktop In the following example, the user gets a toast notification that a bot messaged them in another channel. Now in that channel, the user can read their message from the bot. ### Use tabs with bots In personal apps, a tab can complement what your bot can do. For example, if you #### Mobile #### Desktop ## Manage a bot Users should be able to change a bot's settings. You can provide this functionality with bot commands, but it's usually more efficient to include all settings in a [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) (as shown in the following example). ## Best practices Use these recommendations to create a quality app experience. ### Content #### Do: Establish a clear persona See more about writing for bots in the <a href="https://www.figma.com/community/ :::row::: :::column span=""::: #### Do: Clearly convey what your bot can do Welcome messages and tours help people understand what they can do with your bot :::column-end::: :::column span=""::: #### Don't: Obscure your bot's features First impressions matter. People will likely be confused or suspicious when pres :::row::: :::column span=""::: #### Do: Recognize non-questions Your bot should be able to respond to messages like "Hi", "Help", and "Thanks" w :::column-end::: :::column span=""::: #### Don't: Miss out on opportunities to delight Some people expect conversations to flow naturally like they would with a real p :::row::: :::column span=""::: #### Do: Provide help If your bot canΓÇÖt satisfy a request, provide ways for a user to educate themse :::column-end::: :::column span=""::: #### Don't: Leave users stranded People will quickly abandon your bot if they canΓÇÖt troubleshoot issues. :::row::: :::column span=""::: #### Do: Use task modules or tabs If your bot provides an answer that requires a few more steps, you can link to a :::column-end::: :::column span=""::: #### Don't: Make multi-turn interactions tedious An extensive conversation to complete a single task is slow and overly complex. :::row::: :::column span=""::: #### Do: Only show sensitive info in a personal context If your bot is in a group chat or channel, we recommend directing users to a pri :::column-end::: :::column span=""::: #### Don't: Some content isnΓÇÖt meant to be seen by everyone |
| platform | Add Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/add-authentication.md | To add the Microsoft Teams channel: 1. Open your bot, which is listed in the **Recent resources** section. -1. Select **Channels** in the left pane and select **Microsoft Teams** :::image type="icon" source="../../../assets/icons/teams-icon.png" border="false":::. +1. Select **Channels** in the left pane and select **Microsoft Teams** :::image type="icon" source="../../../assets/icons/teams-icon.png":::. :::image type="content" source="../../../assets/images/adaptive-cards/channel-teams.png" alt-text="Channel Teams"::: |
| platform | Auth Aad Sso Bots | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md | ms.localizationpriority: medium -# Single sign-on (SSO) support for bots +# Use SSO authentication for bots Single sign-on authentication in Microsoft Azure Active Directory (Azure AD) silently refreshes the authentication token to minimize the number of times users need to enter their sign in credentials. If users agree to use your app, they don't have to provide consent again on another device as they're signed in automatically. Tabs and bots have similar flow for SSO support. But bot [requests tokens](#request-a-bot-token) and [receives responses](#receive-the-bot-token) with a different protocol. Single sign-on authentication in Microsoft Azure Active Directory (Azure AD) sil See the following video to learn about single sign-on (SSO) support for bots: <br>-> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4OASc] +> [!VIDEO <https://www.microsoft.com/en-us/videoplayer/embed/RE4OASc>] <br> ## Bot SSO at runtime |
| platform | Bots Filesv4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/bots-filesv4.md | Title: Send and receive files through the bot + Title: Send and receive files using bot description: Learn how to send and receive files through the bot using Graph APIs for personal, channel and groupchat scopes. Last updated 05/20/2019 ms.localizationpriority: medium -# Send and receive files through the bot +# Send and receive files using bot > [!IMPORTANT] > The articles in this document are based on the v4 Bot Framework SDK. |
| platform | Channel And Group Conversations | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/conversations/channel-and-group-conversations.md | Title: Channel and group conversations with a bot + Title: Create conversation bots for channel or group chat description: Learn how to send, receive, and handle messages for a bot in a channel or group chat. Learn about design guidelines and more. |
| platform | Request Headers Of The Bot | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/conversations/request-headers-of-the-bot.md | -# Send tenant ID and conversation ID to the request headers of the bot +# Request headers of the bot The current outgoing requests to the bot don't contain in the header or URL any information that helps bots route the traffic without unpacking the entire payload. The activities are sent to the bot through a URL similar to https://<your_domain>/api/messages. Requests are received to show the conversation ID and tenant ID in the headers. |
| platform | Create A Bot Commands Menu | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/create-a-bot-commands-menu.md | ms.localizationpriority: medium -# Bot command menus +# Create a commands menu [!INCLUDE [pre-release-label](~/includes/v4-to-v3-pointer-bots.md)] A prerequisite to create a command menu for your bot is that you must edit an ex 1. Open Teams and select **Apps** from the left pane. In the **Apps** page, search for **App Studio**, and select **Open**. > [!WARNING]- > If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by August 01, 2022. + > If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022. :::image type="content" source="conversations/Media/AppStudio.png" alt-text="appstudio-media"::: |
| platform | Locally With An Ide | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/debug/locally-with-an-ide.md | ms.localizationpriority: medium -# Test and debug your bot locally +# Test and debug your bot locally with IDE When testing your bot, you need to consider both the contexts you want your bot to run in, and any functionality you may have added to your bot that requires data specific to Microsoft Teams. Ensure that the method you choose to test your bot aligns with its functionality. |
| platform | Rate Limit | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/rate-limit.md | -# Rate limiting for bots +# Optimize your bot with rate limiting in Teams Rate limiting is a method to limit messages to a certain maximum frequency. As a general principle, your application must limit the number of messages it posts to an individual chat or channel conversation. This ensures an optimal experience and messages don't appear as spam to your users. |
| platform | Update And Delete Bot Messages | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/update-and-delete-bot-messages.md | ms.localizationpriority: medium -# Update and delete messages sent from your bot +# Update and delete messages sent from bot [!INCLUDE [pre-release-label](~/includes/v4-to-v3-pointer-bots.md)] |
| platform | What Are Bots | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/what-are-bots.md | -# Bots in Microsoft Teams +# Build bots for Teams A bot is also referred to as a chatbot or conversational bot. It is an app that runs simple and repetitive tasks by users such as customer service or support staff. Everyday use of bots include, bots that provide information about the weather, make dinner reservations, or provide travel information. Interactions with bots can be quick questions and answers or complex conversations. |
| platform | Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/authentication/authentication.md | Enable authentication with SSO or third party OAuth IdPs in your tab app, bot ap :::row-end::: :::row::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/tab-sso-icon.png" alt-text="SSO for tab app" link="../../tabs/how-to/authentication/tab-sso-overview.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/tab-sso-icon.png" alt-text="SSO for tab app" link="../../tabs/how-to/authentication/tab-sso-overview.md"::: :::column-end::: :::column span="1"::: <br> Enable authentication with SSO or third party OAuth IdPs in your tab app, bot ap :::column-end::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/tab-app-idp.png" alt-text="Authentication with third-party OAuth provider for tab app." link="../../tabs/how-to/authentication/auth-tab-aad.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/tab-app-idp.png" alt-text="Authentication with third-party OAuth provider for tab app." link="../../tabs/how-to/authentication/auth-tab-aad.md"::: :::column-end::: :::row-end::: :::row::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/bot-sso-icon.png" alt-text="SSO for bot app" link="../../bots/how-to/authentication/auth-aad-sso-bots.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/bot-sso-icon.png" alt-text="SSO for bot app" link="../../bots/how-to/authentication/auth-aad-sso-bots.md"::: :::column-end::: :::column span="1"::: <br> Enable authentication with SSO or third party OAuth IdPs in your tab app, bot ap :::column-end::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/bot-app-idp.png" alt-text="Authentication with third-party OAuth provider for bot app." link="../../bots/how-to/authentication/add-authentication.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/bot-app-idp.png" alt-text="Authentication with third-party OAuth provider for bot app." link="../../bots/how-to/authentication/add-authentication.md"::: :::column-end::: :::row-end::: :::row::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/mex-sso-icon.png" alt-text="SSO for messaging extension app" link="../../messaging-extensions/how-to/enable-SSO-auth-me.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/mex-sso-icon.png" alt-text="SSO for messaging extension app" link="../../messaging-extensions/how-to/enable-SSO-auth-me.md"::: :::column-end::: :::column span="1"::: <br> Enable authentication with SSO or third party OAuth IdPs in your tab app, bot ap :::column-end::: :::column span="1":::- :::image type="content" source="../../assets/images/authentication/mex-app-idp.png" alt-text="Authentication with third-party oAuth IdPs for messaging extension app." link="../../messaging-extensions/how-to/add-authentication.md" border="false"::: + :::image type="content" source="../../assets/images/authentication/mex-app-idp.png" alt-text="Authentication with third-party oAuth IdPs for messaging extension app." link="../../messaging-extensions/how-to/add-authentication.md"::: :::column-end::: :::row-end::: |
| platform | App Studio Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/app-studio-overview.md | -> **Try the Developer Portal**: App Studio has evolved. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/). <br> App Studio will be deprecated by August 01, 2022. +> **Try the Developer Portal**: App Studio has evolved. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/). <br> App Studio will be deprecated by June 30, 2022. App Studio makes it easy to start creating or integrating your own Microsoft Teams apps, whether you develop custom apps for your enterprise or SaaS applications for teams around the world by streamlining the creation of the manifest and package for your app and providing useful tools like the Card Editor and a React control library. |
| platform | Apps Package | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/apps-package.md | ms.localizationpriority: high -# Create a Microsoft Teams app package +# Create Teams app package You need an app package however you plan to distribute your Microsoft Teams app. A valid package is a ZIP file that contains the following: The color version of your icon displays in most Teams scenarios and must be 192x Teams automatically crops your icon to display a square with rounded corners in multiple scenarios and a hexagonal shape in bot scenarios. To crop the symbol without losing any detail, include 48 pixels of padding around your symbol. ### Outline icon An outline icon displays in two scenarios: The icon must be 32x32 pixels. It can be white with a transparent background or transparent with a white background (no other colors are permitted). The outline icon should not have any extra padding around the symbol. ### Best practices :::row::: :::column span=""::: #### Do: Follow the precise outline icon guidelines The RGB values of white used in your icon must be Red: 255, Green: 255, Blue: 25 :::column-end::: :::column span=""::: #### Don't: Crop in a circular or rounded square shape Here's how app icons appear in different Teams capabilities and contexts. #### Personal app #### Bot (channel) #### Message extension ## Next step |
| platform | Debug | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/debug.md | ms.localizationpriority: medium -# Choose a setup to test and debug your Microsoft Teams app +# Choose a test setup and debug your Teams app Microsoft Teams apps contain one or more capabilities and the ways to run or even host them are different. For debugging, use one of the following ways: For bots registered in the Microsoft Bot Framework, update the bot's messaging e > [!WARNING] >-> * If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by August 01, 2022. +> * If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022. ## Cloud-hosted To load and run your experience within Teams, you need to create a package and u ## See also -[Test and debug your bot locally](../../bots/how-to/debug/locally-with-an-ide.md#test-and-debug-your-bot-locally) +[Test and debug your bot locally with IDE](../../bots/how-to/debug/locally-with-an-ide.md#test-and-debug-your-bot-locally-with-ide) |
| platform | Deep Links | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-links.md | microsoftTeams.executeDeepLink(/*deepLink*/); ### Open a scheduling dialog -You can open a scheduling dialog from your Teams app, as shown in the following code. This is especially useful if your app helps the user complete calendar or scheduling related tasks. --# [TeamsJS v2](#tab/teamsjs-v2) --```javascript -// Open a scheduling dialog from your tab -if(calendar.isSupported()) { - const calendarPromise = calendar.composeMeeting({ - attendees: ["joe@contoso.com", "bob@contoso.com"], - content: "test content", - endTime: "2018-10-24T10:30:00-07:00" - startTime: "2018-10-24T10:00:00-07:00" - subject: "test subject"}); - calendarPromise. - then((result) => {/*Successful operation*/}). - catch((error) => {/*Unsuccessful operation*/}); -} -else { /* handle case where capability isn't supported */ } -``` +> [!NOTE] +> In order to open the scheduling dialog in Teams, developers need to continue using the original deep-link URL based method, since Teams does not yet support the calendar capability. For more information about working with the calendar, see, the [calendar](/javascript/api/@microsoft/teams-js/calendar?view=msteams-client-js-latest&preserve-view=true) namespace in the API reference documentation. -# [TeamsJS v1](#tab/teamsjs-v1) +### tab/Teams JS v1 ```javascript // Open a scheduling dialog from your tab |
| platform | Test Data | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/test-data.md | ms.localizationpriority: medium Last updated 11/01/2019 -# Add test data to your Microsoft 365 test tenant +# Add test data to your environment You can test your Microsoft Teams app with sample data with a Microsoft 365 developer subscription. |
| platform | Add Default Install Scope | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/add-default-install-scope.md | -# Configure default install options for your Microsoft Teams app +# Configure default install options for Teams app ItΓÇÖs common for an app to support multiple scenarios in Teams, but you may have designed it with a specific scope and capability in mind. For example, if your app is primarily for team or channel use, you can make sure that the first install option users see in the store is **Add to a team**. |
| platform | Apps Upload | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/apps-upload.md | -# Upload your app in Microsoft Teams +# Upload your app in Teams You can sideload Microsoft Teams apps without having to publish to your organization or the Teams store in the following scenarios: To access apps through **Manage your apps**, follow the steps: 1. Go to **Apps** and select **Manage your apps** in Teams to view the installed apps across all your channels or for personal use in a list format. :::image type="content" source="~/assets/images/publish-app/manage-apps-list.png" alt-text="Access teams apps list" border="true":::- + 1. Select the app dropdown to view all the scopes where the app is installed.- + :::image type="content" source="~/assets/images/publish-app/app-scopes.png" alt-text="Access teams app scope" border="true":::- + 1. Select the scope of app to go to the app in the channel or personal view. The list of scopes consists of personal scope and teams scope only. Apps installed in group chat scope aren't displayed in this view currently.- + Teams provide several ways to open apps. For more information, see [access your apps in Teams](https://support.microsoft.com/office/access-your-apps-in-teams-0758cb09-9e85-40e7-a974-51df7734646a). ### Update your app If an update is available to your app, then the **Update available** option is e 1. Select **Update available** to view update. - :::image type="content" source="~/assets/images/publish-app/update-available.png" alt-text="Update Teams app" border="true"::: + :::image type="content" source="~/assets/images/publish-app/update-available.png" alt-text="Update Teams app."::: 1. Select **View update**, a window with update option appears. 1. Select **Update** button to update your app.- - :::image type="content" source="~/assets/images/publish-app/update-window.png" alt-text="Update Teams app in manage apps" border="true"::: - :::image type="content" source="~/assets/images/publish-app/updated-app.png" alt-text="Updated app" border="true"::: + :::image type="content" source="~/assets/images/publish-app/update-window.png" alt-text="Update Teams app in manage apps."::: ++ :::image type="content" source="~/assets/images/publish-app/updated-app.png" alt-text="Updated app."::: ### Remove your app To remove app from Teams, follow the steps: 1. Find the app in **Manage your app**.-1. Select :::image type="content" source="~/assets/images/publish-app/bin-icon.png" alt-text="Remove app in Teams" border="false"::: at the scope of the installed app. - - :::image type="content" source="~/assets/images/publish-app/uninstall-from-channel.png" alt-text="Remove app in a channel" border="true"::: ++1. Select :::image type="content" source="~/assets/images/publish-app/bin-icon.png" alt-text="Remove app in Teams."::: at the scope of the installed app. ++ :::image type="content" source="~/assets/images/publish-app/uninstall-from-channel.png" alt-text="Remove app in a channel."::: 1. Select **Remove** to remove your app.- - :::image type="content" source="~/assets/images/publish-app/remove-app-teams.png" alt-text="Remove an app from Teams" border="true"::: ++ :::image type="content" source="~/assets/images/publish-app/remove-app-teams.png" alt-text="Remove an app from Teams."::: > [!NOTE] > |
| platform | Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/post-publish/overview.md | To stop distribution of an app after you've published, follow the steps: 1. On the **Product overview** page, select **Stop selling**. It removes the app from the Microsoft AppSource. 1. To initiate de-listing of the app, on **Partner Center**, select the **Overview** page, and then select **Stop selling**. -After you stop the distribution of an app, you can still see it in Partner Center with a **Not available** status. If you decide to list the app again, follow the instructions to [Publish your app to the Microsoft Teams store](../publish.md). +After you stop the distribution of an app, you can still see it in Partner Center with a **Not available** status. If you decide to list the app again, follow the instructions to [Publish your app to the Microsoft Teams store](/concepts/deploy-and-publish/appsource/publish#teams-app-submission). ## See also |
| platform | Include Saas Offer | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/include-saas-offer.md | -# Include a SaaS offer with your Microsoft Teams app +# Include a SaaS offer with your Teams app :::row::: :::column span="3"::: Here's a general idea of how to monetize your app: :::column-end::: :::column span="1"::: :::column-end::: :::row-end::: |
| platform | Monetize Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/monetize-overview.md | ms.localizationpriority: high # Monetize your app Microsoft Teams app Store provides features that enable you to monetize your apps and gain customers by engaging with your users. The topics in this section show you how to build these features into your app.-+ ## Choose a pricing model :::row::: |
| platform | Submission Checklist | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md | -# Prepare your Microsoft Teams store submission +# Prepare your Teams store submission You've designed, built, and tested your Microsoft Teams app. Now you're ready to list it so people can discover and start using your app. See the following video to learn more about publishing your app to the Microsoft Teams app store: <br> -> [!VIDEO https://www.microsoft.com/videoplayer/embed/RE4WG3l] +> [!VIDEO <https://www.microsoft.com/videoplayer/embed/RE4WG3l>] <br> Before you submit your app to [Partner Center](/office/dev/store/use-partner-center-to-submit-to-appsource), ensure you've done the following. Before you submit your app to [Partner Center](/office/dev/store/use-partner-cen While your app may be working in a test environment, you should check your app package to avoid running into issues during the submission process. > [!WARNING]-> If you have been using App Studio, we recommend that you'd try the [Developer Portal](https://dev.teams.microsoft.com/) to configure, distribute, and manage your Teams apps. App Studio will be deprecated by August 01, 2022. +> If you have been using App Studio, we recommend that you'd try the [Developer Portal](https://dev.teams.microsoft.com/) to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022. The Microsoft Teams app validation tool helps you identify and fix issues before submitting to Partner Center. The tool automatically checks your app's configurations against the same test cases used during store validation. Depending on your app's features, you may need to provide all the following acco * Admin account (required) * Non-admin account (required)-* An account that isn't pre-configured to properly test the first-run sign-in experience (required). -* An account with access to premium or upgraded features (if applicable). -* Two accounts in the same tenant to test the collaboration experience for apps that work in shared contexts (if applicable). +* An account that isn't pre-configured to properly test the first-run sign-in experience (required) +* An account with access to premium or upgraded features (if applicable) +* Two accounts in the same tenant to test the collaboration experience for apps that work in shared contexts (if applicable) ### Tenant configurations Make sure your short description adheres to the [store validation guidelines](~/ The long description can provide a narrative that highlights your apps': * Main features-* The problems it solves. +* The problems it solves * Target audience While this description can be as long as 4,000 characters, most users will only read between 300-500 words. |
| platform | Teams Store Validation Guidelines | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md | Following these guidelines increases the chances of your app to pass the Microso :::row::: :::column:::- :::image type="content" source="../../../../assets/icons/value-proposition.png" alt-text="value-proposition-teams" link="#value-proposition" border="false"::: + :::image type="content" source="../../../../assets/icons/value-proposition.png" alt-text="value-proposition-teams" link="#value-proposition"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/security.png" alt-text="security-store" link="#security" border="false"::: + :::image type="content" source="../../../../assets/icons/security.png" alt-text="security-store" link="#security"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/function.png" alt-text="functionality" link="#general-functionality-and-performance" border="false"::: + :::image type="content" source="../../../../assets/icons/function.png" alt-text="functionality" link="#general-functionality-and-performance"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/package.png" alt-text="app-package" link="#app-package-and-store-listing" border="false"::: + :::image type="content" source="../../../../assets/icons/package.png" alt-text="app-package" link="#app-package-and-store-listing"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/saas-offer.PNG" alt-text="saas" link="#apps-linked-to-saas-offer" border="false"::: + :::image type="content" source="../../../../assets/icons/saas-offer.PNG" alt-text="saas" link="#apps-linked-to-saas-offer"::: :::column-end::: :::row-end::: :::row::: :::column span="":::- :::image type="content" source="../../../../assets/icons/tab.png" alt-text="tab-teams" link="#tabs" border="false"::: + :::image type="content" source="../../../../assets/icons/tab.png" alt-text="tab-teams" link="#tabs"::: :::column-end::: :::column:::- :::image type="content" source="../../../../assets/icons/bot.png" alt-text="bot-teams" link="#bots-1" border="false"::: + :::image type="content" source="../../../../assets/icons/bot.png" alt-text="bot-teams" link="#bots-1"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/messaging-extension.png" alt-text="messaging" link="#message-extensions" border="false"::: + :::image type="content" source="../../../../assets/icons/messaging-extension.png" alt-text="messaging" link="#message-extensions"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/task-module.png" alt-text="task-module-teams" link="#task-modules" border="false"::: + :::image type="content" source="../../../../assets/icons/task-module.png" alt-text="task-module-teams" link="#task-modules"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/meeting.png" alt-text="meeting-extension" link="#meeting-extensions" border="false"::: + :::image type="content" source="../../../../assets/icons/meeting.png" alt-text="meeting-extension" link="#meeting-extensions"::: :::column-end::: :::row-end::: :::row::: :::column span="":::- :::image type="content" source="../../../../assets/icons/empty.png" alt-text="empty-2" border="false"::: + :::image type="content" source="../../../../assets/icons/empty.png" alt-text="empty-2"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/notifications.png" alt-text="teams-notification" link="#notifications" border="false"::: + :::image type="content" source="../../../../assets/icons/notifications.png" alt-text="teams-notification" link="#notifications"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/microsoft-365.png" alt-text="microsoft" link="#microsoft-365-app-compliance-program" border="false"::: + :::image type="content" source="../../../../assets/icons/microsoft-365.png" alt-text="microsoft" link="#microsoft-365-app-compliance-program"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/advertising.png" alt-text="advertising-teams" link="#advertising" border="false"::: + :::image type="content" source="../../../../assets/icons/advertising.png" alt-text="advertising-teams" link="#advertising"::: :::column-end::: :::column span="":::- :::image type="content" source="../../../../assets/icons/empty.png" alt-text="empty-1" border="false"::: + :::image type="content" source="../../../../assets/icons/empty.png" alt-text="empty-1"::: :::column-end::: :::row-end::: ## Value proposition ### App name [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> An app's name plays a critical role in how users discover it in the store. Use t [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> Your app must enable group collaboration, improve an individual's productivity, [*Mandatory Fix*] Apps must focus on the Teams experience and not include the names, icons, or imagery of other similar chat-based collaboration platforms or services within the app content or in the appΓÇÖs metadata unless the app provides specific interoperability. App feature names in buttons and other UI text must not duplicate with terminolo [*Mandatory Fix*] For more information on how to implement app authentication, see [authentication in Teams](~/concepts/authentication/authentication.md). <br></br> If your app authenticates users with an external service, follow these guideline ## Security ### Financial information [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> Apps running on the iOS or Android version of Teams must adhere to the following [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> Bots must always ask permission to upload a file and display a confirmation mess [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> App must warn users before downloading any files or executables (.exe) into the ## General functionality and performance ### Launching external functionality If your app supports localization, your app package must include a file with lan ## Apps linked to SaaS offer <br></br> <details><summary>General</summary> If setup of your app for testing purposes is complex, provide an end-to-end func ## Tabs If your app includes a tab, ensure it adheres to these guidelines. > [!TIP] > For more information on creating a high-quality app experience, see [Teams tab design guidelines](~/tabs/design/tabs.md). If your app includes a tab, ensure it adheres to these guidelines. * For the best first run experience, authenticate your users during the tab setup and not after. Authentication can happen outside the tab configuration window. [*Suggested Fix*] -* The user must not leave the tab configuration experience inside Teams to create content outside of Teams, and then return to Teams to pin it. Tab configuration screen must explain the value of configuration and how to configure. [*Mandatory Fix*] +* The user must not leave the tab configuration experience inside Teams to create content outside of Teams and then return to Teams to pin it. Tab configuration screen must explain the value of configuration and how to configure. [*Mandatory Fix*] :::image type="content" source="../../../../assets/images/submission/validation-tabs-setup-profile-name.png" alt-text="validation-tabs-set-up-profile-name"::: Design your app with [basic](~/concepts/design/design-teams-app-basic-ui-compone ## Bots If your app includes a bot, ensure it adheres to these guidelines. Apps that provide only notifications with content such as **You have a new notif ## Message extensions If your app includes a message extension, ensure it adheres to these guidelines. Link unfurling only apps don't provide significant value within Teams. Consider [*Mandatory Fix*] <br></br> <details><summary>Expand to know more</summary> For more information, see [Teams task module design guidelines](~\task-modules-a ## Meeting extensions > [!TIP] > For more information on creating a high-quality app experience, see the [Teams meeting extension design guidelines](~/apps-in-teams-meetings/design/designing-apps-in-meetings.md). Use the following guidelines for meeting extensions: ## Notifications If your app uses the [activity feed APIs provided by Microsoft Graph](/graph/teams-send-activityfeednotifications), ensure it adheres to the following guidelines. <br></br> If your app uses the [activity feed APIs provided by Microsoft Graph](/graph/tea ## Microsoft 365 App Compliance Program <br></br> <details><summary>Expand to know more</summary> The Microsoft 365 App Compliance Program is intended to help organizations asses * **Publisher Attestation**: A process in which you share general, data handling, and security and compliance information to help potential customers make informed decisions about using your app. </details> ## Advertising Apps must not display advertising, including dynamic ads, banner ads, and ads in message. |
| platform | Resolve Submission Issues | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/resolve-submission-issues.md | -# Resolve issues if your Microsoft Teams store submission fails +# Resolve issues if your Teams store submission fails Apps published to the Microsoft Teams store must meet the [Teams store validation guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) and [commercial marketplace policies](/legal/marketplace/certification-policies). |
| platform | Activity Feed Notifications | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/activity-feed-notifications.md | The activity feed is a surface for users to access their notifications in Micros # [Mobile](#tab/mobile) # [Desktop](#tab/desktop) ## Anatomy |Counter|Description| |-|--| The activity feed is a surface for users to access their notifications in Micros The following variants show the kinds of activity feed notification cards you can display. The app logo replaces the user avatar for app-generated notifications. ## Manage activity feed notifications Each activity generates a system notification. What displays depends on what the # [Mobile](#tab/mobile) |Counter|Description| |-|--| Each activity generates a system notification. What displays depends on what the # [Desktop](#tab/desktop) |Counter|Description| |-|--| |
| platform | App Structure | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/app-structure.md | Personal apps provide a large canvas to host your app content for individual use The canvas is a webview so you can completely customize the experience. ### Desktop The canvas is an iframe so you can completely customize the experience. ## Tabs Tabs provide a large canvas to host your app content for a group of users. You c The canvas is a webview so you can completely customize the experience. ### Desktop The canvas is an iframe so you can completely customize the experience. ## Bots Bots are conversational apps that integrate with Teams native messaging features ### Mobile ### Desktop ## Message extensions Message extensions are shortcuts for inserting app content or acting on a messag ### Mobile ### Desktop ## Meeting extensions Meeting extensions are apps to enhance live meetings. You can host your app cont The surface is a webview, allowing you to customize the experience, but keep in mind that during meetings these apps use dark theme. ### Desktop The surface is an iframe, allowing you to customize the experience, but keep in mind that during meetings these apps use dark theme and are narrow. |
| platform | Design Teams App Advanced Ui Components | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-advanced-ui-components.md | Breadcrumbs are a navigational aid that convey your appΓÇÖs hierarchy. They help ### Mobile ### Desktop ## Left nav Use the left nav to browse multiple pages within your Teams tab. In the followin ### Mobile ### Desktop ## Notification bar You can implement a notification bar using the Fluent UI [alert](https://fluents ### Top use cases -* Critical messages, errors, and warnings. +* Critical messages, errors, and warnings * Success messages * Informational or promotional messages ### Mobile ### Desktop ## Stage view See how to implement [stage view](~/tabs/tabs-link-unfurling.md). ### Top use cases -* Display content in a large surface within Teams instead of another app or browser. +* Display content in a large surface within Teams instead of another app or browser * Spotlight media or other rich content ### Mobile Your app can launch a stage from an Adaptive Card, shared link, or visual components (such as a chart). ### Desktop ## Toolbar A toolbar is a container for grouping a set of controls. ### Mobile ### Desktop |
| platform | Design Teams App Basic Ui Components | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-basic-ui-components.md | Based on <a href="https://fluentsite.z22.web.core.windows.net/" target="_blank"> ## Alert ## Button ## Breadcrumb ## Card ## Carousel ## Checkbox ## Coachmark ## Contextual menu ## Dialog ## Dropdown ## Group list ## Hyperlink ## Input ## Key value pair ## Paragraph ## Picker ## Pivot ## Progress indicator ## Radio ## Scrollbar ## Search box ## Side panel ## Status label ## Toast ## Toggle Note: In Fluent UI, toggle is a type of checkbox. ## Tooltip ## Other resources |
| platform | Design Teams App Fundamentals | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-fundamentals.md | Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1":::- :::image type="content" source="../../assets/images/design-guidelines/teams-layout.png" alt-text="Conceptual image of Teams layout." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-layout.png" alt-text="Conceptual image of Teams layout."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1"::: - :::image type="content" source="../../assets/images/design-guidelines/teams-avatars.png" alt-text="Conceptual image of Teams avatars." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-avatars.png" alt-text="Conceptual image of Teams avatars."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1"::: - :::image type="content" source="../../assets/images/design-guidelines/teams-iconography.png" alt-text="Conceptual image of Teams icons." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-iconography.png" alt-text="Conceptual image of Teams icons."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1"::: - :::image type="content" source="../../assets/images/design-guidelines/teams-typography.png" alt-text="Conceptual image of Teams typography." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-typography.png" alt-text="Conceptual image of Teams typography."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1":::- :::image type="content" source="../../assets/images/design-guidelines/teams-color.png" alt-text="Concept image of Teams colors." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-color.png" alt-text="Concept image of Teams colors."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1"::: - :::image type="content" source="../../assets/images/design-guidelines/shape-and-elevation.png" alt-text="Conceptual of shape and elevation." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/shape-and-elevation.png" alt-text="Conceptual of shape and elevation."::: :::column-end::: :::row-end::: Quickly learn about the fundamentals of Teams app design. You can find comprehen :::column-end::: :::column span="1"::: - :::image type="content" source="../../assets/images/design-guidelines/teams-copy-and-content.png" alt-text="Conceptual image of copy and content." border="false"::: + :::image type="content" source="../../assets/images/design-guidelines/teams-copy-and-content.png" alt-text="Conceptual image of copy and content."::: :::column-end::: :::row-end::: |
| platform | Design Teams App Process | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-process.md | |
| platform | Design Teams App Ui Templates | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-ui-templates.md | In Teams, a calendar is where a user views, schedules, and manages upcoming and ### Top use cases * Schedule meetings and events-* Get reminders of upcoming meetings and events. +* Get reminders of upcoming meetings and events * View schedules ### Desktop ## Dashboard A dashboard displays different types of content in a central location (such as a * Analyze data * Report metrics-* Organize different information in one place. +* Organize different information in one place ### Mobile ### Desktop ## Data visualization You can use different card sizes (single, double, and full) to stack and organiz ### Top use cases -* Display complex information. -* Create a dashboard. +* Display complex information +* Create a dashboard ### Mobile ### Desktop ## Empty state The empty state template can be used for many scenarios, including sign in, firs ### Top use cases * Sign in-* Welcome messages and first-run experiences. +* Welcome messages and first-run experiences * Success messages * Error messages ### Mobile ### Desktop ## Filter Organizing content in: * Dashboards * Data visualization ## Form Forms are used to collect, validate, and submit user input in a structured way. ### Mobile ### Desktop ## List You can use a list to display related items in a scannable format and allow user ### Mobile ### Desktop ## Sign in You can design app sign-in flows for different Teams contexts and identity provi ### Mobile ### Desktop ## Settings Settings screens are where users can configure their preferences with your app. * Manage app features ## Task board A task board, sometimes called a kanban board or swim lanes, is a collection of ### Mobile ### Desktop ## Wizard A wizard guides a user through several screens to complete a task (such as a set ### Mobile ### Desktop ## See also |
| platform | Enable App Customization | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/enable-app-customization.md | You can allow customers to customize some aspects of your Microsoft Teams app in Some possible examples of this feature include: * Changing the app's accent color to match an org's brand.-* Updating the app name from *Contoso* to *Contoso Agent*, which is the name users in the org will see. +* Updating the app name from *Contoso* to *Contoso Agent*, which is the name users in the org will see. (Note: Users adding a connector to a chat or a channel will still see the original app name, *Contoso*.) You can enable this feature in the [Developer Portal for Teams](https://dev.teams.microsoft.com/home). This configures `configurableProperties`, which isn't available in versions before 1.10 of the Teams app manifest. To enhance Teams app experience, you can hide an app from users by default until > [!NOTE] > Teams store has evolved:-> +> > Previously, the LOB apps were updated by selecting the ellipses on the tile. With the updated Teams store experience, you can now update the LOB apps by logging in to the [Teams Admin Centre](https://admin.teams.microsoft.com). To hide the app, in the app manifest file, set the `defaultBlockUntilAdminAction` property to `true`. When the property is set to `true`, in Teams admin center > **Manage apps**, **Blocked by publisher** appears in app's **Status**: If by default, you don't want the app to be hidden, you can update the `defaultB ## See also * [App manifest schema](/microsoftteams/platform/resources/schema/manifest-schema)-* [Customize apps in the Teams admin center](/MicrosoftTeams/customize-apps) +* [Customize apps in the Teams admin center](/MicrosoftTeams/customize-apps) |
| platform | Personal Apps | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/personal-apps.md | You can find comprehensive personal app design guidelines, including elements th Users can add a personal app from the Teams store or app flyout by selecting the **More** icon on the left side of Teams (shown in the following example). ## Use a personal app (private workspace) With a private workspace, users can view app content that's meaningful to them i #### Mobile |Counter|Description| |-|--| With a private workspace, users can view app content that's meaningful to them i |C|**More menu**: Includes additional app options and information.| |D|**Primary navigation**: Provides navigation to your app other main Teams features.| |Counter|Description| |-|--| With a private workspace, users can view app content that's meaningful to them i #### Desktop |Counter|Description| |-|--| With a private workspace, users can view app content that's meaningful to them i |C|**Popout view**: Pushes your app content from a parent window to a standalone child window.| |D|**More menu**: Includes additional app options and information. (You could alternatively make **Settings** a tab.)| |Counter|Description| |-|--| Personal apps can include a bot for one-on-one conversations and private notific #### Mobile |Counter|Description| |-|--| Personal apps can include a bot for one-on-one conversations and private notific #### Desktop |Counter|Description| |-|--| Personal apps can include a bot for one-on-one conversations and private notific On the left side of Teams, users can right-click the personal app to pin, remove, and configure other app options. ## Best practices Use these recommendations to create a quality app experience. With responsive sizing, tabs on the right may become truncated or out of view. #### DonΓÇÖt: Lead with secondary content or metadata Like a standard web app, tab navigation should progress in an order that helps make sense of your appΓÇÖs primary features. ### Tab hierarchy Like a standard web app, tab navigation should progress in an order that helps m Your tabs should categorize your appΓÇÖs primary features and content. With responsive sizing, content on the right may become truncated or out of view. #### Don't: Include different levels of hierarchy Your content should progress in a logical order that helps users make sense of it. If you have two tabs that are closely related, consider combining them into one tab. ### First-run experience Your content should progress in a logical order that helps users make sense of i There should be at least a welcome screen the first time you use a personal app. For bots, describe what your bot can do and provide quick actions, such as a sign-in button. #### Don't: Start with a blank screen Users might be confused if nothing displays the first time they run your app. ### Personalized content Users might be confused if nothing displays the first time they run your app. Whether it's a personal tab or bot, display content related to only a user's activity in your app. #### DonΓÇÖt: Show unrelated or overly broad content In personal contexts, donΓÇÖt display content for teams a user isn't part of. Personal bot content should focus on the individualΓÇönot a group. ### Complex app features In personal contexts, donΓÇÖt display content for teams a user isn't part of. Pe Your app should focus on core tasks in Teams, but you can still view the full, standalone app in a browser. #### DonΓÇÖt: Include your entire app Unless you created your app specifically for Teams, you probably have features that donΓÇÖt make sense in a collaboration tool. ## See also |
| platform | Plan To Monetize | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/plan-to-monetize.md | Consider publishing your app on Teams store to offer your app the best platform :::row::: :::column span=""::: - :::image type="content" source="../../assets/images/app-fundamentals/monetize-apps.png" alt-text="Monetize apps" border="false"::: + :::image type="content" source="../../assets/images/app-fundamentals/monetize-apps.png" alt-text="Monetize apps"::: :::column-end::: :::column span=""::: The most common ways to monetize your app are: |
| platform | Understand Use Cases | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/understand-use-cases.md | A [personal app](../../concepts/design/personal-apps.md) is a dedicated space or :::column span=""::: :::column-end::: Display your web-based content in a [tab](../../tabs/what-are-tabs.md) where peo :::column span=""::: :::column-end::: Conversations often result in the need to do something (generate an order, revie :::column span=""::: :::column-end::: With [message extensions](../../messaging-extensions/what-are-messaging-extensio :::column span=""::: :::column-end::: :::row-end::: There are a few options for [incorporating your app into the Teams calling exper :::column span=""::: :::column-end::: :::row-end::: There are a few options for [incorporating your app into the Teams calling exper :::column span=""::: :::column-end::: :::row-end::: The [Microsoft Graph API for Teams](/graph/teams-concept-overview) provides acce :::column span=""::: :::column-end::: :::row-end::: |
| platform | Native Device Permissions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/native-device-permissions.md | You must request the device permissions to access native device capabilities. Th You must request the device permissions to access native device capabilities. The device permissions work similarly for all app constructs, such as tabs, task modules, or message extensions. The user must go to the permissions page in Teams settings to manage device permissions. By accessing the device capabilities, you can build richer experiences on the Teams platform, such as: -* Capture and view images. -* Scan QR or barcode. -* Record and share short videos. -* Record audio memos and save them for later use. -* Use the location information of the user to display relevant information. +* Capture and view images +* Scan QR or barcode +* Record and share short videos +* Record audio memos and save them for later use +* Use the location information of the user to display relevant information > [!NOTE] > |
| platform | Feedback | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/feedback.md | Use **Azure Admin Center** or **Microsoft 365 Admin Center** for any **business- | **Product support** | **Contact** | |:|:|-| **Microsoft Teams product issues and failures** | If you have a Premier support contract for :::image type="icon" source="assets/icons/microsoft-icon.png" border="false"::: Microsoft 365, visit the Microsoft 365 Admin Center and use the Support menu to [open a service request](https://admin.microsoft.com/). | +| **Microsoft Teams product issues and failures** | If you have a Premier support contract for :::image type="icon" source="assets/icons/microsoft-icon.png"::: Microsoft 365, visit the Microsoft 365 Admin Center and use the Support menu to [open a service request](https://admin.microsoft.com/). | | **Azure help and support** | If you have a paid Azure subscription, visit the Azure Admin Center to [open a ticket](https://ms.portal.azure.com/#blade/Microsoft_Azure_Support/HelpAndSupportBlade/newsupportreq). |-| **General questions about Teams** | If you have general questions on Teams, submit your questions on :::image type="icon" source="assets/icons/microsoft-icon.png" border="false"::: [Microsoft Teams Community](https://answers.microsoft.com/msteams/forum).| +| **General questions about Teams** | If you have general questions on Teams, submit your questions on :::image type="icon" source="assets/icons/microsoft-icon.png"::: [Microsoft Teams Community](https://answers.microsoft.com/msteams/forum).| ## Developer community help Post your questions and help other community members by sharing and responding t | **Community channel**| **Contact** | |:|:|-|**Community help** | <ul> <li>:::image type="icon" source="assets/icons/stack-overflow-icon.png" border="false"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams): Use the `microsoft-teams` tag to post questions. Follow the Stack Overflow guidelines, such as providing a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. If you are a new user, see [Stack Overflow Help Center](https://stackoverflow.com/help).</li> <li>:::image type="icon" source="assets/icons/microsoft-icon.png" border="false"::: [Microsoft Q&A](/answers/topics/office-teams-app-dev.html): We love Stack Overflow and provide extensive support to questions posted on Stack Overflow. Use the `office-teams-app-dev` tag to post questions. Stack Overflow has criteria about appropriate questions and [Microsoft Q&A](/answers/topics/office-teams-app-dev.html) has an open policy regarding this. </li><ul> | -| **Community chat group** | Use the informal community chat room for :::image type="icon" source="assets/icons/Teams-icon.png" border="false":::[Microsoft Teams app developers](https://gitter.im/OfficeDev/MicrosoftTeamsAppDev). Select **SIGN IN TO START TALKING**, if signing in for the first time. Select **JOIN ROOM**, if already logged in. | +|**Community help** | <ul> <li>:::image type="icon" source="assets/icons/stack-overflow-icon.png"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams): Use the `microsoft-teams` tag to post questions. Follow the Stack Overflow guidelines, such as providing a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. If you are a new user, see [Stack Overflow Help Center](https://stackoverflow.com/help).</li> <li>:::image type="icon" source="assets/icons/microsoft-icon.png"::: [Microsoft Q&A](/answers/topics/office-teams-app-dev.html): We love Stack Overflow and provide extensive support to questions posted on Stack Overflow. Use the `office-teams-app-dev` tag to post questions. Stack Overflow has criteria about appropriate questions and [Microsoft Q&A](/answers/topics/office-teams-app-dev.html) has an open policy regarding this. </li><ul> | +| **Community chat group** | Use the informal community chat room for :::image type="icon" source="assets/icons/Teams-icon.png":::[Microsoft Teams app developers](https://gitter.im/OfficeDev/MicrosoftTeamsAppDev). Select **SIGN IN TO START TALKING**, if signing in for the first time. Select **JOIN ROOM**, if already logged in. | ### Report issues Submit issues and ask general questions related to SDK and samples using the com |:-|:| | **Platform outages** | Check if your issue is already raised on [Teams platform outages](https://aka.ms/TeamsPlatform/Outages) before you raise one. | | **Samples** | Submit issues with samples to respective [Microsoft Teams Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples) repository.|-| **Teams Toolkit or TeamsFx SDK and CLI issues** | <ul><li> :::image type="icon" source="assets/icons/GitHub-icon.png" border="false"::: [GitHub Issues](https://github.com/OfficeDev/TeamsFx/issues): Create new issues on the [TeamsFx (Microsoft Teams Framework) GitHub repository](https://github.com/OfficeDev/TeamsFx) to report issues or raise feature request. We recommend using GitHub issues for queries and to receive community help. <li> :::image type="icon" source="assets/icons/stack-overflow-icon.png" border="false"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/teams-toolkit): Use the `teams-toolkit` tag to post questions. Follow the Stack Overflow guidelines such as provide a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. </li> </ul> | +| **Teams Toolkit or TeamsFx SDK and CLI issues** | <ul><li> :::image type="icon" source="assets/icons/GitHub-icon.png"::: [GitHub Issues](https://github.com/OfficeDev/TeamsFx/issues): Create new issues on the [TeamsFx (Microsoft Teams Framework) GitHub repository](https://github.com/OfficeDev/TeamsFx) to report issues or raise feature request. We recommend using GitHub issues for queries and to receive community help. <li> :::image type="icon" source="assets/icons/stack-overflow-icon.png"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/teams-toolkit): Use the `teams-toolkit` tag to post questions. Follow the Stack Overflow guidelines such as provide a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. </li> </ul> | | **Bot and Message extension SDK issues or suggestions** | Submit issues and feature requests to the SDK repository for your bot's language ([C#](https://github.com/Microsoft/botbuilder-dotnet/), [JavaScript](https://github.com/Microsoft/botbuilder-js), or [Python](https://github.com/Microsoft/botbuilder-python)). Post How-to questions at [Stack Overflow](https://stackoverflow.com/questions/tagged/botframework%20microsoft-teams) using the `botframework` and `microsoft-teams` tag. | | **Tab SDK issues or suggestions** | Submit issues and feature requests to the SDK repository for [Microsoft Teams JavaScript Library](https://github.com/OfficeDev/microsoft-teams-library-js/issues). Use the `microsoft-teams` tag to post how-to questions about the SDK at [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams). | | **Live Share SDK issues or suggestions** | Submit issues and feature requests to the SDK repository for [Live Share SDK](https://github.com/microsoft/live-share-sdk). Use the `live-share` and `microsoft-teams` tag to post how-to questions about the SDK at [Stack Overflow](https://stackoverflow.com/questions/tagged/live-share+microsoft-teams). | Submit documentation feedback or updates using the community help channels. | **Community channel** | **Contact** | |:--|:--| | **Documentation issues** | Select **This page** in the **Submit and view feedback** section available at the footer of the documentation, to open an [issue](https://github.com/MicrosoftDocs/msteams-docs/issues) on the [Microsoft Teams documentation GitHub](https://github.com/MicrosoftDocs/msteams-docs) repository.<br/>:::image type="content" source="assets/images/community-feedback-this-page.png" alt-text="This page feedback":::|-|**Documentation updates**|Select **Edit** at the top right of the article you want to update, and submit a pull request to the :::image type="icon" source="assets/icons/GitHub-icon.png" border="false"::: [Microsoft Teams documentation GitHub](https://github.com/MicrosoftDocs/msteams-docs) repository. <br /> :::image type="content" source="assets/images/community-feedback-edit.png" alt-text="edit option":::| +|**Documentation updates**|Select **Edit** at the top right of the article you want to update, and submit a pull request to the :::image type="icon" source="assets/icons/GitHub-icon.png"::: [Microsoft Teams documentation GitHub](https://github.com/MicrosoftDocs/msteams-docs) repository. <br /> :::image type="content" source="assets/images/community-feedback-edit.png" alt-text="edit option":::| ### Feature request and general help Suggest a feature or vote up existing feature requests. | **Community channel** | **Contact** | |:-|:|-| **Features suggestions** | Post feature suggestions on :::image type="icon" source="assets/icons/Teams-icon.png" border="false"::: [Microsoft Teams feedback portal](https://feedbackportal.microsoft.com/feedback/forum/ad198462-1c1c-ec11-b6e7-0022481f8472). | +| **Features suggestions** | Post feature suggestions on :::image type="icon" source="assets/icons/Teams-icon.png"::: [Microsoft Teams feedback portal](https://feedbackportal.microsoft.com/feedback/forum/ad198462-1c1c-ec11-b6e7-0022481f8472). | | **General questions** | Send general questions about the Microsoft Teams developer platform to [Microsoft Teams Community Help](mailto:microsoftteamsdev@microsoft.com). We encourage posting questions on the channels mentioned here and using email only if no other mode of communication is applicable. | ## See also |
| platform | Deploy Csharp App Studio | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/deploy-csharp-app-studio.md | After entering the details of your app, complete the following steps to register 1. Use **Preview** of Developer Portal to install your app in Teams. - :::image type="content" source="../assets/images/teams-toolkit-v2/preview-in-teams.png" alt-text="Image showing Preview button" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/preview-in-teams.png" alt-text="Image showing Preview button"::: 1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension. 1. Select **Publish to store** under **Publish** in the left-hand pane of Developer Portal: - :::image type="content" source="../assets/images/teams-toolkit-v2/devp-publish-left-pane.png" alt-text="Image showing Publish option in left pane" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/devp-publish-left-pane.png" alt-text="Image showing Publish option in left pane"::: > [!NOTE] > If you are unable to sideload the app, verify whether you have [enabled custom app uploading](../get-started/get-started-dotnet-app-studio.md#enable-sideloading-option). The sample app requires the environment variables to be set to the values that y 1. Open the Solution Explorer. - :::image type="content" source="../assets/images/get-started/csharp-repo-cloned.png" alt-text="Sample repo for c# Teams app" border="false"::: + :::image type="content" source="../assets/images/get-started/csharp-repo-cloned.png" alt-text="Sample repo for c# Teams app"::: 1. Open the `appsettings.json` file. - :::image type="content" source="../assets/images/teams-toolkit-v2/csharp-appsetting-json.png" alt-text="Image showing appsettings.json file" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/csharp-appsetting-json.png" alt-text="Image showing appsettings.json file"::: 1. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file. 1. Update the **MicrosoftAppPassword** with the bot password that you saved. - :::image type="content" source="../assets/images/get-started/get-started-net-azure-add-keys.png" alt-text="Image showing adding Azure keys" border="false"::: + :::image type="content" source="../assets/images/get-started/get-started-net-azure-add-keys.png" alt-text="Image showing adding Azure keys"::: After making these changes, rebuild the app. If you're using ngrok, you can run the app locally, and if you've hosted it in Azure, redeploy the app. |
| platform | Get Started Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/get-started-overview.md | Depending on the capabilities you want for your app, choose an appropriate devel If you are already familiar with Yeoman workflow, you may prefer using [YoTeams Yeoman Generator](https://github.com/pnp/generator-teams/blob/master/docs/docs/tutorials/build-your-first-microsoft-teams-app.md) to build your apps. > [!WARNING]-> If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. <br> App studio will be deprecated by August 01, 2022. +> If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. <br> App studio will be deprecated by June 30, 2022. ## Build your first Teams app Now, let's build your first Teams app. But first, pick your language (or framewo > [!div class="nextstepaction"] > [Build a Teams tab app with JavaScript using React](../sbs-gs-javascript.yml) > [!div class="nextstepaction"]-> [Build a Teams bot app with JavaScript using React](../sbs-gs-bot.yml) +> [Build a Teams bot app with JavaScript](../sbs-gs-bot.yml) > [!div class="nextstepaction"] > [Build a Teams message extension app with JavaScript using React](../sbs-gs-msgext.yml) > [!div class="nextstepaction"] Now, let's build your first Teams app. But first, pick your language (or framewo ## See also -- [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples#microsoft-teams-samples)-- [Git and GitHub resources](/contribute/additional-resources)+* [Microsoft Teams samples](https://github.com/OfficeDev/Microsoft-Teams-Samples#microsoft-teams-samples) +* [Git and GitHub resources](/contribute/additional-resources) |
| platform | Graph Proactive Bots And Messages | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md | -# Proactive installation of apps using Graph API to send messages +# Send proactive installation messages  ## Proactive messaging in Teams |
| platform | Azure Provisioning Instructions Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions-tab.md | Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool 1. Select **Provision in the Cloud**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands" border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands"::: 1. Select a subscription to use for the Azure resources. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning" border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning"::: > [!NOTE] > There are always some Azure resources used for hosting your app. Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice: - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsg.png" alt-text="Screenshot showing the provisioning complete dialog." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsg.png" alt-text="Screenshot showing the provisioning complete dialog."::: If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources. The provisioned resource appears in the **Environment** section. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot showing the provisioning complete dialog." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot showing the provisioning complete dialog."::: 1. Select **Deploy to the Cloud** from the **Deployment** panel after provisioning is complete. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud."::: As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice. Once the provisioning and deployment steps are complete: 1. Select **Launch Remote (Edge)** from the launch configuration drop-down. 1. Select the **Start debugging (F5)** to launch your app from Azure. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot showing the launch app remotely." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot showing the launch app remotely."::: 1. Select **Add** when prompted to sideload the app onto Teams. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/remote-app-client.png" alt-text="Screenshot showing the app being installed." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/remote-app-client.png" alt-text="Screenshot showing the app being installed."::: Congratulations, your first tab app is running in your Azure environment! |
| platform | Azure Provisioning Instructions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions.md | Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool 1. Select **Provision in the Cloud**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands" border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot showing the provisioning commands"::: 1. Select a subscription to use for the Azure resources. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning" border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot showing resources for provisioning"::: > [!NOTE] > There are always some Azure resources used for hosting your app. Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-tool The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice: - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot showing the provisioning complete dialog." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot showing the provisioning complete dialog."::: If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources. The provisioned resource appears in the **Environment** section. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot showing the provisioning complete dialog." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot showing the provisioning complete dialog."::: 1. Select **Deploy to the Cloud** from the **Deployment** panel after provisioning is complete. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot showing where to click to deploy to cloud."::: As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice. Once the provisioning and deployment steps are complete: 1. Select **Launch Remote (Edge)** from the launch configuration drop-down. 1. Select the **Start debugging (F5)** to launch your app from Azure. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot showing the launch app remotely." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot showing the launch app remotely."::: 1. Select **Add**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/add-mex-app.png" alt-text="Screenshot showing the app being installed." border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/add-mex-app.png" alt-text="Screenshot showing the app being installed."::: The toolkit displays a message to indicate that the app is added to Teams. Once the provisioning and deployment steps are complete: The Message Extension app is loaded in a chat bot app. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/app-added-mex1.png" alt-text="Screenshot that shows app sideloaded in Teams" border="false"::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/app-added-mex1.png" alt-text="Screenshot that shows app sideloaded in Teams"::: |
| platform | Get Started Use App Studio | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/get-started-use-app-studio.md | Complete the following steps to update the app package: <img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/> + The sample comes with its own manifest and is designed to build an app package when the project is built. On .NET, the manifest.json file can be located in Visual Studio in Manifest under ```Microsoft.Teams.Samples.HelloWorld.Web```. On Node.js, this is done by typing `gulp` at the command line in the root directory of the project. In Visual Studio, the manifest.json file is located in under **Manifest** in `Microsoft.Teams.Samples.HelloWorld.Web`. This step is described by the following image: -+ <img width="450px" alt="Build the app package on .NET with Visual Studio" src="~/assets/images/get-started/app-package-on-.NET-with-Visual-Studio.png"/>-+ You can build the app package on Node.js by typing `gulp` at the command line in the root directory of the project. + ```bash $ gulp [13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js The bot that was imported from the sample doesn't have an associated App ID. You Complete the following steps to setup your bot: -1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show. +1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show. 1. Select **Setup** to display the **Set up a bot** dialog box. <img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/> 1. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.-1. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list. +1. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list. 1. Now open a text file in notepad and copy and paste your new bot ID into it. 1. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID. 1. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app. Complete the following steps to setup your message extension: After entering the details of your app, complete the following steps to register your app in Teams: -1. Use **Test and distribute** of App Studio to install your app in Teams. -1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and message extension. +1. Use **Test and distribute** of App Studio to install your app in Teams. +1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and message extension. 1. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio: <img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/> After entering the details of your app, complete the following steps to register 1. To upload your app to Teams, select the **Install** button under **Test and Distribute**: <img width="450px" alt="Adding a message extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>-+ > [!NOTE] > If you are unable to sideload the app, verify whether you have [enabled custom app uploading](../../get-started/get-started-dotnet-app-studio.md#enable-sideloading-option). |
| platform | Dotnet Ngrok Intro | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/tabs/dotnet-ngrok-intro.md | Microsoft Teams is a cloud-based product and requires that your tab content available from the cloud using HTTPS endpoints. Teams doesn't allow local hosting. You must either publish your tab to a public URL, or use a proxy that exposes your local port to an internet-facing URL. -To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it. +To test your tab, use [ngrok](https://ngrok.com/docs). Your server's web endpoints are available while ngrok is running on your computer. In the free version of ngrok, if you close ngrok, the URLs are different the next time you start it. |
| platform | Messaging Extension Design | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/design/messaging-extension-design.md | The following examples show how to add a message extension in a channel. ### Mobile ### Desktop ## Set up a message extension For consistency across Teams apps, you can't customize the sign-in screen. If yo ### Mobile ### Desktop ## Types of message extensions With search commands, people can use your message extension to quickly find exte #### Mobile #### Desktop #### Compose box layout options You have some options for displaying message extension search results, including [list and grid views](../../messaging-extensions/how-to/search-commands/respond-to-search.md#respond-to-user-requests). ### Action commands Once added, users can open your message extension by selecting your app icon bel #### Mobile #### Desktop ### From a chat message or channel post Once added, users can select the **More** :::image type="icon" source="../../ass #### Chat message #### Channel post ## Use a message extension The following scenarios show the primary ways people use message extensions. #### Mobile #### Desktop **2. Insert content**. Once posted, others can reply or select the content to see more information in your app. #### Mobile #### Desktop ### Take action on a message **1. Select a message extension**. Your app can include one or more action commands. **2. Complete the action**. Your app can receive and process any content or data sent by the message action. Users complete the action in your app while remaining in their conversation. ### Preview links Message extensions also allow you to insert rich links from a recognized URL int #### Mobile #### Desktop **2. Insert content**. If your app recognizes the URL in the compose box, it renders the link as a card that provides a content-rich preview of the web content. (See [Adaptive Cards design guidelines](../../task-modules-and-cards/cards/design-effective-cards.md) for more information.) #### Mobile #### Desktop ## Manage a message extension The following examples show a message extension opened from the compose box. #### Mobile |Counter|Description| |-|--| The following examples show a message extension opened from the compose box. #### Desktop |Counter|Description| |-|--| The following examples show a message extension opened from the compose box. ### Message extension management menu |Counter|Description| |-|--| Use these recommendations to create a quality app experience. :::row::: :::column span=""::: #### Do: Integrate with single-sign on SSO makes the sign-in process easier, faster, and secure. Also, if a user has al :::column-end::: :::column span=""::: #### Don't: Take users away from the conversation Message extensions aren't always easy to find. Include screenshots of how to use :::row::: :::column span=""::: #### Do: Let Teams handle some of the design work if possible If it makes sense for your use cases, consider creating a search-based message e :::column-end::: :::column span=""::: #### Don't: Embed your entire app in a task module If your message extension requires action commands, keep the task module simple :::row::: :::column span=""::: #### Do: Take advantage of Teams color tokens Each Teams theme has its own color scheme. To handle theme changes automatically :::column-end::: :::column span=""::: #### Don't: Hard code color values If you don't use Teams color tokens, your designs will be less scalable and take :::row::: :::column span=""::: #### Do: Include action commands that make sense in context Message actions should relate to what a user is looking at. For example, provide :::column-end::: :::column span=""::: #### Don't: Include actions commands that aren't contextual |
| platform | Create Task Module | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/action-commands/create-task-module.md | Title: Create and send the task module + Title: Create and send task module description: In this module, learn how to handle the initial invoke action and respond with a task module from an action messaging extension command ms.localizationpriority: medium -# Create and send the task module +# Create and send task module [!include[v4-to-v3-SDK-pointer](~/includes/v4-to-v3-pointer-me.md)] private static Attachment GetAdaptiveCardAttachmentFromFile(string fileName) ## Code sample -| Sample Name | Description | .NET | Node.js | +| Sample Name | Description | .NET | Node.js | Python | |:|:--|:|:--|-|Teams message extension action| Describes how to define action commands, create task module, and respond to task module submit action. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/51.teams-messaging-extensions-action)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/51.teams-messaging-extensions-action) | -|Teams message extension search | Describes how to define search commands and respond to searches. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/50.teams-messaging-extensions-search)| +|Teams message extension action| Describes how to define action commands, create task module, and respond to task module submit action. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/51.teams-messaging-extensions-action)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/51.teams-messaging-extensions-action) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/51.teams-messaging-extensions-action) | +|Teams message extension search | Describes how to define search commands and respond to searches. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/50.teams-messaging-extensions-search)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/50.teams-messaging-extension-search)| ## Next step |
| platform | Define Action Command | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/action-commands/define-action-command.md | Before creating the action command, you must decide the following factors: See the following video to learn how to define message extension action commands: <br> -> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4OANG] +> [!VIDEO <https://www.microsoft.com/en-us/videoplayer/embed/RE4OANG>] <br> ## Select action command invoke locations To add the action command to the app manifest, you must add a new `composeExtens You can create an action command using **App Studio** or **Developer Portal**. > [!WARNING]- > If you have been using App Studio, we recommend that you'd try the Developer Portal [Developer Portal](https://dev.teams.microsoft.com/) to configure, distribute, and manage your Teams apps. App Studio will be deprecated by August 01, 2022. + > If you have been using App Studio, we recommend that you'd try the Developer Portal [Developer Portal](https://dev.teams.microsoft.com/) to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022. # [App Studio](#tab/AS) |
| platform | Enable SSO Auth Me | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/enable-SSO-auth-me.md | -# Single sign-on support for message extensions +# Enable SSO for message extensions Single sign-on (SSO) support is now available for message extensions and link unfurling. Enabling Single sign-on for message extensions by default refreshes the authentication token, which minimizes the number of times you need to enter the sign in credentials for Microsoft Teams. This section provides Bot authentication v3 SDK sample. | **Sample name** | **Description** | **.NET** | **Node.js** | **Python** | ||||-|| | Bot authentication | This sample shows how to get started with authentication in a bot for Teams. | [View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/46.teams-auth) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/46.teams-auth) |-| Tab, Bot and Message Extension (ME) SSO | This sample shows SSO for Tab, Bot and ME - search, action, link unfurl. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | Not available | +| Tab, Bot and Message Extension (ME) SSO | This sample shows SSO for Tab, Bot and ME - search, action, link unfurl. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | NA | +|Tab, Bot, and Message extension| This sample shows how to check authentication in Bot,Tab, and Messaging extention with SSO | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-complete-auth/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-complete-auth/nodejs) | NA | ## See also |
| platform | Link Unfurling | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/link-unfurling.md | ms.localizationpriority: medium -# Link unfurling +# Add link unfurling [!include[v4-to-v3-SDK-pointer](~/includes/v4-to-v3-pointer-me.md)] |
| platform | Define Search Command | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/search-commands/define-search-command.md | Message extension search commands allow users to search external systems and ins See the following video to learn how to define message extension search commands: <br> -> [!VIDEO https://www.microsoft.com/en-us/videoplayer/embed/RE4OIvK] +> [!VIDEO <https://www.microsoft.com/en-us/videoplayer/embed/RE4OIvK>] <br> ## Select search command invoke locations |
| platform | Overview Explore | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-explore.md | Last updated 11/02/2021 With Teams, you can build your app in a feature-rich environment. Using Teams as a platform for building apps, you can extend the Teams capabilities for your desktop and mobile app solutions. Choose the best features for your app. ## Teams app features |
| platform | Overview Solution | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-solution.md | Collate and map requirements to Teams features: | User app needs | Check forecast | Notification before travel | Registered user | | |::|::|::| | **Capability** | Bot | | |-| **Integration** | | | :::image type="icon" source="assets/icons/microsoft-icon.png" border="false"::: Microsoft Graph, Weather API | +| **Integration** | | | :::image type="icon" source="assets/icons/microsoft-icon.png"::: Microsoft Graph, Weather API | | **Scope** | | Personal app | | | **Integration point** | | Chat | | **Teams app solution**: A Teams *personal chat bot* app that checks and *sends forecast notification* to *registered users* before their travel date. Teams offers these and many more capabilities to bring your users a feature-rich app solution. To develop this app: 1. Create a personal chat bot app. 1. Integrate with an external weather forecast API to connect and request forecast for specific date and location.-1. Integrate with :::image type="icon" source="assets/icons/teams-icon.png" border="false"::: Microsoft Graph for registered users. +1. Integrate with :::image type="icon" source="assets/icons/teams-icon.png"::: Microsoft Graph for registered users. 1. Check and send forecast details based on user's travel date and travel location. ## Choose what suits you You can build a Teams app as per your app's requirements. Based on factors, such 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 works for your particular requirements. You can even select a combination. A Teams app brings your users the advantages of a collaborative workspace. As a platform for building apps, Teams offers the full range of apps and toolkits. Teams platform supports you at every stage from planning your app to distributing it. From designing to building and distributing a Teams app, you can use various tools and services. An example development flow can be: 1. Plan your project and figure out the requirement. 1. Design the app. Use Teams UI Kit and UI Library for designing tabs UI. 1. Build the app with JavaScript using Teams Toolkit.-1. Extend functionality by adding more Teams capabilities and M365 data with :::image type="icon" source="assets/icons/microsoft-icon.png" border="false"::: Microsoft Graph. +1. Extend functionality by adding more Teams capabilities and M365 data with :::image type="icon" source="assets/icons/microsoft-icon.png"::: Microsoft Graph. 1. Test the app on a developer tenant with sample user data. 1. Deploy the app to Azure. 1. Manage and publish the apps to Store with Developer Portal. Monetize your app with options, such as SaaS offers, in-app purchases, and more. |
| platform | Overview Story | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-story.md | Learn how apps let you help your users in the Teams environment. Take a look at this scenario: As a developer, you want a way to share important and relevant information to help your users. It's a typical user story. Relatable? But how does Teams fit in to this scenario? LetΓÇÖs dig deeper into this story and find out. :::row::: :::column span="":::- :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-01.png" alt-text="User story - As a developer at a travel agency, I build apps for travelers" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-01.png" alt-text="User story - As a developer at a travel agency, I build apps for travelers"::: :::column-end::: :::column span=""::: #### Understand your user LetΓÇÖs dig deeper into this story and find out. - What issues do you want to address? :::column-end::: :::column span="":::- :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-02.png" alt-text="I want to develop an app that sends weather forecast of the destination to customers..." border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-02.png" alt-text="I want to develop an app that sends weather forecast of the destination to customers..."::: :::column-end::: :::row-end::: :::row::: :::column span="":::- :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-03.png" alt-text="...so that customers can know weather conditions and plan ahead" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-03.png" alt-text="...so that customers can know weather conditions and plan ahead"::: :::column-end::: :::column span=""::: #### List app requirements and benefits LetΓÇÖs dig deeper into this story and find out. - What features would be most convenient for user experience? :::column-end::: :::column span="":::- :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-04.png" alt-text="Customers are well-prepared for traveling!" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/developer-scenario-04.png" alt-text="Customers are well-prepared for traveling!"::: :::column-end::: :::row-end::: |
| platform | Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview.md | Organizations use it to connect with their customers, provide services, and shar Let's look at some areas where an app helps to meet a business need. | **Development Options** | **Business Opportunities** | | | | Here's why Teams is best-suited for your app needs: Teams is a social platform; custom social-focused apps encourage your team to extend your company culture into your collaboration space. Use apps for sending polls, letting people share feedback with each other, enabling connection, and communication. - :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-social.png" alt-text="Teams app for building team culture" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-social.png" alt-text="Teams app for building team culture"::: - **Common business processes** Here's why Teams is best-suited for your app needs: In addition to automating repetitive workflows, you can use apps to help with communication issues. A chat bot is an easy replacement for emails and phone calls to IT or HR departments. - :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-bot.png" alt-text="Teams app for internal use" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-bot.png" alt-text="Teams app for internal use"::: - **Teams Store advantage** Here's why Teams is best-suited for your app needs: If you've got an existing web app, SharePoint site (or SPFx extension), PowerApp, or other web-based application, it may make sense to enable some or all of it in Teams. Extending existing apps and porting interactive functionalities to Teams helps to grow user base and user engagement for your app. - :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-sp.png" alt-text="SharePoint site ported as a Teams tab" border="false"::: + :::image type="content" source="../msteams-platform/assets/images/overview/teams-apps-sp.png" alt-text="SharePoint site ported as a Teams tab"::: - **Personal apps with tabs and bots** |
| platform | Bots Create | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/bot-v3/bots-create.md | For more information, see [Bot Framework Documentation](/azure/bot-service/?view 1. Create the bot using [Bot Framework](https://dev.botframework.com/bots/new). **Be sure to add Microsoft Teams as a channel from the featured channels list after creating your bot.** Feel free to re-use any Microsoft App ID you generated if you've already created your app package/manifest. - :::image type="content" source="../../assets/images/bots/bfregister.png" alt-text="Bot Framework registration page"::: +  > [!NOTE] > If you do not wish to create your bot in Azure, you **must** use this link to create a new bot: [Bot Framework](https://dev.botframework.com/bots/new). If you click on the **Create a bot** in the Bot Framework portal instead, you will [create your bot in Microsoft Azure](#bots-and-microsoft-azure) instead. For more information, see [Bot Framework Documentation](/azure/bot-service/?view > [!WARNING] >->* If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by August 01, 2022. +>* If you have been using App Studio, we recommend that you'd try the Developer Portal to configure, distribute, and manage your Teams apps. App Studio will be deprecated by June 30, 2022 ## See also |
| platform | Bots Files | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/bot-v3/bots-files.md | Title: Sending and receiving files from a bot -description: Learn how to send and receive files through the bot using Graph APIs for personal, channel and group chat scopes. + Title: Send and receive files from a bot +description: Learn how to send and receive files through the bot using Graph APIs for personal, channel and groupchat scopes. Use Teams bot APIs using code samples based on the v3 Bot Framework SDK. +keywords: teams bots files send receive ms.localizationpriority: medium Last updated 05/20/2019 -# Send and receive files through your bot +# Send and receive files using bots [!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-bots.md)] The following table describes the content properties of the attachment: | `uniqueId` | OneDrive/SharePoint drive item ID. | | `fileType` | File type, such as pdf or docx. | -### Basic example in C# +### Basic example in C # The following sample shows how you can handle file uploads and send file consent requests in your bot's dialog: |
| platform | Developer Preview Intro | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/dev-preview/developer-preview-intro.md | description: In this article, know the features that are in the Public Developer ms.localizationpriority: high -# Public developer preview for Microsoft Teams +# Public developer preview for Teams >[!NOTE] >Features included in preview may not be complete, and may undergo changes before becoming available in the public release. They are provided for testing and exploration purposes only. They should not be used in production applications. |
| platform | Removing Tab Margins | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/removing-tab-margins.md | |
| platform | Manifest Schema Dev Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md | -# Reference: Public developer preview manifest schema for Microsoft Teams +# Public developer preview manifest schema for Teams For information on how to enable developer preview, see [public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md). |
| platform | Manifest Schema | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md | -# Reference: Manifest schema for Microsoft Teams +# App manifest schema for Teams The Microsoft Teams app manifest describes how your app integrates into the Microsoft Teams product. Your app manifest must conform to the schema hosted at [`https://developer.microsoft.com/json-schemas/teams/v1.13/MicrosoftTeams.schema.json`]( https://developer.microsoft.com/json-schemas/teams/v1.13/MicrosoftTeams.schema.json). Previous versions 1.0, 1.1,...,1.12 and the current 1.13 version (see note below) are each supported (using "v1.x" in the URL). For more information on the changes made in each version, see [manifest change log](https://github.com/OfficeDev/microsoft-teams-app-schema/releases). |
| platform | Team Chat Member Api Changes | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/team-chat-member-api-changes.md | -> [!NOTE] -> `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync` APIs are being deprecated. They're throttled to five requests per minute and return a maximum of 10 thousand members per team and the full roster not being returned for large teams. You must update to version 4.10 or higher of the Bot Framework SDK and switch to the paginated API endpoints, or use the `TeamsInfo.GetMemberAsync` to retrieve single users. -> -> This also applies to your bot even if you aren't directly using these APIs, as older SDKs call these APIs during [membersAdded](../bots/how-to/conversations/subscribe-to-conversation-events.md#members-added) events. If you're using an SDK version earlier to 4.10, upgrade it to the latest version. -> -> To view the list of upcoming changes, see [API changes](team-chat-member-api-changes.md#api-changes). +>[!NOTE] +> The deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync` APIs have started. Initially, they are heavily throttled to five requests per minute and return a maximum of 10K members per team. This results in the full roster not being returned as team size increases. +> You must update to version 4.10 or higher of the Bot Framework SDK and switch to the paginated API endpoints, or the `TeamsInfo.GetMemberAsync` single user API. This also applies to your bot even if you are not directly using these APIs, as older SDKs call these APIs during [membersAdded](../bots/how-to/conversations/subscribe-to-conversation-events.md#members-added) events. To view the list of upcoming changes, see [API changes](team-chat-member-api-changes.md#api-changes). Currently, if you want to retrieve information for one or more members of a chat or team, you can use the [Microsoft Teams bot APIs](/microsoftteams/platform/bots/how-to/get-teams-context?tabs=dotnet#fetch-the-roster-or-user-profile) `TeamsInfo.GetMembersAsync` for C# or `TeamsInfo.getMembers` for TypeScript or Node.js APIs. For more information, see [fetch roster or user profile](../bots/how-to/get-teams-context.md#fetch-the-roster-or-user-profile). Following are the upcoming API changes: > [!NOTE] > `objectId` is changed to `aadObjectId` to match what is called in the `Activity` object of a Bot Framework message. The new API is available with version 4.8 or later of the Bot Framework SDK. It is also available in the Teams SDK extension Bot Framework 3.x. Meanwhile, you can use the [REST](/microsoftteams/platform/bots/how-to/get-teams-context?tabs=json#get-single-member-details) endpoint. -* `TeamsInfo.GetMembersAsync` in C# and `TeamsInfo.getMembers` in TypeScript or Node.js is formally deprecated. Once the new API is available, you must update your bots to use it. This also applies to the [underlying REST API that these APIs use](/microsoftteams/platform/bots/how-to/get-teams-context?tabs=json#tabpanel_CeZOj-G++Q_json). +* `TeamsInfo.GetMembersAsync` in C# and `TeamsInfo.getMembers` in TypeScript or Node.js is formally deprecated. Once the new API is available, you must update your bots to use it. This also applies to the [underlying REST API that these APIs use](/microsoftteams/platform/bots/how-to/get-teams-context?tabs=json#tabpanel_CeZOj-G++Q_json). +* By late 2022, bots can't proactively retrieve the `userPrincipalName` or `email` properties for members of a chat or team. Bots must use the Graph APIs to retrieve the required information. The new `GetConversationPagedMembers` API can't return the `userPrincipalName` and `email` properties from late 2022. Bots must use Graph API with an access token to retrieve information. |
| platform | Teams Low Code Solutions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/teams-low-code-solutions.md | -# Create low-code custom apps for Microsoft Teams +# Create low-code custom apps for Teams Microsoft Teams is extensible and adaptive. This means that you can build custom applications for Teams that meet the distinct needs of your users. The low code custom apps save time, provide speedy solutions and meet the same demand as apps created from scratch. This document gives an overview of Microsoft Power Platform, Power Virtual Agents chatbot, and Virtual Assistant. |
| platform | Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs.md | You can add a tab from the Teams store (AppSource) or in one of the following co Users can access tabs by selecting the **More** button in the channel (example below) or chat in which they've been added. ### Desktop The following example shows how users can add a tab in a channel. ## Set up a tab There's a short setup process to add an app as a channel, chat, or meeting tab. ### Tab configuration dialog #### Anatomy: Tab configuration dialog |Counter|Description| |-|--| There's a short setup process to add an app as a channel, chat, or meeting tab. You can add a step in which users must first sign in with their Microsoft credentials. This authentication method is called single sign-on (SSO). ### Design a tab setup with UI templates Tabs provide a full-screen web experience in Teams where you can display collabo ### Mobile ### Desktop ### Anatomy: Tab #### Mobile |Counter|Description| |-|--| Tabs provide a full-screen web experience in Teams where you can display collabo #### Desktop |Counter|Description| |-|--| Users can automatically post to a channel or chat once theyΓÇÖve added a new tab #### Mobile #### Desktop ### Tab chat Users can have a conversation next to the tab content they're viewing. On deskto #### Mobile #### Desktop ### Permissions and role-based views You can include options to rename, remove, or modify a tab. #### Mobile |Counter|Description| |-|--| You can include options to rename, remove, or modify a tab. #### Desktop |Counter|Description| |-|--| Use these recommendations to create a quality app experience: :::row::: :::column span=""::: #### Do: Facilitate conversation Include content and components people can talk about. If it doesnΓÇÖt fit within :::column-end::: :::column span=""::: #### Don't: Treat your tab like any other webpage A tab isnΓÇÖt a webpage someone might view once. A tab should display your most :::row::: :::column span=""::: #### Do: Limit tasks and data Tabs work best when they address specific needs. Include a limited set of tasks :::column-end::: :::column span=""::: #### Don't: Embed your entire app Using a tab to display an entire app with multi-level navigation and complex int :::row::: :::column span=""::: #### Do: Keep it simple If your app requires authentication, try integrating Microsoft single sign-on (S :::column-end::: :::column span=""::: #### Don't: Have too many steps Remove any unnecessary steps for adding a tab. :::row::: :::column span=""::: #### Do: Take advantage of Teams color tokens Each Teams theme has its own color scheme. To handle theme changes automatically :::column-end::: :::column span=""::: #### Don't: Hard code color values |
| platform | Auth Silent Aad | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-silent-aad.md | description: In this module, learn how to do silent authentication, Single-sign- ms.localizationpriority: medium -# Silent authentication +# Use silent authentication in Azure AD > [!IMPORTANT] > Microsoft support and development for Active Directory Authentication Library (ADAL) including the security fixes, ends on **June 30, 2022**. To continue receiving support, update your applications to use Microsoft Authentication Library (MSAL).See [Migrate applications to the Microsoft Authentication Library (MSAL)](/azure/active-directory/develop/msal-migration). |
| platform | Auth Tab Aad | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-tab-aad.md | description: In this article, learn Teams authentication tabs Microsoft Azure AD ms.localizationpriority: medium -# Configure third party OAuth authentication +# Configure third party OAuth IdP authentication > [!Note] > For authentication to work for your tab on mobile clients, ensure that you're using version 1.4.1 or later of the Teams JavaScript SDK. |
| platform | Tab Sso Admin Consent | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-admin-consent.md | You can define app scope for an exposed API and determine if users can consent t 1. Select **Manage** > **Expose an API** from the left pane. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-api-menu.png" alt-text="Expose an API menu option." border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-api-menu.png" alt-text="Expose an API menu option."::: The **Expose an API** page appears. 1. Select **Set** to generate app ID URI. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-an-api.png" alt-text="Set app ID URI" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-an-api.png" alt-text="Set app ID URI"::: The section for setting app ID URI appears. You can define app scope for an exposed API and determine if users can consent t A message pops up on the browser stating that the app ID URI was updated. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-msg.png" alt-text="App ID URI message" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-msg.png" alt-text="App ID URI message"::: The app ID URI displays on the page. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-added.png" alt-text="App ID URI updated" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-added.png" alt-text="App ID URI updated"::: ## To configure API scope You can define app scope for an exposed API and determine if users can consent t A message pops up on the browser stating that the scope was added. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added-msg.png" alt-text="Scope added message" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added-msg.png" alt-text="Scope added message"::: The app ID URI displays on the page. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added.png" alt-text="Scope added and displayed" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added.png" alt-text="Scope added and displayed"::: ## To configure authorized client application You can define app scope for an exposed API and determine if users can consent t A message pops up on the browser stating that the client app was added. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message"::: The client app IDs display on the page. You can define app scope for an exposed API and determine if users can consent t A message pops up on the browser stating that the client app was added. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message for web app" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message for web app"::: The client app IDs display on the page. |
| platform | Tab Sso Code | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-code.md | Before you add code to enable SSO, ensure that you've registered your app with A You need to configure your tab app's client-side code to obtain an access token from Azure AD. The access token is issued on behalf of the tab app. If your tab app requires additional Microsoft Graph permissions, you'll need to pass the access token to the server-side, and exchange it for Microsoft Graph token. This section covers: |
| platform | Tab Sso Graph Api | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-graph-api.md | You can configure additional Graph scopes in Azure AD for your app. These are de A message pops up on the browser stating that the permissions were updated. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/updated-permission-msg.png" alt-text="Permissions updated message." border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/updated-permission-msg.png" alt-text="Permissions updated message."::: The added permissions are displayed in the **API permissions** page. |
| platform | Tab Sso Manifest | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-manifest.md | -# Update app manifest for SSO and preview app +# Update manifest for SSO and preview app Before you update Teams app manifest, ensure that you've configure code to enable SSO in your tab app. You've registered your tab app in Azure AD, and obtained an app ID. You've also Configure the `webApplicationInfo` property in the Teams app manifest file. This property enables SSO for your app to help app users access your tab app seamlessly. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/sso-manifest.png" alt-text="Teams app manifest configuration" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/sso-manifest.png" alt-text="Teams app manifest configuration"::: `webApplicationInfo` has two elements, `id` and `resource`. For more information, see [webApplicationInfo](../../../resources/schema/manifes You've configured the tab app to enable SSO in Azure AD, in app code, and in Teams manifest file. You can now sideload your tab app in Teams, and preview it in Teams environment. To preview your tab app in Teams: To preview your tab app in Teams: Teams opens the tab app and you can use it. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/teams-sso-app.png" alt-text="Example of Teams tab app with SSO enabled" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/teams-sso-app.png" alt-text="Example of Teams tab app with SSO enabled"::: Congratulations! You've enabled SSO for your tab app. |
| platform | Tab Sso Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-overview.md | -# Enable single sign-on in a tab app +# Enable SSO for tab app <!--Single sign-on (SSO) allows a user to access an application or a web service after signing-in only once. The app users never have to go through authentication again.--> Here's what you'll learn in this section: App users sign in to Teams using either personal Microsoft account or Microsoft 365 account. You can take advantage of this, and use SSO to authenticate and authorize the app users. - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/teams-sso-ux.png" alt-text="SSO user experience in a Teams tab app" border="false"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/teams-sso-ux.png" alt-text="SSO user experience in a Teams tab app"::: - Teams authenticates and stores the identity of its app user. - Your tab app uses the stored identity of the app user who is already validated by Teams. Achieve SSO in a tab app by obtaining access token for the Teams app user who's The following image shows how SSO works when a Teams app user attempts to access the tab app: | # | Interaction | What's going on | | | | | This section describes the tasks involved in implementing SSO for a tab app. The To enable SSO for a tab app: - :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/enable-sso.png" alt-text="Steps to enable SSO for tab" border="false" lightbox="../../../assets/images/authentication/teams-sso-tabs/enable-sso.png"::: + :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/enable-sso.png" alt-text="Steps to enable SSO for tab" lightbox="../../../assets/images/authentication/teams-sso-tabs/enable-sso.png"::: 1. **Register with Azure AD**: Create an Azure AD app to generate an app ID and application ID URI. For generating access token, you configure scopes and authorize trusted client applications. 2. **Update code**: Add the code to handle access token, calling `getAuthToken()` when an app user accesses your tab app, sending this token to your app's server code in the Authorization header, and validating the access token when it's received. |
| platform | Tab Sso Register Aad | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-register-aad.md | -# Register your app in Azure AD +# Register your tab app in Azure AD Azure AD provides access to your tab app based on the app user's Teams identity. You'll need to register your tab app with Azure AD so that the app user who has signed into Teams can be given access to your tab app. Azure AD provides access to your tab app based on the app user's Teams identity. Registering your tab app in Azure AD and enabling it for SSO requires making app configurations, such as generating app ID, defining API scope, and pre-authorize client IDs for trusted applications. Create a new app registration in Azure AD, and expose its (web) API using scopes (permissions). Configure a trust relationship between the exposed API on Azure AD and your app. This allows Teams Client to obtain an access token on behalf of your application and the logged-in user. You can add client IDs for the trusted mobile, desktop, and web applications that you want to pre-authorize. |
| platform | Tab Sso Troubleshooting | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/tab-sso-troubleshooting.md | -# Troubleshooting SSO authentication in Teams +# Troubleshoot SSO authentication in Teams Here's a list of issues and questions about SSO, and how you can fix them. <br> A generic error may show up when one or more of app configurations made in Azure The following image shows an example of the app details configured in Azure AD. Check that the following values match between Azure AD, client-side code, and Teams app manifest: |
| platform | Build Adaptive Card Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/build-adaptive-card-tabs.md | You can build your tabs with ready-made user interface (UI) building blocks nati The following image shows build tabs with Adaptive Cards in desktop and mobile: ## Prerequisites In the previous sections, you've seen that most of the development paradigms can The following image provides an overview of how the authentication data flow works for a `tab/fetch` invoke. **`tab/fetch` auth response** |
| platform | Create Channel Group Tab | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-channel-group-tab.md | Title: Create a channel or group tab + Title: Create a channel tab description: In this module, learn how to create a channel and group tab with the Yeoman Generator for Microsoft Teams, including reviewing source code with code examples. ms.localizationpriority: medium-# Channel or group tab +# Create a channel tab Channel or group tabs deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. |
| platform | Content Page | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/content-page.md | -# Create a content page for your tab +# Create a content page A content page is a webpage that is rendered within the Teams client, which is a part of: |
| platform | Removal Page | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/create-tab-pages/removal-page.md | ms.localizationpriority: medium -# Tab re-configuration and removal page +# Create a removal page You can extend and enhance the user experience by supporting removal and modification options in your app. Teams enables users to rename or remove a channel or group tab and you can permit users to reconfigure your tab after installation. Additionally, the tab removal experience provides the users with post-removal options to delete or archive content. |
| platform | Using Teams Client Sdk | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/using-teams-client-sdk.md | Title: Building tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK + Title: Teams JavaScript client SDK description: In this module, Learn Microsoft Teams JavaScript client SDK, which can help you build app experiences hosted in an <iframe> in Teams, Office, and Outlook. ms.localizationpriority: high -# Building tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK +# Teams JavaScript client SDK The Microsoft Teams JavaScript client SDK can help you create hosted experiences in Teams, Office, and Outlook, where your app content is hosted in an [iframe](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). The SDK is helpful for developing apps with the following Teams capabilities: The following table lists Teams tabs and dialogs (task modules) capabilities (pu | appInitialization| | Deprecated. Replaced by `app` namespace. | | appInstallDialog | Teams|| | authentication | Teams, Outlook, Office | |-| calendar | Teams, Outlook || +| calendar | Outlook || | call | Teams|| | chat |Teams|| | dialog | Teams, Outlook, Office | Namespace representing dialogs (formerly named *task modules*. See notes on [Dialogs](#dialogs). | |
| platform | What Are Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md | -# Build Tabs for Microsoft Teams +# Build tabs for Teams Tabs are Teams-aware webpages embedded in Microsoft Teams. They're simple HTML `<iframe\>` tags that point to domains declared in the app manifest and can be added as part of a channel inside a team, group chat, or personal app for an individual user. You can include custom tabs with your app to embed your own web content in Teams or add Teams-specific functionality to your web content. For more information, see [Teams JavaScript client SDK](/javascript/api/overview/msteams-client). |
| platform | Cards Actions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-actions.md | Adaptive Cards support four action types: You can also modify the Adaptive Card `Action.Submit` payload to support existing Bot Framework actions using an `msteams` property in the `data` object of `Action.Submit`. The next section provides details on how to use existing Bot Framework actions with Adaptive Cards. > [!NOTE]-> Adding `msteams` to data with a Bot Framework action does not work with an Adaptive Card task module. +>* Adding `msteams` to data with a Bot Framework action does not work with an Adaptive Card task module. +> +>* Primary or desctuctive `ActionStyle` is not supported in Microsoft Teams. ### Adaptive Cards with messageBack action |
| platform | Design Effective Cards | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/design-effective-cards.md | An Adaptive Card contains a freeform body of card elements and optional set of a The Adaptive Card framework is used across many Microsoft products, including Teams. You can send cards inside messages to users via bots or message extensions. Users can also take actions on cards when present. ## Microsoft Teams UI Kit Our largest card. Use for sharing articles or scenarios where an image tells mos #### Mobile #### Desktop ### Thumbnail Use for sending a simple actionable message. #### Mobile #### Desktop ### List Use in scenarios where you want the user to pick an item from a list, but the it #### Mobile #### Desktop ### Digest Use for news digests and round-up posts. Note: We recommend the thumbnail card f #### Mobile #### Desktop ### Media Use when you want to combine text and media, like audio or video. #### Mobile #### Desktop ### People Best used when you to efficiently convey who's involved with a task. #### Mobile #### Desktop ### Request ticket Use to get quick inputs from a user to automatically create a task or ticket. #### Mobile #### Desktop ### ImageSet Use to send multiple image thumbnails. #### Mobile #### Desktop ### ActionSet Use when you want to the user to select a button, then gather addition user inpu #### Mobile #### Desktop ### ChoiceSet Use to gather multiple inputs from the user. #### Mobile #### Desktop ## Anatomy Adaptive Cards have a lot of flexibility. But at minimum, we strongly suggest in #### Mobile |Counter|Description| |-|--| Adaptive Cards have a lot of flexibility. But at minimum, we strongly suggest in #### Desktop |Counter|Description| |-|--| Follow these guidelines when including images in your cards. :::row::: :::column span=""::: #### Do: Use up to six primary actions While Adaptive Cards can support six primary actions, most cards donΓÇÖt need th :::column-end::: :::column span=""::: #### Don't: Use more than six primary actions Adaptive Cards should present quick, actionable content. Too many actions can ov ### Frequency #### Do: Be concise |
| platform | People Picker | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/people-picker.md | -> Currently, People Picker in Adaptive Cards is available in [public developer preview](../../resources/dev-preview/developer-preview-intro.md#public-developer-preview-for-microsoft-teams) only for mobile and generally available (GA) for desktop. +> Currently, People Picker in Adaptive Cards is available in [Public developer preview for Teams](../../resources/dev-preview/developer-preview-intro.md#public-developer-preview-for-teams) only for mobile and generally available (GA) for desktop. People Picker helps users to search and select users in Adaptive Card. You can add People Picker as input control to Adaptive Card, which works across chats, channels, task modules, and tabs. People Picker supports the following features: The following image shows the reassignment scenario: # [Mobile](#tab/mobile) > [!NOTE]-> Currently, this feature is available in [public developer preview](../../resources/dev-preview/developer-preview-intro.md#public-developer-preview-for-microsoft-teams) only. +> Currently, this feature is available in [Public developer preview for Teams](../../resources/dev-preview/developer-preview-intro.md#public-developer-preview-for-teams) only. Android and iOS mobile clients support People Picker in Adaptive Cards. You can use People Picker in mobile to search and select user to enhance user experience. The search experience is similar to any other user selection experience in mobile. |
| platform | Design Teams Task Modules | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/task-modules/design-teams-task-modules.md | They can also be built with the [Adaptive Cards](../../task-modules-and-cards/ca ### Mobile |Counter|Description| |-|--| They can also be built with the [Adaptive Cards](../../task-modules-and-cards/ca ### Desktop |Counter|Description| |-|--| Lists work nicely in a task module because they're easy to scan. #### Mobile #### Desktop ### Form Task modules are a great place to surface forms with sequential user inputs and #### Mobile #### Desktop ### Sign in Create a focused sign in or sign-up flow with a series of task modules, letting #### Mobile #### Desktop ### Media Embed media content in a task module for a focused viewing experience. #### Mobile #### Desktop ### Empty state Use for welcome, error, and success messages. #### Mobile #### Desktop ### Image gallery Embed a gallery carousel in an iframe (desktop) or webview (mobile). ##### Mobile ##### Desktop ### Poll This example shows poll results launched from an Adaptive Card. The poll can be #### Mobile #### Desktop ## Best practices Use these recommendations to create a quality app experience. :::row::: :::column span=""::: #### Do: Use one task module at a time The goal is to focus the user on completing a task after all! :::column-end::: :::column span=""::: #### Don't: Pop a dialog on top of a task module This creates an unfocused, confusing user experience. :::row::: :::column span=""::: #### Do: Make sure the content is responsive While Adaptive Cards hosted in a task module render well on mobile devices, if y :::column-end::: :::column span=""::: #### Don't: Use horizontal scroll bars It's a best practice to keep content focused and not too lengthy. If a scroll is :::row::: :::column span=""::: #### Do: Keep it short You can easily create a multi-step wizard, but that doesn't necessarily mean you :::column-end::: :::column span=""::: #### Don't: Have long interactions Try to keep your interactions short and to the point. :::row::: :::column span=""::: #### Do: Use inline error messages See the forms UI template for guidelines on inline error handling. :::column-end::: :::column span=""::: #### Don't: Put error messages in dialogs |
| platform | AAD Manifest Customization | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/AAD-manifest-customization.md | -# Azure AD manifest +# Customize Azure AD manifest The [Azure Active Directory (Azure AD) manifest](/azure/active-directory/develop/reference-app-manifest) contains definitions of all the attributes of an Azure AD application object in the Microsoft identity platform. |
| platform | Teamsfx SDK | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-SDK.md | const profile = await graphClient.api("/me").get(); <details> <summary><b>Create API client to call existing API in Bot or Azure Function</b></summary> </details> |
| platform | Add Single Sign On | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-single-sign-on.md | TeamsFx helps to reduce the developer tasks by using SSO and accessing cloud res With TeamsFx SDK, you can write user authentication code in a simplified way using Credentials: 1. User identity in browser environment: `TeamsUserCredential` represents Teams current user's identity.-2. User identity in Node.js environment: `OnBehalfOfUserCredentail` uses On-Behalf-Of flow and SSO token. +2. User identity in Node.js environment: `OnBehalfOfUserCredential` uses On-Behalf-Of flow and SSO token. 3. Application Identity in Node.js environment: `AppCredential` represents the application identity. For more information about TeamsFx SDK, see: |
| platform | Create New Project | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/create-new-project.md | -# Create a new Teams app using Teams Toolkit +# Create a new Teams app using Teams Toolkit To create a new Teams app using Teams Toolkit, you can select from one of the following options: You can create a new app by exploring **View samples** and selecting an existing * [Deploy Teams app to the cloud](deploy.md) * [Publish your Teams app](../concepts/deploy-and-publish/appsource/publish.md) * [Manage multiple environments](TeamsFx-multi-env.md)-* [Collaborate with other developers on Teams project](TeamsFx-collaboration.md) +* [Collaborate with other developers on Teams project](TeamsFx-collaboration.md) |
| platform | Debug Background Process | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-background-process.md | -# Debug background processes +# Debug background process The local debug workflow involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Visual Studio Code (VS Code). The VS Code launches the debuggers, and Microsoft Edge or Google Chrome launches a new browser instance as follows: |
| platform | Debug Local | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-local.md | Perform the following steps to debug your app after you create a new app using t 1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar. - :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Browser option" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Browser option"::: 1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode. - :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Start debugging" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Start debugging"::: 3. Select **Sign in** to Microsoft 365 account. Toolkit launches a new Edge or Chrome browser instance based on your selection a 1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar. - :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Browser lists" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/debug/debug-run.png" alt-text="Browser lists"::: 1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode. - :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Debug your app" border="false"::: + :::image type="content" source="../assets/images/teams-toolkit-v2/debug/start-debugging.png" alt-text="Debug your app"::: 3. Select **Sign in** to Microsoft 365 account. |
| platform | Deploy | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/deploy.md | -# Deploy to the cloud +# Deploy Teams app to the cloud Teams Toolkit helps you to deploy or upload the frontend and backend code in your application to your provisioned cloud resources in Azure. |
| platform | Provision | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/provision.md | -# Use Teams Toolkit to provision cloud resources +# Provision cloud resources using Teams Toolkit -TeamsFx integrates with Azure and Microsoft 365 cloud, which allows you to place your application in Azure with a single command. TeamsFx integrates with Azure Resource Manager that enables you to provision Azure resources, which your application needs for code approach. +TeamsFx integrates with Azure and Microsoft 365 cloud, which allows you to place your application in Azure with a single command. TeamsFx integrates with Azure Resource Manager that enables you to provision Azure resources, which your application needs for code approach. ## Prerequisites |
| platform | Use CICD Template | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/use-CICD-template.md | You can create the following workflow templates with GitHub: **Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-1. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. ++1. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png"::: from the left pane. ++1. Select **Add features** ++ :::image type="content" source="../assets/images/teams-toolkit-v2/add-feature.png" alt-text="Adding feature"::: + 1. Select **Add CI/CD Workflows**.++ :::image type="content" source="../assets/images/teams-toolkit-v2/toolkit-ci-cd-workflow.png" alt-text="Select CI/CD workflow"::: + 1. Select an environment from the command prompt. 1. Select **GitHub** as the CI/CD provider. 1. Select at least one template from these options: CI, CD, Provision, or Publish to Teams. You can create the following workflow templates with Azure DevOps: **Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. -3. Select **Add CI/CD Workflows**. -4. Select an environment from the command prompt. -5. Select **Azure DevOps** as CI/CD provider. -6. Select at least one template from these options: CI, CD, Provision, and Publish to Teams. -7. Open the template and customize the workflows that fit into your scenarios. -8. Follow the README files under `.azure/pipelines` to set up the workflow in Azure DevOps. +2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png"::: from the left pane. +1. Select **Add CI/CD Workflows**. +1. Select an environment from the command prompt. +1. Select **Azure DevOps** as CI/CD provider. +1. Select at least one template from these options: CI, CD, Provision, and Publish to Teams. +1. Open the template and customize the workflows that fit into your scenarios. +1. Follow the README files under `.azure/pipelines` to set up the workflow in Azure DevOps. **TeamsFx CLI** You can create the following workflow templates with Jenkins: **Teams Toolkit in Visual Studio Code** 1. Create a new Teams app project using Teams Toolkit.-2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png" alt-text="api icon"::: from the left navigation bar. +2. Select **Teams Toolkit** icon :::image type="icon" source="../assets/images/teams-toolkit-v2/add-API/api-add-icon.png"::: from the left pane. 3. Select **Add CI/CD Workflows**. 4. Select an environment from the command prompt. 5. Select **Jenkins** as CI/CD provider. |
| platform | Add Incoming Webhook | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-incoming-webhook.md | -# Create an Incoming Webhook +# Create Incoming Webhooks An Incoming Webhook lets external applications to 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 topic. You can use cards in the following capabilities: |
| platform | Add Outgoing Webhook | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-outgoing-webhook.md | ms.localizationpriority: high -# Create Outgoing Webhook +# Create Outgoing Webhooks The Outgoing Webhook acts as a bot and search for messages in channels using **@mention**. It sends notifications to external web services and responds with rich messages, which include cards and images. It helps to skip the process of creating bots through the [Microsoft Bot Framework](https://dev.botframework.com/). To ensure that your service is receiving calls only from actual Teams clients, T Your code must always validate the HMAC signature included in the request as follows: * Generate the HMAC token from the request body of the message. There are standard libraries to do this on most platform, such as [Crypto](https://nodejs.org/api/crypto.html#crypto_crypto) for Node.js and [Teams webhook sample](https://github.com/OfficeDev/microsoft-teams-sample-outgoing-webhook/blob/23eb61da5a18634d51c5247944843da9abed01b6/WebhookSampleBot/Models/AuthProvider.cs) for C\#. Microsoft Teams uses standard SHA256 HMAC cryptography. You must convert the body to a byte array in UTF8.-* Compute the hash from the byte array of the security token provided by Teams when you registered the Outgoing Webhook in the Teams client. See [create an Outgoing Webhook](#create-outgoing-webhook). +* Compute the hash from the byte array of the security token provided by Teams when you registered the Outgoing Webhook in the Teams client. See [create an Outgoing Webhook](#create-outgoing-webhooks). * Convert the hash to a string using UTF-8 encoding. * Compare the string value of the generated hash with the value provided in the HTTP request. |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | ms.localizationpriority: high Discover Microsoft Teams platform features that are generally available (GA) and in developer preview. You can now get latest Teams platform updates by subscribing to the RSS feed [](https://aka.ms/TeamsPlatformUpdates). For more information, see [configure RSS feed](#get-latest-updates). -## Microsoft Build 2022 :::image type="icon" source="assets/images/bullhorn.png" border="false" +## Microsoft Build 2022 :::image type="icon" source="assets/images/bullhorn.png" | Date | Feature | Find it here | | | | | |