Updates from: 08/21/2021 03:18:34
Service Microsoft Docs article Related commit history on GitHub Change details
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
# Designing your Microsoft Teams meeting extension
-You can create apps to make meetings more productive. For example, ask people to complete a survey during a call or send a quick reminder that doesnΓÇÖt interrupt the flow of the meeting.
+You can create apps to make meetings more productive. For example, ask people to complete a survey during a meeting or send a quick reminder that doesnΓÇÖt interrupt the flow of the meeting.
## Microsoft Teams UI Kit
In the meeting details, users can select **Add a tab +** to open the app flyout
### Add during a meeting
-# [Desktop](#tab/desktop)
+#### Mobile
-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.
-
+Once app has been 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":::.
-# [Mobile](#tab/mobile)
-After you add the app on the desktop, you can select the app and can use 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, users can add content in the tab. The following example shows a draft survey question that people will answer during the call.
+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.
:::image type="content" source="../../assets/images/apps-in-meetings/before-meeting-tab.png" alt-text="Example shows how to app content in the meeting details before a call." border="false":::
Prior to a meeting, users can add content in the tab. The following example show
|2|**Tab overflow**: Opens tab actions, such as rename and remove.| |3|**iframe**: Displays your app content.|
-### Designing with UI templates
+### Design with UI templates
Use one of the following Teams UI templates to help design your meeting tab:
People might use the in-meeting tab to:
* Create a poll, survey, or task item for the meeting participants. * Display notes relevant to the meeting. For example, information about a sales lead.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/apps-in-meetings/mobile-use-in-meeting-tab.png" alt-text="Example shows how you can present poll content in an in-meeting tab on mobile." border="false"::: -
+#### Desktop
+ ### Anatomy: In-meeting tab
In-meeting dialogs are triggered by a user (such as the meeting organizer) who m
* Submit approvals * Get reminders
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/apps-in-meetings/mobile-use-in-meeting-dialog.png" alt-text="Example shows how you can use an in-meeting dialog on mobile." border="false"::: -
+### Desktop
+ ### Anatomy: In-meeting dialog
To implement, specify the width and height using the [`externalResourceUrl`](~/a
## Use the shared meeting stage
-Shared meeting stage helps meeting participants interact with and collaborate on app content in real-time. For example, users can focus their call on editing a document, brainstorming with a whiteboard, or reviewing a dashboard.
+Shared meeting stage helps meeting participants interact with and collaborate on app content in real-time. For example, users can focus their meeting on editing a document, brainstorming with a whiteboard, or reviewing a dashboard.
Apps shared to the meeting stage occupy the same space as a shared screen. The stage reorients for all meeting participants.
The shared meeting stage is all about collaboration and participation. Here are
:::row::: :::column span="1":::
-**Edit and review**: Dive into dashboards and planning with everyone on the call.
+**Edit and review**: Dive into dashboards and planning with everyone in the meeting.
:::column-end::: :::column span="3":::
For in-meeting dialogs, remove unnecessary content that doesn't help users accom
#### Don't: Introduce unnecessary elements
-A single in-meeting dialog with multiple interactions can distract from the call.
+A single in-meeting dialog with multiple interactions can distract from the meeting.
:::column-end::: :::row-end:::
platform Meeting App Extensibility https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/meeting-app-extensibility.md
The in-meeting dialog box is displayed where you can enter your response as a fe
The following image illustrates the in-meeting side panel:
+# [Desktop](#tab/desktop)
+ ![In-meeting side panel](../assets/images/apps-in-meetings/in-meeting-dialog.png)
+# [Mobile](#tab/mobile)
+
+<img src="../assets/images/apps-in-meetings/sidepanelmobile.png" alt="In-meeting side panel mobile" width="300"/>
+++ The following table describes the behavior of app when it is approved and not approved: |App capability | App is approved | App is not approved |
platform Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/design/bots.md
Bots are conversational apps that perform a specific set of tasks. Based on the <a href="https://dev.botframework.com/" target="_blank">Microsoft Bot Framework</a>, bots communicate with users, respond to their questions, and proactively notify them about changes and other events. They're a great way to reach out. > [!IMPORTANT]
-> Currently, bots are available in Government Community Cloud (GCC) but not available in GCC-High and Department of Defense (DOD).
+> Bots are available in Government Community Cloud (GCC) environments but not GCC High and Department of Defense (DoD) environments.
To guide your app design, the following information describes and illustrates how people can add, use, and manage bots in Teams.
You can find more comprehensive bot design guidelines, including elements that y
Bots are available in chats, channels, and personal apps.
-# [Desktop](#tab/desktop)
+### Mobile
+
+Users can access bots that were added on desktop with an @mention.
++
+### Desktop
Users can add a bot one of the following ways:
Users can add a bot one of the following ways:
:::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":::
-# [Mobile](#tab/mobile)
-
-Users can access bots that were added on desktop with an @mention.
---- ## Introduce a bot ItΓÇÖs critical that your bot introduces itself and describes what it can do. This initial exchange helps people understand what to do with the bot, find out its limitations and, most importantly, get comfortable interacting with it.
ItΓÇÖs critical that your bot introduces itself and describes what it can do. Th
In personal contexts, welcome messages set your bot's tone. The message includes a greeting, what the bot can do, and some suggestions for how to interact. For example, “Try asking me about …”. If possible, these suggestions should return stored responses without having to sign in.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-personal-welcome.png" alt-text="Example shows a bot introduction in a personal app on mobile." border="false"::: -
+#### Desktop
+ ### Welcome message in channels and group chats Your bot's introduction should be slightly different in channels and group chats compared to a personal space (like a personal app). In real life, if you entered a room full of people; youΓÇÖd introduce yourself instead of welcoming everyone whoΓÇÖs already there. Carry that thinking into your bot design.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-group-welcome.png" alt-text="Example shows a bot introduction in a collaborative context on mobile." border="false"::: -
+#### Desktop
+ ### Bot authentication with single sign-on
When a person messages a bot, sign in may be required use all its features. You
DonΓÇÖt forget: In the bot command menu (**What can I do?**), you must also provide a command to sign out.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-sso-example.png" alt-text="Example shows a bot with a sign-in button on mobile." border="false"::: -
+#### Desktop
+ ### Tours
You can include a tour with welcome messages and if the bot responds to somethin
> [!IMPORTANT] > Tours should be accessible without having to sign in.
-#### One-on-one chats
+### One-on-one chats
In a personal app, a carousel can provide an effective overview of your bot and any other features of your app. Including buttons the let users try bot commands is encouraged. For example, **Create a task**.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-tour-personal.png" alt-text="Example shows a bot tour in a one-on-one chat on mobile." border="false"::: --
-#### Channels and group chats
+#### Desktop
-In channels and group chats, a tour should open in a modal (also known as a [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) so it doesnΓÇÖt interrupt ongoing conversations. This also gives you the option to implement role-based views for your tour.
-# [Desktop](#tab/desktop)
+### Channels and group chats
+In channels and group chats, a tour should open in a modal (also known as a [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) so it doesnΓÇÖt interrupt ongoing conversations. This also gives you the option to implement role-based views for your tour.
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-tour-channel.png" alt-text="Example shows a bot tour in a channel on mobile." border="false"::: -
+#### Desktop
+ ## Chat with a bot
You can use bots in the following contexts:
### Anatomy
-# [Desktop](#tab/desktop)
+#### Mobile
|Counter|Description| |-|--| |1|**App name and icon**| |2|**Chat tab**: Opens the space to talk with your bot (applicable only to personal apps).| |3|**Custom tabs**: Opens other content related to your app.|
-|4|**About tab**: Displays basic information about your app.|
-|5|**Chat bubble**: Bot conversations use the Teams messaging framework.|
-|6|**Adaptive Card**: If your bot's responses include Adaptive Cards, the card takes up the full width of the chat bubble.|
-|7|**Command menu**: Displays your bot's standard commands (defined by you).|
+|4|**Chat bubble**: Bot conversations use the Teams messaging framework.|
+|5|**Adaptive Card**: If your bot's responses include Adaptive Cards, the card takes up the full width of the chat bubble.|
-# [Mobile](#tab/mobile)
+#### Desktop
|Counter|Description| |-|--| |1|**App name and icon**| |2|**Chat tab**: Opens the space to talk with your bot (applicable only to personal apps).| |3|**Custom tabs**: Opens other content related to your app.|
-|4|**Chat bubble**: Bot conversations use the Teams messaging framework.|
-|5|**Adaptive Card**: If your bot's responses include Adaptive Cards, the card takes up the full width of the chat bubble.|
--
+|4|**About tab**: Displays basic information about your app.|
+|5|**Chat bubble**: Bot conversations use the Teams messaging framework.|
+|6|**Adaptive Card**: If your bot's responses include Adaptive Cards, the card takes up the full width of the chat bubble.|
+|7|**Command menu**: Displays your bot's standard commands (defined by you).|
### Command menu The command menu provides a list of words or phrases you want your bot to always respond to. The command menu displays above the compose box when someone is conversing with a bot. When a command is selected, it gets inserted into a message. The list of commands should be brief. The menu is only meant to highlight your botΓÇÖs primary features. Keep commands concise, too. For example, create a command called **Help** instead of **Can you please help me**?+ The command menu must always be available regardless of the state of the conversation. :::image type="content" source="../../assets/images/bots/bot-command-menu.png" alt-text="Example shows a bot's command menu." border="false":::
Learn what users say when chatting with your bot. This will be an ongoing, itera
Bots can deliver an exact match to a query or a group of related matches to help with disambiguation. For related matches, group the content using a list card.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-simple-query.png" alt-text="Example shows a simple query interaction with a bot on mobile." border="false"::: -
+#### Desktop
+ ### Multi-turn interactions
While your bot can support complete requests and questions, it should also be ab
In the following examples, the bot responds to each message with options for what might want to do next.
-# [Desktop](#tab/desktop)
---
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-multi-turn.png" alt-text="Example shows a multi-turn interaction with a bot on mobile." border="false":::
+#### Desktop
- ### Reach out to users With proactive messaging, your bot can act like a digest that sends notifications relevant to an individual, group chat, or channel at a specific frequency. A bot may send a message when something has changed in a document or a work item is closed.
-# [Desktop](#tab/desktop)
+#### Mobile
-In the following example, the user gets a toast notification that a bot messaged them in another channel.
+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.
-# [Mobile](#tab/mobile)
+#### Desktop
-In the following example, the user gets a notification that a bot messaged them in another channel.
+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 your bot can create work items, it would be nice to show all those items in a central location inside a tab. See more about [designing tabs](../../tabs/design/tabs.md).
+In personal apps, a tab can complement what your bot can do. For example, if your bot can create work items, it's nice to show all those items in a central location inside a tab. See more about [designing tabs](../../tabs/design/tabs.md).
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/bots/mobile-bot-with-tab.png" alt-text="Example shows how a tab can help organize bot content on mobile." border="false"::: -
+#### Desktop
+ ## Manage a bot
platform Build App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/build-app-overview.md
- Title: Build options for Microsoft Teams app development-
-description: Describe the SDKs, tools, and APIs you can use to build all types of Teams apps.
-
-localization_priority: Normal
--
-# Build options for Microsoft Teams app development
-
-Coming soon ...
platform Add Saas Offer https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/add-saas-offer.md
- Title: Create a SaaS offer for your Teams app
-description: Describes the necessary steps to make a SaaS offering part of a third-party Teams App experience
-keywords: teams app SaaS offer partner center marketplace software service
-
-localization_priority: Normal
---
-# Create a SaaS offer for your Teams app
-
-Adding a Software as a Service (SaaS) offer to your app solution enables you to easily deliver your cloud-based app and enhance the user experience by providing automated upgrades and increased access across platforms. Microsoft Teams apps are free to install in the Teams environment, but some may require users to purchase a SaaS subscription to experience the app's full functionality and scope. SaaS subscriptions can be purchased from a cloud service provider or you can create a monetized SaaS subscription for your Teams app directly through Partner Center or the Commercial Marketplace.
-
-## Getting started with SaaS offers
-
-| Topic | Description| Link |
-||-||
-|**Create a new SaaS offer**|How to create and configure a new SaaS offer in the commercial marketplace.| [Documentation](/azure/marketplace/partner-center-portal/create-new-saas-offer)|
-|**Register a SaaS application** | How to register a SaaS application with Microsoft.| [Documentation](/azure/marketplace/partner-center-portal/pc-saas-registration)|
-|**SaaS offer creation: developer checklist**| Details and guidance for creating a SaaS offer in Partner Center.| [Documentation](/azure/marketplace/partner-center-portal/offer-creation-checklist)|
-|**Commercial marketplace offer: best practices** |Insights for creating effective SaaS offers.|[Documentation](/azure/marketplace/gtm-offer-listing-best-practices)|
-|**Microsoft SaaS fulfillment API (V2)** | Explore the APIs that enable developers to create SaaS offers with Microsoft.| [Documentation](/azure/marketplace/partner-center-portal/pc-saas-fulfillment-api-v2) |
-|**Implement the SaaS fulfillment SDK**| How to implement the necessary components required to enable the SDK including the SaaS Fulfillment API (v2) and Marketplace Metering Service API.| [Get it on GitHub](https://github.com/Azure/Microsoft-commercial-marketplace-transactable-SaaS-offer-SDK/blob/master/docs/Installation-Instructions.md) |
-|**SaaS offer sample code**| View our SaaS offer code samples and SDK.| [Get it on GitHub](https://github.com/Azure/Microsoft-commercial-marketplace-transactable-SaaS-offer-SDK)|
-| **FAQ: SaaS API UX queries** | Find answers to common end-user experience topics.| [Documentation](/azure/marketplace/partner-center-portal/saas-fulfillment-apis-faq) |
-
-> [!div class="nextstepaction"]
-> [Learn how Teams Admins can purchase your app for their organization](/MicrosoftTeams/purchase-third-party-apps)
platform Activity Feed Notifications https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/activity-feed-notifications.md
The activity feed is a surface for users to access their notifications in Microsoft Teams. The feed retains notifications from the past four weeks.
-# [Desktop](#tab/desktop)
-- # [Mobile](#tab/mobile) :::image type="content" source="../../assets/images/activity-feed/mobile-overview.png" alt-text="Example shows an app notification displaying in the Teams activity feed on mobile." border="false":::
+# [Desktop](#tab/desktop)
++ ## Anatomy
Users can manage notifications sent from your app in the Teams settings page.
Each activity generates a system notification. What displays depends on what the user configures in their notification settings. Users can also choose a notification style based on their operating system.
-# [Desktop](#tab/desktop)
+# [Mobile](#tab/mobile)
|Counter|Description| |-|--|
-|1|Teams custom|
-|2|Windows|
-|3|Mac|
+|1|Android|
+|2|iOS|
-# [Mobile](#tab/mobile)
+# [Desktop](#tab/desktop)
|Counter|Description| |-|--|
-|1|Android|
-|2|iOS|
+|1|Teams custom|
+|2|Windows|
+|3|Mac|
platform App Structure https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/app-structure.md
Personal apps provide a large canvas to host your app content for individual use
***Supported scopes**: Personal*
-# [Desktop](#tab/desktop)
-
-The canvas is an iframe so you can completely customize the experience.
--
-# [Mobile](#tab/mobile)
+### Mobile
The canvas is a webview so you can completely customize the experience. :::image type="content" source="../../assets/images/design-guidelines/app-structure-personal-apps-mobile.png" alt-text="Conceptual image showing the front-end areas in Teams that developers can customize for personal apps on mobile." border="false"::: -
+### 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
***Supported scopes**: Channels, Chats, Meetings*
-# [Desktop](#tab/desktop)
-
-The canvas is an iframe so you can completely customize the experience.
--
-# [Mobile](#tab/mobile)
+### Mobile
The canvas is a webview so you can completely customize the experience. :::image type="content" source="../../assets/images/design-guidelines/app-structure-tabs-mobile.png" alt-text="Conceptual image showing the front-end areas in Teams that developers can customize for tabs on mobile." border="false"::: -
+### 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
***Supported scopes**: Personal, Channels, Chats, Meetings*
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/design-guidelines/app-structure-bots-mobile.png" alt-text="Conceptual image showing the front-end areas in Teams that developers can customize for bots on mobile." border="false"::: -
+### Desktop
+ ## Messaging extensions
Messaging extensions are shortcuts for inserting app content or acting on a mess
***Supported scopes**: Personal, Channels, Chats, Meetings*
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/design-guidelines/app-structure-messaging-exetensions-mobile.png" alt-text="Conceptual image showing the front-end areas in Teams that developers can customize for messaging extensions on mobile." border="false"::: -
+### Desktop
+ ## Meeting extensions
Meeting extensions are apps to enhance live meetings. You can host your app cont
***Supported scopes**: Meetings, Chats*
-# [Desktop](#tab/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.
--
-# [Mobile](#tab/mobile)
+### Mobile
The surface is a webview, allowing you to customize the experience, but keep in mind that during meetings these apps use dark theme. :::image type="content" source="../../assets/images/design-guidelines/app-structure-meeting-exetensions-mobile.png" alt-text="Conceptual image showing the front-end areas in Teams that developers can customize for meeting extensions on mobile." border="false"::: -
+### 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/master/msteams-platform/concepts/design/design-teams-app-advanced-ui-components.md
Breadcrumbs are a navigational aid that convey your appΓÇÖs hierarchy. They help
* Communicate hierarchy * Navigation
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-breadcrumb.png" alt-text="Example shows a breadcrumb template on mobile." border="false"::: -
+### Desktop
+ ## Left nav
Use the left nav to browse multiple pages within your Teams tab. In the followin
* Browse multiple pages within a Teams tab. * Break down complex apps into multiple pages.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-left-nav.png" alt-text="Example shows a left nav template on mobile." border="false"::: -
+### Desktop
+ ## Notification bar
A notification bar is a dedicated area for displaying a brief, important message
* Success messages * Informational or promotional messages
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-notification-bar.png" alt-text="Example shows notification bar UI template on mobile." border="false"::: -
+### Desktop
+ ## Stage
Learn how to implement [stage](~/tabs/tabs-link-unfurling.md).
* Display content in a large surface within Teams instead of another app or browser * Spotlight media or other rich content
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
Your app can launch a stage from an Adaptive Card, shared link, or visual components (such as a chart). :::image type="content" source="../../assets/images/ui-templates/mobile-stage.png" alt-text="Example shows a stage template on mobile." border="false"::: -
+### Desktop
+ ## Toolbar
A toolbar is a container for grouping a set of controls.
* Contextual filter and find * Navigation and breadcrumbs
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-toolbar.png" alt-text="Example shows a toolbar template on mobile." border="false"::: -
+### Desktop
+
platform Design Teams App Ui Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-ui-templates.md
A dashboard displays different types of content in a central location (Teams per
* Report metrics * Organize different information in one place
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-dashboard.png" alt-text="Example shows a dashboard UI template on mobile." border="false"::: -
+### Desktop
+ ## Data visualization
You can use different card sizes (single, double, and full) to stack and organiz
* Display complex information * Create a dashboard
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-data-viz.png" alt-text="Example shows a data visualization UI template on mobile." border="false"::: -
+### Desktop
+ ## Empty state
The empty state template can be used for many scenarios, including sign in, firs
* Success messages * Error messages
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-empty-state.png" alt-text="Example shows an empty state UI template on mobile." border="false"::: -
+### Desktop
+ ## Filter
Forms are used to collect, validate, and submit user input in a structured way.
* Settings * User input collection
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-form.png" alt-text="Example shows a form UI template on mobile." border="false"::: -
+### Desktop
+ ## List
You can use a list to display related items in a scannable format and allow user
* Display data * Contextual actions on app content
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-list.png" alt-text="Example shows a list UI template on mobile." border="false"::: -
+### Desktop
+ ## Sign in
You can design app sign-in flows for different Teams contexts and identity provi
* Authenticate users
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-sign-in.png" alt-text="Example shows a sign in UI template on mobile." border="false"::: -
+### Desktop
+ ## Settings
A task board, sometimes called a kanban board or swim lanes, is a collection of
* Brainstorming. Adding ideas in different categories * Sorting exercises. Organizing any kind of information into buckets
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-task-board.png" alt-text="Example shows a task board UI template on mobile." border="false"::: -
+### Desktop
+ ## Wizard
A wizard guides a user through several screens to complete a task (such as a set
* Onboarding * First-run experiences
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/ui-templates/mobile-wizard.png" alt-text="Example shows a wizard UI template on mobile." border="false"::: -
+### Desktop
+
platform Enable App Customization https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/enable-app-customization.md
You can allow customers to customize some aspects of your Microsoft Teams app in the Teams admin center. This feature is supported only for apps published to the Teams store. Sideloaded apps and apps published for an org can't be customized.
-> [!IMPORTANT]
-> Currently, sideloading apps are available in Government Community Cloud (GCC), but are not available for GCC-High and Department of Defense (DOD).
- 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. (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 aren't available in versions prior to 1.10 of the Teams app manifest.
+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 prior to 1.10 of the Teams app manifest.
## Test your app
-You cannot test this feature during development. App customization is not supported for sideloading or publishing to an organization's app catalog.
+You can't test this feature during development. App customization isn't supported when sideloading or publishing to an org's app catalog.
## User considerations
-As the app publisher, provide the following information to customers in Teams admins:
-* Include a note recommending to test customization changes in a Teams test tenant before making changes in their production environment.
-* Provide best practices for how to customize your app.
+Provide guidelines for customers (specifically Teams admins) who want to customize your app. For more information, see [customize apps in Teams](/MicrosoftTeams/customize-apps).
## See also
platform Personal Apps https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/personal-apps.md
You can find comprehensive personal app design guidelines, including elements th
## Add a personal app
-You can add a personal app from the Teams store (AppSource) or the app flyout by selecting the **More** icon on the left side of Teams (shown in the following example).
+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).
:::image type="content" source="../../assets/images/personal-apps/add-from-app-flyout.png" alt-text="Example shows how to add a personal app from the app flyout." border="false"::: ## Use a personal app (private workspace)
-With a private workspace, you can view app content that's meaningful to you in a central location without leaving Teams.
+With a private workspace, users can view app content that's meaningful to them in a central location without leaving Teams.
(Implementation note: The private workspace is based on the [*personal tab*](../../build-your-first-app/build-personal-tab.md) capability.) ### Anatomy: Personal app (private workspace)
-# [Desktop](#tab/desktop)
+#### Mobile
|Counter|Description| |-|--|
-|A|**App attribution**: Your app logo and name.|
+|A|**App attribution**: Your app name.|
|B|**Tabs**: Provides navigation for your personal app.|
-|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.)|
+|C|**More menu**: Includes additional app options and information.|
+|D|**Primary navigation**: Provides navigation to your app other main Teams features.|
|Counter|Description| |-|--| |A|**Tabs**: Provides navigation for your personal app.|
-|1|**iframe**: Displays your app content.|
+|1|**webview**: Displays your app content.|
-# [Mobile](#tab/mobile)
+#### Desktop
|Counter|Description| |-|--|
-|A|**App attribution**: Your app name.|
+|A|**App attribution**: Your app logo and name.|
|B|**Tabs**: Provides navigation for your personal app.|
-|C|**More menu**: Includes additional app options and information.|
-|D|**Primary navigation**: Provides navigation to your app other main Teams features.|
+|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| |-|--| |A|**Tabs**: Provides navigation for your personal app.|
-|1|**webview**: Displays your app content.|
--
+|1|**iframe**: Displays your app content.|
-### Designing with UI templates and advanced components
+### Design with UI templates and advanced components
Use one of the following Teams templates and components to help design your personal tab:
Use one of the following Teams templates and components to help design your pers
## Use a personal app (bot)
-Personal apps can include a bot for one-on-one conversations and private notifications (for instance, when a colleague posts a comment on your artboard). The bot is available in a tab you specify.
+Personal apps can include a bot for one-on-one conversations and private notifications (for instance, when a colleague posts a comment on on artboard). Users interact with the bot in a tab you specify.
### Anatomy: Personal app (bot)
-# [Desktop](#tab/desktop)
--
-|Counter|Description|
-|-|--|
-|A|**Bot tab**: For example, include a **Chat** tab to access bot conversations and notifications.|
-|B|**Bot message**: Bots often send messages and notifications in the form of a card (such as an Adaptive Card).|
-|C|**Compose box**: Input field for sending messages to the bot.|
-
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/personal-apps/mobile-personal-bot-anatomy.png" alt-text="Example shows personal bot component anatomy." border="false":::
Personal apps can include a bot for one-on-one conversations and private notific
|C|**Bot message**: Bots often send messages and notifications in the form of a card (such as an Adaptive Card).| |D|**Compose box**: Input field for sending messages to the bot.| -
+#### Desktop
++
+|Counter|Description|
+|-|--|
+|A|**Bot tab**: For example, include a **Chat** tab to access bot conversations and notifications.|
+|B|**Bot message**: Bots often send messages and notifications in the form of a card (such as an Adaptive Card).|
+|C|**Compose box**: Input field for sending messages to the bot.|
## Manage a personal tab
-On the left side of Teams, users can right click the personal app to pin, remove, and configure other app options.
+On the left side of Teams, users can right-click the personal app to pin, remove, and configure other app options.
:::image type="content" source="../../assets/images/personal-apps/manage-personal-tab.png" alt-text="Example shows options for managing a personal app." border="false":::
platform Understand Use Cases https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/understand-use-cases.md
Above all, remember that nobody likes spam. Blasting away with personal and chan
Identify which new features the user will prefer to have in the current solution. If you have a roadmap for new features to add to the app, the design and architecture will be impacted.
-## See also
-
-* [Choose how to distribute your app](../deploy-and-publish/apps-publish-overview.md)
-* [Design tabs](../../tabs/design/tabs.md)
-* [Design bots](../../bots/design/bots.md)
-* [Build your first Microsoft Teams app](../build-your-first-app/build-first-app-overview.md)
- ## Next step > [!div class="nextstepaction"]
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
You can enrich your Teams app with native device capabilities, such as camera, m
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 messaging 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.
By accessing the device capabilities, you can build richer experiences on the Te
* Use the location information of the user to display relevant information. > [!NOTE]
-> Currently, Teams does not support device permissions for multi window apps, tabs, and the meeting sidepanel.
+> Currently, Teams doesn't support device permissions for multi-window apps, tabs, and the meeting side panel.
## Access device permissions
The [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-cli
While access to these features is standard in modern web browsers, you must inform Teams about the features you use by updating your app manifest. This update allows you to ask for permissions while your app runs on the Teams desktop client.
-> [!NOTE]
+> [!NOTE]
> Currently, Microsoft Teams support for media capabilities and QR barcode scanner capability is only available for mobile clients. ## Manage permissions A user can manage device permissions in Teams settings by selecting **Allow** or **Deny** permissions to specific apps.
-
-# [Desktop](#tab/desktop)
-
-1. Open your Teams app.
-1. Select your profile icon in the upper right corner of the window.
-1. Select **Settings** > **Permissions** from the drop-down menu.
-1. Select your desired settings.
-
- ![Device permissions desktop settings screen](../../assets/images/tabs/device-permissions.png)
# [Mobile](#tab/mobile)
A user can manage device permissions in Teams settings by selecting **Allow** or
![Device permissions mobile settings screen](../../assets/images/tabs/MobilePermissions.png)
+# [Desktop](#tab/desktop)
+
+1. Open your Teams app.
+1. Select your profile icon in the upper right corner of the window.
+1. Select **Settings** > **Permissions** from the drop-down menu.
+1. Select your desired settings.
+
+ ![Device permissions desktop settings screen](~/assets/images/tabs/device-permissions.png)
+ ## Specify permissions
For example:
Notification.requestPermission(function(result) { /* ... */ }); ``` --- * To use the camera or access photo gallery, Teams mobile asks permission when you call `selectMedia()`: ```JavaScript
For example:
/* ... * /}); ```
-# [Desktop](#tab/desktop)
-
- ![Tabs desktop device permissions prompt](~/assets/images/tabs/device-permissions-prompt.png)
# [Mobile](#tab/mobile) ![Tabs mobile device permissions prompt](../../assets/images/tabs/MobileLocationPermission.png)
-* * *
+# [Desktop](#tab/desktop)
+
+ ![Tabs desktop device permissions prompt](~/assets/images/tabs/device-permissions-prompt.png)
++ ## Permission behavior across login sessions
Device permissions are stored for every login session. It means that if you sign
> [!div class="nextstepaction"] > [Integrate location capabilities in Teams](location-capability.md)-
platform Messaging Extension Design https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/design/messaging-extension-design.md
You can add a messaging extension in the following Teams contexts:
* From the Teams store. * In a channel, chat, or meeting (before, during, and after) near the compose box. It's worth noting if you add a messaging extension in one of these places, only you can use it in that context.
-The following example shows how you add a messaging extension in a channel:
+The following examples show how to add a messaging extension in a channel.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-add-in-channel.png" alt-text="Example shows how to add a messaging extension near the compose box in a channel on mobile." border="false"::: -
+### Desktop
+ ## Set up a messaging extension
Authentication isn't mandatory, but if your app is something like a ticket track
For consistency across Teams apps, you can't customize the sign-in screen. If you use single sign-on (SSO) authentication, users are signed in automatically.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-set-up.png" alt-text="Example shows messaging extension setup screen with a sign-in button on mobile." border="false"::: -
+### Desktop
+ ## Types of messaging extensions
Messaging extensions can have search commands, action commands, or both. Your co
With search commands, people can use your messaging extension to quickly find external content and insert into a message. Search commands are commonly made available in the compose box. For example, you can start or add to a discussion by sharing a piece of contentΓÇöwithout ever leaving Teams.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-search-command-type.png" alt-text="Example shows a search-based messaging extension launched from the compose box on mobile." border="false"::: -
+#### Desktop
+ #### Compose box layout options
The compose box and messages or posts are the primary contexts where people use
Once added, users can open your messaging extension by selecting your app icon below the compose box. In these examples, the extension has search and action commands.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-open-from-compose-box.png" alt-text="Example shows how to open a messaging extension from the compose box on mobile." border="false"::: -
+#### Desktop
+ ### From a chat message or channel post Once added, users can select the **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: icon on the chat message or channel post to find your extensionΓÇÖs action commands. Your extension may be listed under **More actions** based on usage.
-> [!NOTE]
-> Support for more actions from a chat message or channel post is not available on Microsoft Teams mobile platform.
- #### Chat message
-# [Desktop](#tab/desktop)
- :::image type="content" source="../../assets/images/messaging-extension/open-from-chat-message.png" alt-text="Example shows how to open a messaging extension from a chat message." border="false":::
-# [Mobile](#tab/mobile)
---- #### Channel post
-# [Desktop](#tab/desktop)
- :::image type="content" source="../../assets/images/messaging-extension/open-from-channel-post.png" alt-text="Example shows how to open a messaging extension from a channel post on mobile." border="false":::
-# [Mobile](#tab/mobile)
---- ## Use a messaging extension The following scenarios show the primary ways people use messaging extensions.
The following scenarios show the primary ways people use messaging extensions.
**1. Select a messaging extension**. Users can search for the content they want to share from the compose box.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-insert-content-search.png" alt-text="Example shows a user searching for content to insert from the compose box on mobile." border="false"::: --
-**2. Insert content**. Once posted, others can reply or select the content to see more information in your app.
+#### Desktop
-# [Desktop](#tab/desktop)
+**2. Insert content**. Once posted, others can reply or select the content to see more information in your app.
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-insert-content-posted.png" alt-text="Example shows a user posting content into a channel conversation on mobile." border="false"::: -
+#### Desktop
+ ### Take action on a message **1. Select a messaging extension**. Your app can include one or more action commands.
-# [Desktop](#tab/desktop)
- :::image type="content" source="../../assets/images/messaging-extension/select-action-command.png" alt-text="Example shows a user selecting a messaging extension action command." border="false":::
-# [Mobile](#tab/mobile)
----
-**2. Complete the action**. Your app can receive and process any content or data sent by the message action. This allows users to remain in their conversation and, the following example, not worry about entering information directly in your app.
-
-# [Desktop](#tab/desktop)
+**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.
:::image type="content" source="../../assets/images/messaging-extension/complete-action-command.png" alt-text="Example on how to take action on a message." border="false":::
-# [Mobile](#tab/mobile)
---- ### Preview links Messaging extensions also allow you to insert rich links from a recognized URL into a message (this capability is called [link unfurling](../../messaging-extensions/how-to/link-unfurling.md).) **1. Paste a recognized link** in the compose box.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-paste-preview-link.png" alt-text="Example shows a user pasting a link in the compost box on mobile." border="false"::: --
-**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.)
+#### Desktop
-# [Desktop](#tab/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](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/messaging-extension/mobile-insert-preview-link.png" alt-text="Example shows how the URL, since it's recognized by your app, includes some rich content in the compose box on mobile." border="false"::: -
+#### Desktop
+ ## Manage a messaging extension
-By right clicking your icon, users can pin, remove, or configure your messaging extension.
+By right-clicking your icon, users can pin, remove, or configure your messaging extension.
## Anatomy ### Messaging extension in the compose box
-The following example is a messaging extension opened from the compose box.
+The following examples show a messaging extension opened from the compose box.
-# [Desktop](#tab/desktop)
+#### Mobile
++
+|Counter|Description|
+|-|--|
+|1|**App name**: Full name of your app.|
+|2|**Action commands menu icon (optional)**: Opens a list of action commands for your messaging extension (if you specify any).
+|3|**Search box**: Allows users to find app content they want to insert.|
+|4|**Tab menu (optional)**: Provides multiple content categories.|
+|5|**Action commands menu (optional)**: Displays list of action commands (if you specify any).|
+|6|**App content**: Primarily to display search results.|
+
+#### Desktop
:::image type="content" source="../../assets/images/messaging-extension/anatomy-compose.png" alt-text="Illustration showing the UI anatomy of a messaging extension in the compose box." border="false":::
The following example is a messaging extension opened from the compose box.
|7|**App content**: Primarily to display search results. The example here is using the list layout (grid layout is another option).| |8|**App logo**: Outline icon of your app logo.|
-# [Mobile](#tab/mobile)
--
-|Counter|Description|
-|-|--|
-|1|**App name**: Full name of your app.|
-|2|**Action commands menu icon (optional)**: Opens a list of action commands for your messaging extension (if you specify any).
-|3|**Search box**: Allows users to find app content they want to insert.|
-|4|**Tab menu (optional)**: Provides multiple content categories.|
-|5|**Action commands menu (optional)**: Displays list of action commands (if you specify any).|
-|6|**App content**: Primarily to display search results.|
--- ### Messaging extension management menu :::image type="content" source="../../assets/images/messaging-extension/anatomy-management-menu.png" alt-text="Illustration showing the UI anatomy of a messaging extension management menu." border="false":::
platform Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs.md
You can add a tab from the Teams store (AppSource) or in one of the following co
* Channel * Meeting (before, during, or after the meeting)
-# [Desktop](#tab/desktop)
-
-The following example shows how users can add a tab in a channel.
--
-# [Mobile](#tab/mobile)
+### Mobile
Users can access tabs by selecting the **More** button in the channel (example below) or chat in which they've been added. :::image type="content" source="../../assets/images/tabs/mobile-design-access-tab.png" alt-text="Example shows a mobile tab being added in a channel." border="false"::: -
+### 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.
:::image type="content" source="../../assets/images/tabs/design-set-up-tab-config.png" alt-text="Example shows a tab configuration modal." border="false":::
-### Anatomy: Tab configuration dialog
+#### Anatomy: Tab configuration dialog
:::image type="content" source="../../assets/images/tabs/test.png" alt-text="Illustration showing the UI anatomy of a tab configuration modal." border="false":::
Use one of the following Teams UI templates to help design your tab setup experi
Tabs provide a full-screen web experience in Teams where you can display collaborative contentΓÇösuch task boards and dashboardsΓÇöand important information.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/tabs/mobile-design-view-tab.png" alt-text="Example shows a mobile tab with a task board." border="false"::: -
+### Desktop
+ ### Anatomy: Tab
-# [Desktop](#tab/desktop)
+#### Mobile
|Counter|Description| |-|--| |1|**Tab name**: Navigation label for your tab.|
-|2|**Tab overflow**: Opens tab actions, such as rename and remove.|
-|3|**Tab chat**: Opens a chat to the right, allowing users to have a conversation next to the content.|
-|4|**iframe**: Displays your app content.|
+|2|**Tab chat**: Opens a chat that allows users to have a conversation next to the content.|
+|3|**webview**: Displays your app content.|
-# [Mobile](#tab/mobile)
+#### Desktop
|Counter|Description| |-|--| |1|**Tab name**: Navigation label for your tab.|
-|2|**Tab chat**: Opens a chat that allows users to have a conversation next to the content.|
-|3|**webview**: Displays your app content.|
--
+|2|**Tab overflow**: Opens tab actions, such as rename and remove.|
+|3|**Tab chat**: Opens a chat to the right, allowing users to have a conversation next to the content.|
+|4|**iframe**: Displays your app content.|
-### Designing a tab with UI templates and advanced components
+### Design a tab with UI templates and advanced components
Use one of the following Teams templates and components to help design your tab experience:
Tabs help facilitate conversations about content in a central location.
Users can automatically post to a channel or chat once theyΓÇÖve added a new tab. This not only notifies team members of the new content and provides a link to tab, it allows people to start talking about the tab.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/tabs/mobile-design-use-tab-channel.png" alt-text="Example shows a mobile tab being discussed in a channel thread." border="false"::: -
+#### Desktop
+ ### Tab chat Users can have a conversation next to the tab content they're viewing. On desktop, the chat opens to the side of the app content.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/tabs/mobile-design-use-tab-side-chat.png" alt-text="Example shows a mobile tab with an in-context chat area." border="false"::: -
+#### Desktop
+ ### Permissions and role-based views
You can include options to rename, remove, or modify a tab.
### Anatomy: Tab menu
-# [Desktop](#tab/desktop)
--
-|Counter|Description|
-|-|--|
-|1|**Settings**: (Optional) Allows users to modify a tabΓÇÖs settings after itΓÇÖs been added.|
-|2|**Rename**: Users can give the tab a name thatΓÇÖs meaningful to the channel, chat, or meeting.|
-|3|**Remove**: Removes the tab from the channel, chat, or meeting.|
-
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/tabs/mobile-design-manage-tab-menu-anatomy.png" alt-text="Illustration showing the UI anatomy of a mobile tab menu." border="false":::
You can include options to rename, remove, or modify a tab.
|4|**Rename**: Users can give the tab a name that's meaningful to the channel, chat, or meeting.| |5|**Delete**: Removes the tab from the channel, chat, or meeting.| -
+#### Desktop
++
+|Counter|Description|
+|-|--|
+|1|**Settings**: (Optional) Allows users to modify a tabΓÇÖs settings after itΓÇÖs been added.|
+|2|**Rename**: Users can give the tab a name thatΓÇÖs meaningful to the channel, chat, or meeting.|
+|3|**Remove**: Removes the tab from the channel, chat, or meeting.|
## Tab notifications and deep linking
platform Design Effective Cards https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/design-effective-cards.md
You also can start designing your Adaptive Cards directly in the browser.
Our largest card. Use for sharing articles or scenarios where an image tells most of the story.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-hero-card.png" alt-text="Example shows an Adaptive Card hero card on mobile." border="false"::: -
+#### Desktop
+ ### Thumbnail Use for sending a simple actionable message.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-thumbnail-card.png" alt-text="Example shows an Adaptive Card thumbnail card on mobile." border="false"::: -
+#### Desktop
+ ### List Use in scenarios where you want the user to pick an item from a list, but the items donΓÇÖt need a lot of explanation.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-list-card.png" alt-text="Example shows an Adaptive Card list card on mobile." border="false"::: -
+#### Desktop
+ ### Digest Use for news digests and round-up posts. Note: We recommend the thumbnail card for a single update or news item.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-digest-card.png" alt-text="Example shows an Adaptive Card digest card on mobile." border="false"::: -
+#### Desktop
+ ### Media Use when you want to combine text and media, like audio or video.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-media-card.png" alt-text="Example shows an Adaptive Card media card on mobile." border="false"::: -
+#### Desktop
+ ### People Best used when you to efficiently convey who's involved with a task.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-people-card.png" alt-text="Example shows an Adaptive Card people card on mobile." border="false"::: -
+#### Desktop
+ ### Request ticket Use to get quick inputs from a user to automatically create a task or ticket.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-request-ticket-card.png" alt-text="Example shows an Adaptive Card request ticket card on mobile." border="false"::: -
+#### Desktop
+ ### Image set Use to send multiple image thumbnails.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-image-set-card.png" alt-text="Example shows an Adaptive Card image set card on mobile." border="false"::: -
+#### Desktop
+ ### Action set Use when you want to the user to select a button, then gather addition user input from the same card.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-action-set-card.png" alt-text="Example shows an Adaptive Card action set card on mobile." border="false"::: -
+#### Desktop
+ ### Choice set Use to gather multiple inputs from the user.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/adaptive-cards/mobile-choice-set-card.png" alt-text="Example shows an Adaptive Card choice set card on mobile." border="false"::: -
+#### Desktop
+ ## Anatomy Adaptive Cards have a lot of flexibility. But at minimum, we strongly suggest including the following components in every card.
-# [Desktop](#tab/desktop)
+#### Mobile
-# [Mobile](#tab/mobile)
+|Counter|Description|
+|-|--|
+|A|**Header**: Make your headers clear and concise.|
+|B|**Body copy**: Convey details that are either too long or not important enough to include in the header.|
+|C|**Primary actions**: As a best practice, include 1-3 primary actions. You can have up to six.|
+#### Desktop
- |Counter|Description| |-|--|
platform Design Teams Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/task-modules/design-teams-task-modules.md
Task modules provide a flexible surface for hosted app experiences. They're buil
They can also be built with the [Adaptive Cards](../../task-modules-and-cards/cards/design-effective-cards.md) framework, which can be a simpler and faster way to facilitate common scenarios (such as forms).
-# [Desktop](#tab/desktop)
--
-|Counter|Description|
-|-|--|
-|1|**App icon**|
-|2|**App name**: Full name of your app.|
-|3|**Header**: Make headers clear and concise. Describe the task you want users to complete.
-|4|**Close button**: Closes the task module. Does not apply unsaved changes in the app content.|
-|5|**iframe**: Responsive space that hosts your app content.|
-|6|**Actions (optional)**: Buttons related to your app content.|
-
-# [Mobile](#tab/mobile)
+### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-task-module-anatomy.png" alt-text="Illustration showing the UI anatomy of a task module on mobile." border="false":::
They can also be built with the [Adaptive Cards](../../task-modules-and-cards/ca
|4|**webview**: Responsive space that hosts your app content.| |5|**Actions (optional)**: Buttons related to your app content.| -
+### Desktop
++
+|Counter|Description|
+|-|--|
+|1|**App icon**|
+|2|**App name**: Full name of your app.|
+|3|**Header**: Make headers clear and concise. Describe the task you want users to complete.
+|4|**Close button**: Closes the task module. Does not apply unsaved changes in the app content.|
+|5|**iframe**: Responsive space that hosts your app content.|
+|6|**Actions (optional)**: Buttons related to your app content.|
## Designing with UI templates
Consider using templates for common layouts inside your task modules. Each one i
Lists work nicely in a task module because they're easy to scan.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-list.png" alt-text="Example list in a task module on mobile." border="false"::: -
+#### Desktop
+ ### Form Task modules are a great place to surface forms with sequential user inputs and inline validation. You can leverage Adaptive Cards as a way to embed form elements.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-form.png" alt-text="Example form in a task module on mobile." border="false"::: -
+#### Desktop
+ ### Sign in Create a focused sign in or sign-up flow with a series of task modules, letting users move easily through sequential steps.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-sign-in.png" alt-text="Example sign in experience in a task module on mobile." border="false"::: -
+#### Desktop
+ ### Media Embed media content in a task module for a focused viewing experience.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-media.png" alt-text="Example media content in a task module on mobile." border="false"::: -
+#### Desktop
+ ### Empty state Use for welcome, error, and success messages.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-empty-state.png" alt-text="Example empty state in a task module on mobile." border="false"::: -
+#### Desktop
+ ### Image gallery Embed a gallery carousel in an iframe (desktop) or webview (mobile).
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+##### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-image-gallery.png" alt-text="Example image gallery in a task module on mobile." border="false"::: -
+##### Desktop
+ ### Poll This example shows poll results launched from an Adaptive Card. The poll can be placed inside a task module, too.
-# [Desktop](#tab/desktop)
--
-# [Mobile](#tab/mobile)
+#### Mobile
:::image type="content" source="../../assets/images/task-module/mobile-poll.png" alt-text="Example poll in a task module on mobile." border="false"::: -
+#### Desktop
+ ## Best practices
platform Design Webhooks Connectors https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/design/design-webhooks-connectors.md
- Title: Design Microsoft Teams webhooks and connectors-
-description: Guidance and best practices for designing webhooks and connectors for Microsoft Teams.
-localization_priority: Normal
---
-# Design webhooks and connectors
-
-Coming soon ...
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
We encourage Teams developers to ask questions, file bugs, submit feature reques
## Get latest updates
-You can get the latest Teams platform updates by configuring to the [RSS feed](/microsoftteams/platform/feed.atom).
+You can get the latest Teams platform updates by configuring to the [RSS feed](https://aka.ms/TeamsPlatformUpdates).
**To configure RSS feed**