| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Deep Link Application | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-link-application.md | ms.localizationpriority: high # Deep link to an application -Application can open the profile dialog through deep links and help users to learn more about the application, permissions, and more. You can create a deep link for the app after the app is listed in the Teams store. To create a link to launch Teams, append the app ID to the URL, `https://teams.microsoft.com/l/app/<your-app-id>`. A dialog appears to install or open the app. +Application can open the profile dialog through deep links and help users to learn more about the application, permissions, and more. You can create a deep link for the app after the app is listed in the Teams store. To create a link to launch Teams, append the app ID to the URL, `https://teams.microsoft.com/l/app/<appId>`. A dialog appears to install or open the app. If your app is approved for mobile platform, you can deep link to an app on mobile. Apple App Store Connect Team ID is required additionally for the deep link to work on Teams-iOS. For more information, see [how to update Apple App Store Connect Team ID](../deploy-and-publish/appsource/prepare/update-apple-store-team-connect-id.md). Deep link to an app isn't supported for custom apps. You can open an app install dialog from your Teams app and also can install the app in other contexts. Use the following deep link format to open an app install dialog from your Teams: -`https://teams.microsoft.com/l/app/<your-app-id>`, where `<your-app-id>` is the application ID(f46ad259-0fe5-4f12-872d-c737b174bcb4). +`https://teams.microsoft.com/l/app/<appId>`, where `<appId>` is the application ID. Applications can use the TeamsJS library to open the dialog without manually generating the deep link. Following is an example to open the app install dialog using TeamsJS: Applications can use the TeamsJS library to open the dialog without manually gen ```javascript // Open an app install dialog from your tab if(appInstallDialog.isSupported()) {- const dialogPromise = appInstallDialog.openAppInstallDialog({ appId: "f46ad259-0fe5-4f12-872d-c737b174bcb4" }); + const dialogPromise = appInstallDialog.openAppInstallDialog({ appId: "<appId>" }); dialogPromise. then((result) => {/*Successful operation*/}). catch((error) => {/*Unsuccessful operation*/}); For more information about the install dialog, see the [appInstallDialog.openApp ```javascript // Open an app install dialog from your tab-microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/app/f46ad259-0fe5-4f12-872d-c737b174bcb4"); +microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/app/<appId>"); ``` For more information about capabilities and the APIs in the TeamsJS library, see ### Deep link for SharePoint Framework tabs You can use the following deep link format in a bot, connector, or message extension card:-`https://teams.microsoft.com/l/entity/<AppId>/<EntityId>?webUrl=<entityWebUrl>/<EntityName>`. +`https://teams.microsoft.com/l/entity/<appId>/<EntityId>?webUrl=<entityWebUrl>/<EntityName>`. > [!NOTE] > |
| platform | Personal Apps | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/personal-apps.md | On the left side of Teams, users can right-click the personal app to pin, remove Use these recommendations to create a quality app experience. -### Tab priority +### Desktop -#### Do: Show the most relevant content in the first tab +#### Tab priority ++##### Do: Show the most relevant content in the first tab With responsive sizing, tabs on the right may become truncated or out of view. :::image type="content" source="../../assets/images/personal-apps/personal-tab-priority-do.png" alt-text="Example shows a personal app displaying the most relevant content in the first tab."::: -#### DonΓÇÖt: Lead with secondary content or metadata +##### 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. :::image type="content" source="../../assets/images/personal-apps/personal-tab-priority-dont.png" alt-text="Example shows a personal app leading with secondary content or metadata."::: -### Tab hierarchy +#### Tab hierarchy -#### Do: Tabs should be of equal hierarchy and represent key app pages +##### Do: Tabs should be of equal hierarchy and represent key app pages 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. :::image type="content" source="../../assets/images/personal-apps/personal-tab-hierarchy-do.png" alt-text="Example shows a personal app with tabs of equal hierarchy."::: -#### Don't: Include different levels of hierarchy +##### 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. :::image type="content" source="../../assets/images/personal-apps/personal-tab-hierarchy-dont.png" alt-text="Example shows a personal app with different levels of hierarchy."::: -### First-run experience +#### First-run experience -#### Do: Include a first-run experience +##### Do: Include a first-run experience 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. There should be at least a welcome screen the first time you use a personal app. :::image type="content" source="../../assets/images/personal-apps/personal-bot-fre-do.png" alt-text="Another example shows what to do during a personal app first-run experience."::: -#### Don't: Start with a blank screen +##### Don't: Start with a blank screen Users might be confused if nothing displays the first time they run your app. :::image type="content" source="../../assets/images/personal-apps/personal-tab-fre-dont.png" alt-text="Example shows what not to do during a personal app first-run experience."::: -### Personalized content +#### Personalized content -#### Do: Aggregate app content relevant to a user +##### Do: Aggregate app content relevant to a user Whether it's a personal tab or bot, display content related to only a user's activity in your app. Whether it's a personal tab or bot, display content related to only a user's act :::image type="content" source="../../assets/images/personal-apps/personal-bot-personalized-content-do.png" alt-text="Another example shows what to do with a personal app and personalized content."::: -#### DonΓÇÖt: Show unrelated or overly broad content +##### 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. In personal contexts, donΓÇÖt display content for teams a user isn't part of. Pe :::image type="content" source="../../assets/images/personal-apps/personal-bot-personalized-content-dont.png" alt-text="Another example shows what not to do with a personal app and personalized content."::: -### Complex app features +#### Complex app features -#### Do: Allow users to access complex features in a browser +##### Do: Allow users to access complex features in a browser Your app should focus on core tasks in Teams, but you can still view the full, standalone app in a browser. :::image type="content" source="../../assets/images/personal-apps/personal-tab-feature-do.png" alt-text="Example shows how to handle complex app features with a personal app."::: -#### DonΓÇÖt: Include your entire app +##### 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. :::image type="content" source="../../assets/images/personal-apps/personal-tab-feature-dont.png" alt-text="Example shows how not to handle complex app features with a personal app."::: +### Mobile ++ ## Code sample |Sample name | Description | TypeScript| |
| platform | Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs.md | 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). +#### Desktop + :::image type="content" source="../../assets/images/tabs/design-set-up-tab-auth.png" alt-text="Example shows a tab authentication screen."::: +#### Mobile +++ ### Design a tab setup with UI templates Use one of the following Teams UI templates to help design your tab setup experience: Notify users of tab activity one of the following ways: Use these recommendations to create a quality app experience: -### Collaboration +### Desktop ++#### Collaboration :::row::: :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-collaboration-do.png" alt-text="Illustration shows what to do with tab navigation design."::: -#### Do: Facilitate conversation +##### Do: Facilitate conversation Include content and components people can talk about. If it doesnΓÇÖt fit within the context of a chat, channel, or meeting, it doesnΓÇÖt belong in your tab. Include content and components people can talk about. If it doesnΓÇÖt fit within :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-collaboration-dont.png" alt-text="Example shows what not to do with tab navigation design."::: -#### Don't: Treat your tab like any other webpage +##### 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 important, relevant content that people need to accomplish something together. :::column-end::: :::row-end::: -### Navigation +#### Navigation :::row::: :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-nav-do.png" alt-text="Example showing what to do with tab navigation design."::: -#### Do: Limit tasks and data +##### Do: Limit tasks and data Tabs work best when they address specific needs. Include a limited set of tasks and data relevant to the team or group. Tabs work best when they address specific needs. Include a limited set of tasks :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-nav-dont.png" alt-text="Illustration showing what not to do with tab navigation design."::: -#### Don't: Embed your entire app +##### Don't: Embed your entire app Using a tab to display an entire app with multi-level navigation and complex interactions leads to information overload. :::column-end::: :::row-end::: -### Setup +#### Setup :::row::: :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-setup-do.png" alt-text="Illustration showing what to do with tab setup design."::: -#### Do: Keep it simple +##### Do: Keep it simple If your app requires authentication, try integrating Microsoft single sign-on (SSO) for a more seamless sign-in experience. Also, only include essential information and steps to add the tab. If your app requires authentication, try integrating Microsoft single sign-on (S :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-setup-dont.png" alt-text="Illustration showing what not to do with tab setup design."::: -#### Don't: Have too many steps +##### Don't: Have too many steps Remove any unnecessary steps for adding a tab. :::column-end::: :::row-end::: -### Theming +#### Theming :::row::: :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-theming-do.png" alt-text="Illustration showing what to do with tab theming."::: -#### Do: Take advantage of Teams color tokens +##### Do: Take advantage of Teams color tokens -Each Teams theme has its own color scheme. To handle theme changes automatically, use [color tokens (Fluent UI)](https://fluentsite.z22.web.core.windows.net/0.51.3/colors#color-scheme) in your design. +Each Teams theme has its own color scheme. To handle theme changes automatically, use [color tokens (Fluent UI)](https://react.fluentui.dev/?path=/docs/theme-colors--page) in your design. :::column-end::: :::column span=""::: :::image type="content" source="../../assets/images/tabs/design-tab-theming-dont.png" alt-text="Illustration showing what not to do with tab theming."::: -#### Don't: Hard code color values +##### Don't: Hard code color values If you donΓÇÖt use Teams color tokens, your designs will be less scalable and take more time to manage. :::column-end::: :::row-end::: +### Mobile ++++ ## See also [Tab margin changes](~/resources/removing-tab-margins.md) |
| platform | Conversational Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/conversational-tabs.md | microsoftTeams.conversations.openConversation(openConversationRequest); > The **channelId** is optional for channel tabs. However, it is recommended if you want to keep your implementation across channel and static tabs the same. * **title**: The title that is shown to the user in the chat panel. -Most of these values can also be retrieved from the [`app.getContext()`](/javascript/api/@microsoft/teams-js/app?view=msteams-client-js-latest#@microsoft-teams-js-app-getcontext&preserve-view=true) API (`microsoftTeams.getContext()` in TeamsJS v1). For more information, see [PageInfo interface](/javascript/api/@microsoft/teams-js/app?view=msteams-client-js-latest#@microsoft-teams-js-app-pageinfo&preserve-view=true) +Most of these values can also be retrieved from the [`app.getContext()`](/javascript/api/@microsoft/teams-js/app#@microsoft-teams-js-app-getcontext) API (`microsoftTeams.getContext()` in TeamsJS v1). For more information, see [PageInfo interface](/javascript/api/@microsoft/teams-js/app.pageinfo). ```javascript microsoftTeams.conversations.openConversation({ΓÇ£subEntityIdΓÇ¥:ΓÇ¥task-1ΓÇ¥, ΓÇ£entityIdΓÇ¥: ΓÇ£tabInstanceId-1ΓÇ¥, ΓÇ£channelIdΓÇ¥: ΓÇ¥19:baa6e71f65b948d189bf5c892baa8e5a@thread.skypeΓÇ¥, ΓÇ£titleΓÇ¥: "Task TitleΓÇ¥}); |
| platform | What Are Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md | The following image shows personal tabs: The following image shows Contoso channel tabs: +# [Desktop](#tab/desktop) + :::image type="content" source="../assets/images/tabs/tabs.png" alt-text="Channel or group tabs" lightbox="../assets/images/tabs/tabs.png"::: +# [Mobile](#tab/mobile) ++++ There are few prerequisites that you must go through before working on tabs. There are two types of tabs available in Teams, personal and channel or group. [Personal tabs](~/tabs/how-to/create-personal-tab.md), along with personal-scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left navigation bar for easy access. [Channel or group tabs](~/tabs/how-to/create-channel-group-tab.md) deliver content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. |
| platform | Cards Actions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-actions.md | The following code shows an example of Adaptive Cards with `invoke` action with ## Code samples -|S.No.|Card| Description|.NET|Node.js|Python|Java| -|:--|:--|:--|--||--|-| -|1|Adaptive card actions|This sample showscases different actions supported in adaptive cards.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-adaptive-card-actions/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-adaptive-card-actions/nodejs)|NA|NA| -|2|Using cards|Introduces all card types including thumbnail, audio, media etc. Builds on Welcoming user + multi-prompt bot by presenting a card with buttons in welcome message that route to appropriate dialog.|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/javascript_nodejs/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/python/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/java_springboot/06.using-cards)| -|3|Adaptive cards|Demonstrates how the multi-turn dialog can use a card to get user input for name and age.|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/javascript_nodejs/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/python/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/java_springboot/07.using-adaptive-cards)| +|S.No.|Card| Description|.NET|Node.js|Python|Java|Manifest| +|:--|:--|:--|--||--|-|| +|1|Adaptive card actions|This sample showscases different actions supported in adaptive cards.|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-adaptive-card-actions/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-adaptive-card-actions/nodejs)|NA|NA|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/bot-adaptive-card-actions/csharp/demo-manifest/bot-adaptivecard-actions.zip)| +|2|Using cards|Introduces all card types including thumbnail, audio, media etc. Builds on Welcoming user + multi-prompt bot by presenting a card with buttons in welcome message that route to appropriate dialog.|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/javascript_nodejs/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/python/06.using-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/java_springboot/06.using-cards)|NA| +|3|Adaptive cards|Demonstrates how the multi-turn dialog can use a card to get user input for name and age.|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/javascript_nodejs/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/python/07.using-adaptive-cards)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/java_springboot/07.using-adaptive-cards)|NA| > [!NOTE] > Media elements are not supported for Adaptive Card in Teams. |
| platform | Cards Reference | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/cards/cards-reference.md | You can identify and use different types of cards based on your application requ > > * For Adaptive Cards in Incoming Webhooks, all native Adaptive Card schema elements, except `Action.Submit`, are fully supported. The supported actions are [**Action.OpenURL**](https://adaptivecards.io/explorer/Action.OpenUrl.html), [**Action.ShowCard**](https://adaptivecards.io/explorer/Action.ShowCard.html), [**Action.ToggleVisibility**](https://adaptivecards.io/explorer/Action.ToggleVisibility.html), and [**Action.Execute**](/adaptive-cards/authoring-cards/universal-action-model#actionexecute). >-> * Adaptive Card supports only Incoming Webhook O365 Connector type and not any other O365 Connector types. +> * Adaptive Card supports only Incoming Webhook connectors for Microsoft 365 groups type. For these connectors, you can send the Adaptive Card using the following [format](../../webhooks-and-connectors/how-to/connectors-using.md#send-adaptive-cards-using-an-incoming-webhook). ## Common properties for all cards |