Service | Microsoft Docs article | Related commit history on GitHub | Change details |
---|---|---|---|
platform | Apps Package | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/apps-package.md | For your app to pass Teams Store review, these icons must meet the following siz ### Color icon -The color version of your icon displays in most Teams scenarios and must be 192x192 pixels. Your icon symbol (96x96 pixels) can be any color, but it must sit on a solid or fully transparent square background. +* **Teams**: The color version of your icon displays in most Teams scenarios and must be 192x192 pixels. Your icon symbol (96x96 pixels) can be any color, but it must sit on a solid or fully transparent square background. -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. + 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. + :::image type="content" source="../../assets/images/icons/design-color-icon.png" alt-text="Teams color icon and design guidance."::: ++* **Outlook and Microsoft 365 (Preview)**: You can specify a [32x32 color icon](~/resources/schem#icons) with a transparent background to ensure a consistent appearance when your app runs in Outlook and Microsoft 365. If not specified, a scaled down [color icon](#color-icon) with rounded corners (and in some cases, opaque background) is used, which may not share the same look and feel of the host environment. ++ > [!NOTE] + > 32x32 color icon is available only in [public developer preview](../../resources/dev-preview/developer-preview-intro.md). ++ :::image type="content" source="../../assets/images/icons/design-outline-icon.png" alt-text="Screenshot shows the design guidance of an outline and 32x32 color icon."::: ++|Microsoft 365 host application |Scenario | Required| +|||-| +|Teams | Displays in most Teams scenarios and must be 192x192 pixels. |✔️ | +|Outlook and Microsoft 365 (Preview) | When an app is pinned in Outlook or Microsoft 365. || ### Outline icon An outline icon displays in two scenarios: -* When your app is in use and “hoisted” on the app bar on the left side of Teams. -* When a user pins your app's message extension. --Ensure the icon is 32x32 pixels. It should be either white with a transparent background or transparent with a white background. No other colors are allowed. The outline icon mustn't contain any additional padding around the symbol. +* When your app is in use. +* When your app is pinned to the app bar on the left side of Teams. +Ensure that the ouline icon size must be in 32x32 pixels. It must be either white with a transparent background or transparent with a white background. No other colors are allowed. The outline icon mustn't contain any additional padding around the symbol. ### Best practices |
platform | Removing Tab Margins | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/removing-tab-margins.md | - Title: Tab margin changes- -description: Learn how to remove margins around tabs in Microsoft Teams with UI kit. Know extra padding effect, margin size for left, right, top, and bottom. -- Previously updated : 07/21/2022---# Tab margin changes --This document describes how the removal of margins around all tabs in Microsoft Teams enhances your app building experience. It's an enhancement introduced in Teams in 2021. -You can build apps that look more native to Teams by removing the margins around all tabs. Tabs with removed margins align with Microsoft Teams' [UI kit designs](~/tabs/design/tabs.md). Most apps experience enhanced look without margins. ---> [!NOTE] -> This feature is not applicable to mobile clients, as the tabs viewed in the mobile clients don't have margins. --## Guidelines --Tab margins removal affects your Teams apps that use tabs. In such cases, you can add margins around your tab designs where it's required. App designs in production have an extra padding effect, that is, margins provided by Teams and margins provided by the tab. However, the extra padding is only temporary and goes away in a few weeks, leaving only the app's provided padding. --## FAQ --<details> -<summary>Is it OK for app chrome, such as header bar or taskbar, to touch the edges of our designs?</summary> --Yes, it's allowed and Teams encourages such designs that help the app to feel native. -<br> -</details> --<details> -<summary>Is it OK for app content, such as text, logos, and images, to touch the left and right edges of our designs?</summary> --No, you must provide your own padding or margins of all app content to ensure that it doesn't touch the left and right edges of your UI. You can also add margins at the top of your tab, if necessary. -<br> -</details> --<details> -<summary>What's the size of the tab margins that Teams applied previously?</summary> --* Left and right: 20 pixels -* Top: 16 pixels -* Bottom: 0 pixels --<br> -</details> --> [!IMPORTANT] -> -> * All tabs have their margins removed: personal tabs, (group) chat tabs, meeting tabs, and channel tabs. -> * The tab margin removal change applies to all tabs. There is no way to opt-in or opt-out of the change. -> * Tab margins' change can affect tabs that rely on Microsoft Teams to provide margins surrounding their UI. --## See also --* [Build tabs for Teams](../tabs/what-are-tabs.md) -* [Create a personal tab](../tabs/how-to/create-personal-tab.md) -* [Create a channel tab or group tab](../tabs/how-to/create-channel-group-tab.md) |
platform | Manifest Schema Dev Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md | The app manifest describes how the app integrates into the Microsoft Teams platf }, "icons": { "outline": "%FILENAME-32x32px%",- "color": "%FILENAME-192x192px" + "color": "%FILENAME-192x192px", + "color32x32": "%FILENAME-32x32px%" }, "accentColor": "%HEX-COLOR%", "configurableTabs": [ Icons used within the Teams app. The icon files must be included as part of the ||||| |`outline`|2048 characters|✔️|A relative file path to a transparent 32x32 PNG outline icon. The border color must be white.| |`color`|2048 characters|✔️|A relative file path to a full color 192x192 PNG icon.|+|`color32x32`|2048 character| | A relative file path to a full color 32x32 PNG icon with transparent background. Used when the app is pinned in Outlook and Microsoft 365 app.| ## accentColor |
platform | Manifest Schema | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md | The name of your app experience, displayed to users in the Teams experience. For |Name| Maximum size | Required | Description| |||||-|`short`|30 characters|✔️|The short display name for the app.| -|`full`|100 characters|✔️|The full name of the app, used if the full app name exceeds 30 characters.| +|`short`|30 characters|✔️|The short display name for the app. Use `short` property where the space is limited, such as the app header.| +|`full`|100 characters|✔️|The full name of the app, used if the full app name exceeds 30 characters. Use `full` property where there is more space, such as the app catalog or the app details page.| > [!NOTE]-> In the app manifest v1.17 or later the `full` property is required and for app manifest v1.16 or earlier it isn't required. +> +> * In the app manifest v1.17 or later the `full` property is required and for app manifest v1.16 or earlier it isn't required. +> * The `short` property is used across all UI surfaces. ## description |
platform | Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs.md | If you donΓÇÖt use Teams color tokens, your designs will be less scalable and ta ## See also -[Tab margin changes](~/resources/removing-tab-margins.md) +[Build tabs for Teams](../what-are-tabs.md) |
platform | Conversational Tabs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/conversational-tabs.md | You can manually close the conversation view by calling the `closeConversation() microsoftTeams.conversations.closeConversation(); ``` -You can also listen for an event when the users selects **Close (X)** in the conversation view. +You can also listen for an event when the users select **Close (X)** in the conversation view. ```javascript ΓüámicrosoftTeams.conversations.openConversation({ You can also listen for an event when the users selects **Close (X)** in the con |-|-||-|-| |Create Conversational tab| Microsoft Teams tab sample app for demonstrating create conversation tab. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/nodejs) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/csharp/demo-manifest/tab-conversations.zip)| -## Next step --> [!div class="nextstepaction"] -> [Tab margin changes](~/resources/removing-tab-margins.md) - ## See also * [Build tabs for Teams](../what-are-tabs.md) |
platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Explore updates from the previous GA releases listed here. |08/25/2021| Introduced step-by-step guide to create a Teams bot with Single sign-on (SSO) | Add authentication > Bots > [Step-by-step guide to create Teams bot with SSO](sbs-bots-with-sso.yml) | |08/19/2021| Installation update event received when you install a bot to a conversation thread | Build bots > Bot conversations > [Installation update event](bots/how-to/conversations/subscribe-to-conversation-events.md#installation-update-event) | |08/12/2021|Build tabs with Adaptive Cards| Build tabs > [Build tabs with Adaptive Cards](tabs/how-to/build-adaptive-card-tabs.md) |-|08/04/2021|Tabs will no longer have margins surrounding their experiences | Build tabs > [Removing tab margins](resources/removing-tab-margins.md) | |07/08/2021|Teams mobile adds support for apps in meetings | Build apps for Teams meetings > [Build apps for Teams meeting](apps-in-teams-meetings/build-apps-for-teams-meeting-stage.md) | |06/28/2021|Integrate People Picker capability | Integrate with Teams > [Integrate People Picker capability](concepts/device-capabilities/people-picker-capability.md) | |06/25/2021| Introduced step-by-step guide to send proactive messages | Build bots > Bot conversation > Proactive messages > [Step-by-step guide to send proactive messages](sbs-send-proactive.yml) | Discover Microsoft Teams platform features that are in developer preview. You ca Developer preview is a public program that provides early access to unreleased Teams platform features. -**2024 March** +**2024 May** -***March 15, 2023***: [Extend static tabs to channels with a customizable experience.](tabs/what-are-tabs.md) +***May 07, 2024***: You can specify a [32x32 color icon](concepts/build-and-test/apps-package.md#outline-icon) with a transparent background to ensure a consistent appearance when your app runs in Outlook and Microsoft 365. :::column-end::: :::row-end::: Developer preview is a public program that provides early access to unreleased T | **Date** | **Update** | **Find here** | | -- | | -|+| 15/03/2024 | Extend static tabs to channels with a customizable experience. | [Build tabs for Teams](tabs/what-are-tabs.md) | | 12/02/2024 | Build API-based message extension using Developer Portal for Teams. | Build message extension > [Build API-based message extension](messaging-extensions/build-api-based-message-extension.md) | | 06/02/2024 | Introduced `systemDefault` reserved activity type for send activity feed notifications| Build tabs > [Send activity feed notifications](tabs/send-activity-feed-notification.md#requirements-to-use-the-activity-feed-notification-apis)| |25/01/2024| Actions help to integrate your app into your user's workflow by enabling easy discoverability and seamless interaction with the content. | Extend your app across Microsoft 365 > [Actions in Microsoft 365](m365-apps/actions-in-m365.md)| Discover Microsoft Teams platform features that are deprecated. You can now get Teams platform features that aren't available. -* ***April 12, 2024***: The `packageName` property is deprecated as part of manifest v1.17. +* ***April 30, 2024***: In tab experiences, tab margins are deprecated. ++* ***April 12, 2024***: The `packageName` property is deprecated as part of app manifest v1.17. * ***April 10, 2024***: [Location](concepts/device-capabilities/location-capability.md#location-apis) and [Media](concepts/device-capabilities/media-capabilities.md#media-capability-apis) APIs aren't supported in the new Teams client. We recommend using HTML5 Geolocation and Media. |