Updates from: 05/25/2021 03:10:04
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
You can find more comprehensive design guidelines, including elements that you c
## Add a meeting extension
-You can add a meeting extension before and during meetings. You also can add an app for a specific meeting directly from the Teams store (AppSource).
+Users can add a meeting extension before and during meetings. They also can add an app for a specific meeting directly from the Teams store.
### Add before a meeting
-In the meeting details, select **Add a tab +** to open the app flyout and find apps optimized for meetings.
+In the meeting details, users can select **Add a tab +** to open the app flyout and find apps optimized for meetings.
:::image type="content" source="../../assets/images/apps-in-meetings/add-before-meeting.png" alt-text="Example shows how to add a meeting extension before a meeting." border="false"::: ### Add during a meeting
-In a meeting, select **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: > **Add an app** and choose the app you want.
+# [Desktop](#tab/desktop)
+
+In a meeting, users can select **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: > **Add an app** and choose the app they want.
:::image type="content" source="../../assets/images/apps-in-meetings/add-during-meeting.png" alt-text="Example shows how to add a meeting extension during a meeting." border="false":::
+# [Mobile](#tab/mobile)
+
+In a meeting, users can select **More** :::image type="icon" source="../../assets/icons/teams-client-more.png"::: and choose the app they want.
++++ ## Before a meeting
-Prior to your meeting, you 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, users can add content in the tab. The following example shows a draft survey question that people will answer during the call.
:::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":::
Use one of the following Teams UI templates to help design your meeting tab:
* [Dashboard](../../concepts/design/design-teams-app-ui-templates.md#dashboard): A dashboard is a canvas containing multiple cards that provide an overview of data or content. * [Form](../../concepts/design/design-teams-app-ui-templates.md#form): Forms are for collecting, validating, and submitting user input in a structured way. * [Empty state](../../concepts/design/design-teams-app-ui-templates.md#empty-state): The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more.
-* [Left nav](../../concepts/design/design-teams-app-ui-templates.md#left-nav): The left nav template can help if your tab requires some navigation. In general, you should keep tab navigation to a minimum.
+* [Left nav](../../concepts/design/design-teams-app-advanced-ui-components.md#left-nav): The left nav component can help if your tab requires some navigation. In general, you should keep navigation to a minimum.
## Use an in-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)
+ :::image type="content" source="../../assets/images/apps-in-meetings/use-in-meeting-tab.png" alt-text="Example shows how you can present poll content in an in-meeting tab." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Anatomy: In-meeting tab :::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-anatomy.png" alt-text="Example shows the structural anatomy of an in-meeting tab." border="false":::
In-meeting dialogs are triggered by a user (such as the meeting organizer) who m
* Submit approvals * Get reminders
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/apps-in-meetings/use-in-meeting-dialog.png" alt-text="Example shows how you can use an in-meeting dialog." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Anatomy: In-meeting dialog :::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-anatomy.png" alt-text="Example shows the structural anatomy of an in-meeting dialog." border="false":::
platform Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/design/bots.md
You can find more comprehensive bot design guidelines, including elements that y
## Add a bot
-Bots are available in chats, channels, and personal apps. You can add a bot one of the following ways:
+Bots are available in chats, channels, and personal apps.
-* From the Teams store (AppSource).
+# [Desktop](#tab/desktop)
+
+Users can add a bot one of the following ways:
+
+* From the Teams store.
* Using the app flyout by selecting the **More** icon on the left side of Teams. * With an @mention in the new chat or compose box (the following example shows how you can do this in a group chat). :::image type="content" source="../../assets/images/bots/add-bot-chat-at-mention.png" alt-text="Example shows how to add a bot in a group chat using an @mention." border="false":::
+# [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)
+ :::image type="content" source="../../assets/images/bots/bot-personal-welcome.png" alt-text="Example shows a bot introduction in a personal app." border="false":::
-### Introductions in group chats and channels
+# [Mobile](#tab/mobile)
+
-Your bot's introduction should be slightly different in group chats and channels compared to a personal context (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.
++
+### 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)
:::image type="content" source="../../assets/images/bots/bot-group-welcome.png" alt-text="Example shows a bot introduction in a collaborative context." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Bot authentication with single sign-on When a person messages a bot, sign in may be required use all its features. You can simplify the authentication process using single sign-on (SSO). DonΓÇÖt forget: In the bot command menu (**What can I do?**), you must also provide a command to sign out.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/bots/bot-sso-example.png" alt-text="Example shows a bot with a sign-in button." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Tours You can include a tour with welcome messages and if the bot responds to something like a ΓÇ£helpΓÇ¥ command. A tour is the most effective way to describe what your bot can do. If applicable, theyΓÇÖre also great for describing your appΓÇÖs other features. For example, include screenshots of your messaging extension.
You can include a tour with welcome messages and if the bot responds to somethin
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)
+ :::image type="content" source="../../assets/images/bots/bot-tour-personal.png" alt-text="Example shows a bot tour in a one-on-one chat." border="false":::
+# [Mobile](#tab/mobile)
++++ #### 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.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/bots/bot-tour-channel.png" alt-text="Example shows a bot tour in a channel." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Chat with a bot Bots integrate directly into TeamΓÇÖs messaging framework. Users can chat with a bot to get their questions answered or type commands to have the bot perform a narrow or specific set of tasks. Bots can proactively notify users about changes or updates to your app via chat.
You can use bots in the following contexts:
### Anatomy
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/bots/bot-anatomy.png" alt-text="Example shows a bot's structural anatomy." border="false"::: |Counter|Description|
You can use bots in the following contexts:
|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).
+|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).|
+
+# [Mobile](#tab/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|**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.|
++ ### Command menu
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)
+ :::image type="content" source="../../assets/images/bots/bot-simple-query.png" alt-text="Example shows a simple query interaction with a bot." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Multi-turn interactions While your bot can support complete requests and questions, it should also be able to handle multi-turn interactions. Anticipating possible next steps makes it much easier for people to a complete task flow (rather than expecting them to craft a comprehensive request).
-In the following example, the bot responds to each message with options for what might want to do next:
+In the following examples, the bot responds to each message with options for what might want to do next.
+
+# [Desktop](#tab/desktop)
:::image type="content" source="../../assets/images/bots/bot-multi-turn.png" alt-text="Example shows a multi-turn interaction with a bot." border="false"::: +
+# [Mobile](#tab/mobile)
+++++ ### 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.
-In the following example, a user gets a toast notification that a bot messaged them in another channel:
+# [Desktop](#tab/desktop)
+
+In the following example, the user gets a toast notification that a bot messaged them in another channel.
:::image type="content" source="../../assets/images/bots/bot-proactive-message-toast.png" alt-text="Example shows a toast of a bot proactively messaging a user from another channel." border="false":::
Now in that channel, the user can read their message from the bot.
:::image type="content" source="../../assets/images/bots/bot-proactive-message.png" alt-text="Example shows the user looking at the bot's proactive message." border="false":::
+# [Mobile](#tab/mobile)
+
+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.
++++ ### Use tabs with bots
-A tab can make your bot easier to use. 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. For more information, See [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 would be 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)
:::image type="content" source="../../assets/images/bots/bot-with-tab.png" alt-text="Example shows how a tab can help organize bot content." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Manage a bot Users should be able to change a bot's settings. You can provide this functionality with bot commands, but it's usually more efficient to include all settings in a [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) (as shown in the following example).
platform Channel And Group Conversations https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/channel-and-group-conversations.md
To install the Microsoft Teams bot in a team or group chat, add the `teams` or `groupchat` scope to your bot. This allows all members of the conversation to interact with your bot. After the bot is installed, it has access to metadata about the conversation, such as the list of conversation members. Also, when it is installed in a team, the bot has access to details about that team and the full list of channels.
-Bots in a group or channel only receive messages when they are mentioned `@botname`. They do not receive any other messages sent to the conversation.
+Bots in a group or channel only receive messages when they are mentioned @botname. They do not receive any other messages sent to the conversation. The bot must be @mentioned directly. Your bot does not receive a message when the team or channel is mentioned, or when someone replies to a message from your bot without @mentioning it.
> [!NOTE]
-> The bot must be `@mentioned` directly. Your bot does not receive a message when the team or channel is mentioned, or when someone replies to a message from your bot without @mentioning it.
+> This feature is currently available in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md) only.
+>
+> Using resource-specific consent (RSC), bots can receive all channel messages in teams that it is installed in without being @mentioned. For more information, see [receive all channel messages with RSC](channel-messages-with-rsc.md).
## Design guidelines
Next, you can retrieve mentions using the `entities` object and add mentions to
## Work with mentions
-Every message to your bot from a group or channel contains an @mention with its name in the message text. Ensure that your message parsing handles @mention. Your bot can also retrieve other users mentioned in a message and add mentions to any messages it sends.
+Every message to your bot from a group or channel contains an @mention with its name in the message text. Your bot can also retrieve other users mentioned in a message and add mentions to any messages it sends.
You must also strip out the @mentions from the content of the message your bot receives.
platform Channel Messages With Rsc https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/channel-messages-with-rsc.md
+
+ Title: Receive all channel messages with RSC
+
+description: Receive all channel messages with RSC permissions
+
+localization_priority: Normal
++
+# Receive all channel messages with RSC
+
+> [!NOTE]
+> This feature is currently available in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md) only.
+
+The resource-specific consent (RSC) permissions model, originally developed for Teams Graph APIs, is now extended to bot scenarios.
+
+Currently, bots can only receive user channel messages when they are @mentioned. Using RSC, you can now request team owners to consent for a bot to receive user messages across standard channels in a team without being @mentioned. This capability is enabled by specifying the `ChannelMessage.Read.Group` permission in the manifest of an RSC enabled Teams app. After configuration, team owners can grant consent during the app installation process.
+
+For more information about enabling RSC for your app, see [resource-specific consent in Teams](/microsoftteams/platform/graph-api/rsc/resource-specific-consent#update-your-teams-app-manifest).
+
+## Enable bots to receive all channel messages
+
+The `ChannelMessage.Read.Group` RSC permission is extended to bots. With user consent, this permission allows graph applications to get all messages in a conversation and bots to receive all channel messages without being @mentioned.
+
+## Update app manifest
+
+For your bot to receive all channel messages, RSC must be configured in the Teams app manifest with the `ChannelMessage.Read.Group` permission specified in the `webApplicationInfo` property.
+
+![Update app manifest](~/bots/how-to/conversations/Media/appmanifest.png)
+
+The following is an example of the `webApplicationInfo` object:
+
+* **id**: Your Azure Active Directory (AAD) app ID. This can be the same as your bot ID.
+* **resource**: Any string. This field has no operation in RSC, but must be added and have a value to avoid error response.
+* **applicationPermissions**: RSC permissions for your app with `ChannelMessage.Read.Group` must be specified. For more information, see [resource-specific permissions](/microsoftteams/platform/graph-api/rsc/resource-specific-consent#resource-specific-permissions).
+
+The following code provides an example of the app manifest:
+
+```json
+"webApplicationInfo": {
+"id": "XXxxXXXXX-XxXX-xXXX-XXxx-XXXXXXXxxxXX",
+"resource": "https://AnyString",
+"applicationPermissions": [
+"ChannelMessage.Read.Group"
+ ]
+ }
+```
+
+## Sideload in a team to test
+
+To sideload in a team to test, whether all channel messages in a team with RSC are received without being @mentioned:
+
+1. Select or create a team.
+1. Select the ellipses ●●● from the left pane. The drop-down menu appears.
+1. Select **Manage team** from the drop-down menu. The details appear.
+
+ ![Managing apps in team](~/bots/how-to/conversations/Media/managingteam.png)
+
+1. Select **Apps**. Multiple apps appear.
+1. Select **Upload a custom app** from the lower right corner.
+
+ ![Uploading custom app](~/bots/how-to/conversations/Media/uploadingcustomapp.png)
+
+1. Select the app package from the **Open** dialog box.
+1. Select **Open**.
+
+ ![Selecting app package](~/bots/how-to/conversations/Media/selectapppackage.png)
+
+1. Select **Add** from the app details pop-up, to add the bot to your selected team.
+
+ ![Adding the bot](~/bots/how-to/conversations/Media/addingbot.png)
+
+1. Select a channel and enter a message in the channel for your bot.
+
+ The bot receives the message without being @mentioned.
+
+ ![Bot receives message](~/bots/how-to/conversations/Media/botreceivingmessage.png)
+
+## See also
+
+* [Bot conversations](/microsoftteams/platform/bots/how-to/conversations/conversation-basics)
+* [Resource-specific consent](/microsoftteams/resource-specific-consent)
+* [Test resource-specific consent](/microsoftteams/platform/graph-api/rsc/test-resource-specific-consent)
+* [Upload custom app in Teams](~/concepts/deploy-and-publish/apps-upload.md)
platform Conversation Basics https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/conversation-basics.md
A conversation is a series of messages sent between your Microsoft Teams bot and
A bot behaves differently depending on the conversation it is involved in:
-* Bots in channel and group chat conversations require the user to @ mention the bot to invoke it in a channel.
-* Bots in a one-to-one conversation do not require an @ mention. All messages sent by the user routes to your bot.
+* Bots in channel and group chat conversations require the user to @mention the bot to invoke it in a channel.
+
+* Bots in a one-to-one conversation do not require an @mention. All messages sent by the user routes to your bot.
+
+> [!NOTE]
+> Bots can be enabled to receive all channel messages in a team without being @mentioned using resource-specific consent (RSC) permissions. This feature is currently available in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md) only. For more information, see [receive all channel messages with RSC](channel-messages-with-rsc.md).
For the bot to work in a particular conversation or scope, add support to that scope in the [app manifest](~/resources/schem).
-Each message in a bot conversation is an `Activity` object of type `messageType: message`. When a user sends a message, Teams posts the message to your bot and the bot handles the message. In addition, to define core commands that your bot responds to, you can add a command menu with a drop-down list of commands for your bot. Bots in a group or channel only receive messages when they are mentioned @botname. Teams sends notifications to your bot for conversation events that happen in scopes where your bot is active. You can capture these events in your code and take action on them.
+Each message in a bot conversation is an `Activity` object of type `messageType: message`. When a user sends a message, Teams posts the message to your bot and the bot handles the message. In addition, to define core commands that your bot responds to, you can add a command menu with a drop-down list of commands for your bot. Bots in a group or channel only receive messages when they are mentioned @botname. Teams sends notifications to your bot for conversation events that happen in scopes where your bot is active. You can capture these events in your code and take action on them.
A bot can also send proactive messages to users. A proactive message is any message sent by a bot that is not in response to a request from a user. You can format your bot messages to include rich cards that include interactive elements, such as buttons, text, images, audio, video, and so on. Bot can dynamically update messages after sending them, instead of having your messages as static snapshots of data. Messages can also be deleted using the Bot Framework's `DeleteActivity` method.
platform Build Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-bot.md
Much of the app configurations and scaffolding are set up automatically when you
If you created a tab in another tutorial, the app scaffolding for the bot is different. Unlike tabs, bot development doesn't require you to build any front-end web components or use the Teams JavaScript client SDK. Instead, the scaffolding uses the [Microsoft Bot Framework](https://dev.botframework.com/), which is an open-source SDK for building intelligent, enterprise-grade bots that can work on the web, mobile, and of course Teams!
-The `botActivityHandler.js` file, located in the root directory of your project, is the Teams-specific handler that handles bot activities, such as how the bot responds to specific messages. The app scaffolding provides a `botActivityHandler.js` file located in the root directory of your project, is the Teams specific handler that handles bot activities such as how the bot responds to specific messages.
+The app scaffolding provides a `botActivityHandler.js` file, located in the root directory of your project, is the Teams-specific handler that handles bot activities such as, how the bot responds to specific messages.
## 3. Securely expose your localhost to the internet
platform Teams Developer Portal https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/teams-developer-portal.md
+
+ Title: Manage your apps with the Developer Portal
+description: Learn how to manage your apps using the Developer Portal for Microsoft Teams.
+keywords: getting started developer portal teams
+localization_priority: Normal
++++
+# Manage your apps with the Developer Portal for Microsoft Teams
+
+> [!NOTE]
+> The Developer Portal for Teams is currently in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).
+
+The Developer Portal for Teams is the primary tool for configuring, distributing, and managing your Microsoft Teams apps. With the Developer Portal, you can collaborate with colleagues on your app, set up runtime environments, and much more.
++
+## Register an app
+
+The Developer Portal provides a couple ways to register a Teams app:
+
+* Register a brand new app
+* Import an existing app package
+
+> [!NOTE]
+> If you create an app using the [Microsoft Teams Toolkit for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension), you can manage that app in the Developer Portal.
+
+## Set up an environment
+
+You can configure environments and global variables to help transition your app from your local runtime to production. Global variables are used across all environments.
+
+**To set up an environment**
+
+1. In the Developer Portal, select the app you're working on.
+2. Go to the **Environments** page and select **+ Add an environment**.
+3. Select **+ Add a variable** to create configuration variables for your environment.
+
+**To use variables**
+
+Use the variable names instead of hard-coded values to set your app configurations.
+
+1. Enter `{{` in any field in the Developer Portal. A dropdown with all the variables you've created for the chosen environment along with the global variables appears.
+1. Before downloading your app package (for example, when getting ready to publish to the Teams store), select the environment you want to use. Your app configurations update automatically based on the environment.
+
+## Identify app owners
+
+Each app includes an **Owners** page, where you can share your app registration with colleagues in your org. The **Contributor** role has the same permissions as the **Owner** role except the ability to delete an app.
+
+## Configure your app's capabilities and other important metadata
+
+A Teams app is a web app. Like all web apps, its source code is typically developed in an IDE or code editor and hosted somewhere in the cloud (like Azure).
+
+To install and render your app in Teams, you must include a set of configurations that Teams recognizes. This has traditionally been done by crafting an app manifest, a JSON file that contains all the metadata Teams needs to display your app content. The Developer Portal abstracts this process and includes new features and tooling to help you be more successful.
+
+## Test your app directly in Teams
+
+The Developer Portal provides options for testing and debugging your app:
+
+* On the **Overview** page, you can see a snapshot of whether your app's configurations validate against Teams store test cases.
+* The **Preview in Teams** button lets you launch your app quickly in the Teams client for debugging.
+
+## Distribute your app
+
+From the Developer Portal, use the **Distribute** button to download an app package, publish to your org, or publish to the Teams store.
+
+For more information, see [distribute your Teams app](~/concepts/deploy-and-publish/apps-publish-overview.md).
+
+## Analyze your app's usage
+
+On the **Overview** page, you can see the total number of active users for your app. These metrics are available for apps published to the Teams store or an org's app catalog through Developer Portal and scoped to the app ID.
+
+| Metric | Definition |
+| :--| :|
+| *Monthly R30* | The default usage metric. It shows you the count of unique active users that used your app within that rolling 30-day window in UTC. |
+| *Daily* | Shows you the count of unique active users that used your app in a given day in UTC. |
+| *History* | Monthly and daily usage is shown for the past seven, 30 days, and 60 days. |
+| *Latency* | You should see usage reflected for a given day within 24-48 hours. Usage for new apps can take up to 3-5 days to display.|
+
+## Use tools to create app features
+
+The Developer Portal also includes tools to help you build some key features of Teams apps. Some of these tools include:
+
+* **Scene studio**: Design custom Together mode scenes for Teams meetings.
+* **Adaptive Cards editor**: Create and preview Adaptive Cards to include with your apps.
+* **Microsoft identity platform management**: Register your apps with Azure Active Directory (Azure AD) to help users sign in and provide access to APIs.
platform Activity Feed Notifications https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/activity-feed-notifications.md
+
+ Title: Designing activity feed notifications
+
+description: Learn how to design activity feed notifications for your Teams app and get the Microsoft Teams UI Kit.
+localization_priority: Normal
+++
+# Designing activity feed notifications for your Microsoft Teams app
+
+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)
++++
+## Anatomy
++
+|Counter|Description|
+|-|--|
+|1|**Avatar**: Shows who initiated the activity.|
+|2|**Activity type/app icon**: Depicts the type of activity. For app notifications, the line icon is replaced with an app icon.|
+|3|**Title (first line): Actor + reason**: *Actor*: Name of the user or app that initiated the activity. *Reason*: Describes the activity.|
+|4|**Timestamp**: Shows when the activity happened.|
+|5|**Location (second line)**: Shows where the activity happened in Teams.|
+|6|**Tertiary information (third line)**: Optional. Shows preview text or additional information.|
+
+## Types of activity feed notification cards
+
+The following variants show the kinds of activity feed notification cards you can display. The app logo replaces the user avatar for app-generated notifications.
++
+## Manage activity feed notifications
+
+Users can manage notifications sent from your app in the Teams settings page.
+
+## Related system notifications
+
+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)
++
+|Counter|Description|
+|-|--|
+|1|Teams custom|
+|2|Windows|
+|3|Mac|
+
+# [Mobile](#tab/mobile)
++
+|Counter|Description|
+|-|--|
+|1|Android|
+|2|iOS|
+++
+## Next step
+
+> [!div class="nextstepaction"]
+> [Implement activity feed notifications](/graph/teams-send-activityfeednotifications)
platform App Structure https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/app-structure.md
+
+ Title: Design your app - Understand the app structure
+description: Understand what you can and can't customize in Microsoft Teams when designing your app.
++
+localization_priority: Normal
+
+
+# Understand the Microsoft Teams app structure
+
+When building your app, it's important to know what you can and can't customize in Microsoft Teams. This information can help you better understand which parts of the app experience you control.
+
+The following wireframes show you:
+
+* The surfaces you can customize in each Teams app capability (outlined in blue).
+* The scopes each capability supports.
+
+> [!NOTE]
+> **What does scope mean?** A scope is an area in Teams where people can use your app. Apps can have one or many scopes, including personal, channels, chats, and meetings.
+
+## Personal apps
+
+Personal apps provide a large canvas to host your app content for individual users. The canvas is an iframe so you can completely customize the experience.
+
+***Supported scopes**: Personal*
++
+## Tabs
+
+Tabs provide a large canvas to host your app content for a group of users. You can include tabs in shared spaces such as channels, chats, and meeting invites. The canvas is an iframe so you can completely customize the experience.
+
+***Supported scopes**: Channels, Chats, Meetings*
++
+## Bots
+
+Bots are conversational apps that integrate with Teams native messaging features, so the UI work is handled for you. From a design standpoint, there are still opportunities to add personality, custom functionality, and rich, actionable information with our natural language processing (NLP) support and Adaptive Cards platform.
+
+***Supported scopes**: Personal, Channels, Chats, Meetings*
++
+## Messaging extensions
+
+Messaging extensions are shortcuts for inserting app content or acting on a message without navigating away from the conversation. Action-based messaging extensions give you more control of the experience, while Teams handles much of what renders for search-based messaging extensions.
+
+***Supported scopes**: Personal, Channels, Chats, Meetings*
++
+## Meeting extensions
+
+Meeting extensions are apps to enhance live meetings. You can host your app content in several scenarios, including before, during, and after meetings. The surface is an iframe, allowing you to customize the experience, but keep in mind that these apps are dark themed and narrow during meetings.
+
+***Supported scopes**: Meetings, Chats*
+
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
+
+ Title: Design your app with advanced UI components
+
+description: Learn about the UI components used across Teams .
+
+localization_priority: Normal
++
+# Designing your Microsoft Teams app with advanced UI components
+
+The following components are a combination of [basic UI components](~/concepts/design/design-teams-app-basic-ui-components.md) that you can use for common Teams design situations, such as navigation.
+
+## Microsoft Teams UI Kit
+
+Based on <a href="https://fluentsite.z22.web.core.windows.net/" target="_blank">Fluent UI</a>, the Microsoft Teams UI Kit includes components and patterns that are designed specifically for building Teams apps. In the UI kit, you can grab and insert the components listed here directly into your design and see more examples of how to use each component.
+
+> [!div class="nextstepaction"]
+> [Get the Microsoft Teams UI Kit (Figma)](https://www.figma.com/community/file/916836509871353159)
+
+## Breadcrumb
+
+Breadcrumbs are a navigational aid that convey your appΓÇÖs hierarchy. They help users understand how the page theyΓÇÖre viewing fits into the overall experience and afford one-click access to higher levels in that hierarchy.
+
+### Top use cases
+
+* Communicate hierarchy
+* Navigation
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
++++
+## Left nav
+
+Use the left nav to browse multiple pages within your Teams tab. In the following example, the left nav is between the channel list and tab content.
+
+### Top use cases
+
+* Browse multiple pages within a Teams tab.
+* Break down complex apps into multiple pages.
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
++++
+## Notification bar
+
+A notification bar is a dedicated area for displaying a brief, important messages that do not require the user to take immediate action. Specific background colors and icons are associated with specific types of messages (see below).
+
+### Top use cases
+
+* Critical messages, errors, and warnings
+* Success messages
+* Informational or promotional messages
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
++++
+## Stage
+
+Stage offers a way for users to open an entityΓÇölike an image, file, or websiteΓÇöin Teams instead of opening it in another app or browser. The primary use case of stage is viewing; the surface should not be used for complex interactions.
+
+(Implementation note: Build your stage using a large [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md).)
+
+### Top use cases
+
+* Open an entity in Teams instead of another app or browser
+* Spotlight media or other content
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
+
+Your app can launch a stage from an Adaptive Card, shared link, or visual components (such as a chart).
++++
+## Toolbar
+
+A toolbar is a container for grouping a set of controls.
+
+### Top use cases
+
+* Contextual actions on app content
+* Contextual filter and find
+* Navigation and breadcrumbs
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
+++
platform Design Teams App Basic Ui Components https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-basic-ui-components.md
# Designing your Microsoft Teams app with basic Fluent UI components
-Teams apps are typically built with the following basic Fluent UI components. Designed as flat as possible, these components can work across different use cases, themes, and screen sizes.
+You can build your Teams app from scratch with the following basic Fluent UI components. Designed as flat as possible, these components can work across different use cases, themes, and screen sizes.
The illustrations on this page show how components look in Teams default (light) and dark themes.
platform Design Teams App Fundamentals https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-fundamentals.md
Title: Design your app - Understanding the fundamentals
+ Title: Design your app - Understand the design system
description: Learn about the basics of designing your Microsoft Teams app, including layout, color scheme, and more. localization_priority: Normal
-# Microsoft Teams app design fundamentals
+# Microsoft Teams app design system
Quickly learn about the fundamentals of Teams app design. You can find comprehensive guidance and examples in the <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">Microsoft Teams UI Kit (Figma)</a>.
Quickly learn about the fundamentals of Teams app design. You can find comprehen
Teams relies on a grid layout to ensure consistent and elegant relationships between design components. The gridΓÇÖs 4-pixel base unit allows components to scale consistently across all display sizes in Teams.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full layout guidelines (Figma)</a>
+ * [See full layout guidelines (Figma)](https://www.figma.com/community/file/916836509871353159)
+ * [Implement layout (Fluent UI)](https://developer.microsoft.com/fluentui#/styles/web/layout)
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-layout.png" alt-text="Conceptual image for Microsoft Teams UI Kit." border="false":::
+ :::image type="content" source="../../assets/images/design-guidelines/teams-layout.png" alt-text="Conceptual image of Teams layout." border="false":::
:::column-end::: :::row-end:::
Quickly learn about the fundamentals of Teams app design. You can find comprehen
An avatar is a graphical representation of a person, team, bot, or entity in Teams. An avatar group is often used to convey live activity or a represent a roster in a way that preserves vertical space.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full avatar guidelines (Figma)</a>
+ * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full avatar guidelines (Figma)</a>
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-avatars.png" alt-text="Conceptual image for Teams UI Kit." border="false":::
+ :::image type="content" source="../../assets/images/design-guidelines/teams-avatars.png" alt-text="Conceptual image of Teams avatars." border="false":::
:::column-end::: :::row-end:::
-## Colors
+## Icons
:::row::: :::column span="3":::
- Teams web and desktop supports default (light), dark, and high-contrast themes, while Teams mobile supports light and dark themes. Each theme has its own color scheme.
+ Your app's primary icon can go a long way in conveying your brand to Teams users. Getting your icon design right is also important for [publishing your app](../../concepts/build-and-test/apps-package.md) to the Teams store.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full color guidelines and available color tokens (Figma)</a>
+ You also can use Fluent UI icons throughout your app:
+
+ * <a href="https://www.figma.com/community/file/836835755999342788" target="_blank">Get the latest Fluent icon set (Figma)</a>
+ * [Implement the icons (Fluent UI)](https://developer.microsoft.com/fluentui#/styles/web/icons)
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-color.png" alt-text="Concept image for Microsoft Teams UI Kit." border="false":::
- :::column-end:::
+ :::image type="content" source="../../assets/images/design-guidelines/teams-iconography.png" alt-text="Conceptual image of Teams icons." border="false":::
+
+ :::column-end:::
:::row-end:::
-## Iconography
+## Type
:::row::: :::column span="3":::
- Teams apps use icons provided by Fluent UI.
-
-### Resources
+ Teams uses Segoe UI for its type ramp and different font sizes and weights to help create hierarchy and ensure readability.
- * <a href="https://www.figma.com/community/file/836835755999342788" target="_blank">See the latest Fluent icons (Figma)</a>
- * <a href="https://aka.ms/fluent-ui-icons" target="_blank">Try out Fluent icons (Fluent UI)</a>
- * <a href="https://github.com/microsoft/fluentui-system-icons" target="_blank">Get the Fluent icon library (GitHub)</a>
+ * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full type guidelines (Figma)</a>
+ * [Implement typography (Fluent UI)](https://developer.microsoft.com/fluentui#/styles/web/typography)
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-iconography.png" alt-text="Conceptual illustration for Microsoft Teams UI Kit." border="false":::
+ :::image type="content" source="../../assets/images/design-guidelines/teams-typography.png" alt-text="Conceptual image of Teams typography." border="false":::
:::column-end::: :::row-end:::
-## Typography
+## Colors
:::row::: :::column span="3":::
- Teams uses Segoe UI for its type ramp and different font sizes and weights to help create hierarchy and ensure readability.
+ Teams web and desktop supports default (light), dark, and high-contrast themes, while Teams mobile supports light and dark themes. Each theme has its own color scheme.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full typography guidelines (Figma)</a>
+ * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full color guidelines and available color tokens (Figma)</a>
+ * [Implement colors (Fluent UI)](https://fluentsite.z22.web.core.windows.net/0.51.7/colors)
:::column-end::: :::column span="1":::-
- :::image type="content" source="../../assets/images/design-guidelines/teams-typography.png" alt-text="Conceptual figure for Microsoft Teams UI Kit." border="false":::
-
+ :::image type="content" source="../../assets/images/design-guidelines/teams-color.png" alt-text="Concept image of Teams colors." border="false":::
:::column-end:::+ :::row-end:::
-## Copy and content
+## Shape and elevation
:::row::: :::column span="3":::
- To feel part of Teams, your app copy in general should follow these [Microsoft voice principles](https://docs.microsoft.com/style-guide/brand-voice-above-all-simple-human): warm and relaxed, crisp and clear, and ready to lend hand.
+ You can use shape and elevation to create additional hierarchy in your app.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full copy and content guidelinesΓÇöincluding writing for bots (Figma)</a>
+ * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full shape and elevation guidelines (Figma)</a>
+ * [Implement shape and elevation (Fluent UI)](https://developer.microsoft.com/fluentui#/styles/web/elevation)
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-copy-and-content.png" alt-text="Conceptual picture for Microsoft Teams UI Kit." border="false":::
+ :::image type="content" source="../../assets/images/design-guidelines/shape-and-elevation.png" alt-text="Conceptual of shape and elevation." border="false":::
:::column-end::: :::row-end:::
-## Brand expression
+## Copy and content
:::row::: :::column span="3":::
- Your app icon can go a long way in conveying your brand to Teams users. Getting your icon design right is also important for [publishing your app](../../concepts/build-and-test/apps-package.md) to AppSource.
+ To feel part of Teams, your app copy in general should follow these [Microsoft voice principles](/style-guide/brand-voice-above-all-simple-human): warm and relaxed, crisp and clear, and ready to lend hand.
- <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full brand expression guidelines (Figma)</a>
+ * <a href="https://www.figma.com/community/file/916836509871353159" target="_blank">See full copy and content guidelinesΓÇöincluding writing for bots (Figma)</a>
:::column-end::: :::column span="1":::
- :::image type="content" source="../../assets/images/design-guidelines/teams-branding.png" alt-text="Conceptual form for Microsoft Teams UI Kit." border="false":::
+ :::image type="content" source="../../assets/images/design-guidelines/teams-copy-and-content.png" alt-text="Conceptual image of copy and content." border="false":::
:::column-end::: :::row-end:::
platform Design Teams App Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-overview.md
Title: Designing your custom app
description: Learn how to design Microsoft Teams apps. Resources include the Microsoft Teams UI Kit, best practices, examples, and more. localization_priority: Normal-+ # Designing your Microsoft Teams app
Whether you're a designer, product manager, developer, or maker using low-code tools, these guidelines can help you quickly make the right design decisions for your Microsoft Teams app.
+## Creating a cohesive experience
+
+Designing a Teams app is like designing a conventional web appΓÇöbut also a little different. An effective design highlights your app's unique attributes while fitting naturally with Teams features and contexts.
+
+These guidelines and resources can help you strike that balance. You'll know what to do and what to avoid when designing your Teams app (such as multi-level navigation in a tab).
+ ## Teams app design principles Teams apps help people achieve more together. Use these principles to guide your design.
Text, icons, and images make it clear what the app is for and how to use it.
:::column-end::: :::row-end:::
-## Creating a cohesive experience
-
-Designing a Teams app is like designing a conventional web appΓÇöbut also a little different. An effective design highlights your app's unique attributes while fitting naturally with Teams features and contexts.
-
-These guidelines and resources can help you strike that balance. You'll know what to do and what to avoid when designing your Teams app (such as multi-level navigation in a tab).
-
-## Planning your app
-
-To design a high-quality Teams app, you must first understand what you want your app to do and how you think people will use it. If you haven't already, take some time to properly [plan your app](../../concepts/extensibility-points.md).
-
-## Design fundamentals
+## Teams design system
Learn the [fundamentals of Teams app design](design-teams-app-fundamentals.md), including layout, color schemes, and more.
-## Basic Fluent UI components for Teams
-
-Based on Fluent UI, these are the [core elements for creating familiar Teams interfaces](design-teams-app-basic-ui-components.md).
-
-## UI templates
-
-Quickly create complex, high-fidelity designs with [templates for common Teams use cases and workflows](design-teams-app-ui-templates.md).
- ## App capabilities Understand how people add, use, and manage Teams apps to make the most of each capability in your design.
Understand how people add, use, and manage Teams apps to make the most of each c
* [Messaging extensions](../../messaging-extensions/design/messaging-extension-design.md) * [Bots](../../bots/design/bots.md) * [Meeting extensions](../../apps-in-teams-meetings/design/designing-apps-in-meetings.md)
-* [Task modules](../../task-modules-and-cards/task-modules/design-teams-task-modules.md)
-* [Adaptive Cards](../../task-modules-and-cards/cards/design-effective-cards.md)
-## App customization
+## UI templates
+
+Quickly create complex, high-fidelity designs with [templates for common Teams use cases and workflows](design-teams-app-ui-templates.md).
-Understand how the Teams admin can customize or rebrand the app based on the organization's need. This customization is enabled if you define the `configurableProperties` in the manifest schema. For more information, see [Customize apps in Microsoft Teams](/MicrosoftTeams/customize-apps).
+## Basic UI components
-> [!NOTE]
-> App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. For example, if the Teams admin customizes the name of an app from *Contoso* to *Contoso Agent*, then the app will appear with the new name *Contoso Agent* to users. However, while adding a connector to a chat, in the list the connectors will still show the name of the app as *Contoso*.
->
-> As a best practice, you must provide customization guidelines for app users and customers to follow when customizing your app. For more information, see [customize apps in Microsoft Teams](/MicrosoftTeams/customize-apps).
+Based on Fluent UI, these are the [core elements](design-teams-app-basic-ui-components.md) you can use to create Teams experiences from scratch.
## Tools and samples
Import these templates and related components directly into your Teams app proje
### Sample app
-Install a sample app to see how UI templates look and behave within Teams contexts.
+You can upload a sample app to see how apps should look and behave in the Teams client.
> [!div class="nextstepaction"] > [Get the sample app (GitHub)](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts)
To learn more, try one of the following resources:
### Fluent UI documentation
-Get code samples and implementation details for the Fluent UI-based components used to build Teams experiences.
+Get code samples and implementation details for the basic Fluent UI components used to build Teams experiences.
> [!div class="nextstepaction"] > [Try Teams UI components (Fluent UI)](https://fluentsite.z22.web.core.windows.net/)
platform Design Teams App Process https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-process.md
+
+ Title: App design process
+
+description: Get a general idea of how and when you might use Microsoft tools and resources to design an effective Microsoft Teams app.
+localization_priority: Normal
+++
+# Design process for Microsoft Teams apps
+
+There are multiple tools and resources for designing your Microsoft Teams app. The following steps describe when and how you might use these during the design process. (Some of steps might be technically outside the design process but are included for additional context.)
++
+## Plan your app
+
+Designing a high-quality Teams app requires understanding what you want the app to do and how you think people will use it. Before you start designing, however, answer the following questions:
+
+* Who are your users?
+* WhatΓÇÖs their problem?
+* How can your app solve their problem?
+* How often will your app be used?
+* How many people will use your app?
+* What kind of return on investment can your app provide?
+
+For more information, see [understand your appΓÇÖs use cases](~/concepts/design/understand-use-cases.md) and [map use cases to Teams](~/concepts/design/map-use-cases.md).
+
+## Get Teams design tools
+
+Microsoft provides tools to make it easier to design your Teams app. At minimum, we strongly recommend using the Microsoft Teams UI Kit.
+
+### Get the Microsoft Teams UI Kit
+
+The Microsoft Teams UI Kit can help you develop an effective Teams app in the shortest amount of time. The UI kit has everything you see in these docs related to Teams app design and much more, including extensive examples and variations.
+
+The UI kit also has pre-built templates and components that you can copy and modify as needed, so you can spend more time designing the best user experience instead worrying about what a button should look like.
+
+> [!TIP]
+> **Is the UI kit for me?** If you have any part in creating a Teams app, yes. Understanding how to craft a Teams app is not only helpful to designers but product managers, developers using IDEs, and makers building with low-code tools (such as the Microsoft Power Platform).
+
+1. Go to the [Microsoft Teams UI Kit Figma page](https://www.figma.com/community/file/916836509871353159).
+1. Select **Duplicate** to open the UI kit. (You may have to first create a Figma account.)
+
+### Try the sample app
+
+You can upload a sample app to see how apps should look and behave in the Teams client.
+
+> [!div class="nextstepaction"]
+> [Get the sample app (GitHub)](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts)
+
+## Learn Teams design system
+
+Read in depth about or at least familiarize yourself with the [fundamentals of Teams app design](design-teams-app-fundamentals.md), including layout, color schemes, and more.
+
+## Choose app capabilities
+
+After the planning phase, you can determine which Teams capabilities fit your appΓÇÖs use cases. For example, if you want to proactively notify people, a bot might be the right capability.
+
+The UI kit has pre-built designs that show you how people typically add, set up, use, and manage each capability. For quick reference, this information is also in these docs, but with the UI kit you can copy and paste any of these designs into your appΓÇÖs design.
+
+1. In the UI kitΓÇÖs left nav, go to **App capabilities** and select the capability you want for your app.
+1. Copy what you need from that page to design your app.<br />
+ For example, if your app supports authentication with single sign-on, copy and paste the design for handling that exact scenario.
+
+## Design your UX flow
+
+Once you have a basic app design, you can modify and refine it as much as you want (and quickly) by copying Teams UI templates and basic components from the UI kit.
+
+### Design with UI templates
+
+UI templates are complex, high-fidelity designs for common Teams use cases and workflows. Instead of starting from the bottom up with basic components, we recommend you use these templates to simplify and speed up the design process.
+
+1. In the UI kitΓÇÖs left nav, go to **UI templates**.
+1. Copy templates that make sense for your app design.<br />
+ For example, if youΓÇÖre designing a personal app, you may want to use a Dashboard template.
+
+### Design with basic UI components
+
+Based on Fluent UI, these are the core elements for creating familiar Teams interfaces. Use these components if a UI template is missing something you need or you just want to design your app from scratch.
+
+1. In the UI kitΓÇÖs left nav, go to **Basic UI components**.
+1. Copy the components you need for your app design (for example, a button or toggle).
+
+## Implement your design
+
+The design is done and youΓÇÖre ready to start building. The following tools can help simplify the front-end development of your app.
+
+### Build with UI templates
+
+If you used UI templates in your design, you can implement these templates with the Microsoft Teams UI Library (a React component library based on Fluent UI).
+
+Currently, not all templates listed in the UI kit are available in the library.
+
+> [!div class="nextstepaction"]
+> [Get the library (GitHub)](https://github.com/OfficeDev/microsoft-teams-ui-component-library)
+
+### Build with basic UI components
+
+Not unlike the design phase, you can use these Fluent UI components in your app project if a UI template is missing something you need, or you just want to build the app from scratch.
+
+(Note: If you notice something missing or have an idea for a template, consider contributing to the Teams UI Library repo.)
+
+> [!div class="nextstepaction"]
+> [Get the library (Fluent UI)](https://fluentsite.z22.web.core.windows.net/)
+
+## Review design resources
+
+Whether youΓÇÖre just starting on your app or close to a production-ready app, we recommend that you periodically review the following resources:
+
+* **Microsoft Teams store validation guidelines**: Provides standards that all Teams apps should strive for (not just apps listed in the store). For more information, see the [guidelines](~/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md).
+* **Design best practices**: These docs and the UI kit provide best practices for designing high-quality apps. For example, see the [best practices for designing bots](~/bots/design/bots.md#best-practices).
platform Design Teams App Ui Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-ui-templates.md
Install a sample app to see how UI templates look and behave within Teams contex
> [!div class="nextstepaction"] > [Get the sample app (GitHub)](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts)
-## List
-
-You can use a list to display related items in a scannable format and allow users to take actions on an entire list or individual items.
--
-### Top use cases
-
-* Display data
-* Contextual actions on app content
- ## Dashboard A dashboard displays different types of content in a central location (Teams personal app or tab). Users should be able to customize at least some of what they see on a dashboard. - ### Top use cases * Analyze data * Report metrics * Organize different information in one place
-## Form
+# [Desktop](#tab/desktop)
-Forms are used to collect, validate, and submit user input in a structured way. Clear labeling and logical groupings of input fields are critical for a good user experience.
+# [Mobile](#tab/mobile)
-### Top use cases
-* Sign in
-* User profiles
-* Settings
-* User input collection
+
-## Sign in
+## Data visualization
-You can design app sign-in flows for different Teams contexts and identity providers. The following example includes single sign-on (SSO), which we recommend for the simplest authentication experience.
+You can use different card sizes (single, double, and full) to stack and organize data visualizations on the same page. The cards scale to fit the column layout and fill in blank spaces.
+### Top use cases
-### Top use case
+* Display complex information
+* Create a dashboard
-* Authenticate users
+# [Desktop](#tab/desktop)
-## Task board
-A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. It can also be used to sort any type of content into categories. You can edit and move the cards between columns.
+# [Mobile](#tab/mobile)
-### Top use cases
+
-* Project management: Assigning tasks and tracking status.
-* Brainstorming: Adding ideas in different categories.
-* Sorting exercises: Organizing any kind of information into buckets.
+## Empty state
-## Data visualization
+The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more. ItΓÇÖs highly flexibleΓüáΓÇöadapt it to use one, a few, or all of the components in the following design.
-You can use different card sizes (single, double, and full) to stack and organize data visualizations on the same page. The cards scale to fit the column layout and fill in blank spaces.
+### Top use cases
+* Sign in
+* Welcome messages and first-run experiences
+* Success messages
+* Error messages
-### Top use cases
+# [Desktop](#tab/desktop)
-* Display complex information
-* Create a dashboard
-## Wizard
+# [Mobile](#tab/mobile)
-A wizard guides a user through several screens to complete a task (such as a setup process).
++
+## Filter
+
+A filter allows you to reduce the information you see based on the criteria selected. You can include filters with tables, lists, cards, and other components that organize content.
### Top use cases
-* Setup
-* Onboarding
-* First-run experiences
+Organizing content in:
-## Empty state
+* Lists
+* Tables
+* Dashboards
+* Data visualization
-The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more. ItΓÇÖs highly flexibleΓüáΓÇöadapt it to use one, a few, or all of the components in the following design.
+## Form
+
+Forms are used to collect, validate, and submit user input in a structured way. Clear labeling and logical groupings of input fields are critical for a good user experience.
### Top use cases * Sign in
-* Welcome messages and first-run experiences
-* Success messages
-* Error messages
+* User profiles
+* Settings
+* User input collection
+
+# [Desktop](#tab/desktop)
+
-## Notification bar
+# [Mobile](#tab/mobile)
-A notification bar is a dedicated area for displaying a brief, important messages that do not require the user to take immediate action. Specific background colors and icons are associated with specific types of messages (see below).
++
+## List
+
+You can use a list to display related items in a scannable format and allow users to take actions on an entire list or individual items.
### Top use cases
-* Critical messages, errors, and warnings
-* Success messages
-* Informational or promotional messages
+* Display data
+* Contextual actions on app content
-## Left nav
+# [Desktop](#tab/desktop)
-Use the left nav to browse multiple pages within your Teams tab. In the following example, the left nav is between the channel list and tab content.
+# [Mobile](#tab/mobile)
-### Top use cases
-* Browse multiple pages within a Teams tab.
-* Break down complex apps into multiple pages.
+
-## Breadcrumb
+## Sign in
+
+You can design app sign-in flows for different Teams contexts and identity providers. The following example includes single sign-on (SSO), which we recommend for the simplest authentication experience.
-Breadcrumbs are a navigational aid that convey your appΓÇÖs hierarchy. They help users understand how the page theyΓÇÖre viewing fits into the overall experience and afford one-click access to higher levels in that hierarchy.
+### Top use case
+* Authenticate users
-### Top use cases
+# [Desktop](#tab/desktop)
-* Communicate hierarchy
-* Navigation
-## Toolbar
+# [Mobile](#tab/mobile)
-A toolbar is a container for grouping a set of controls.
++
+## Settings
+
+Settings screens are where users can configure their preferences with your app. (Note: Settings is a container for [basic UI components](~/concepts/design/design-teams-app-basic-ui-components.md).)
+
+### Top use case
+
+* Manage app features
++
+## Task board
+
+A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. It can also be used to sort any type of content into categories. You can edit and move the cards between columns.
### Top use cases
-* Contextual actions on app content
-* Contextual filter and find
-* Navigation and breadcrumbs
+* Project management. Assigning tasks and tracking status
+* Brainstorming. Adding ideas in different categories
+* Sorting exercises. Organizing any kind of information into buckets
+
+# [Desktop](#tab/desktop)
-## Stage
-Stage offers a way for users to open an entityΓÇölike an image, file, or websiteΓÇöin Teams instead of opening it in another app or browser. The primary use case of stage is viewing; the surface should not be used for complex interactions.
+# [Mobile](#tab/mobile)
-(Implementation note: Build your stage using a large [task module](../../task-modules-and-cards/task-modules/design-teams-task-modules.md).)
++
+## Wizard
+
+A wizard guides a user through several screens to complete a task (such as a setup process).
### Top use cases
-* Open an entity in Teams instead of another app or browser.
-* Spotlight media or other content.
+* Setup
+* Onboarding
+* First-run experiences
+
+# [Desktop](#tab/desktop)
++
+# [Mobile](#tab/mobile)
+++
platform Enable App Customization https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/enable-app-customization.md
+
+ Title: Enable admins to customize your app
+
+description: Understand how Teams admins can customize your app for their org.
+localization_priority: Normal
+++
+# Enable orgs to customize your Microsoft Teams app
+
+You can allow orgs (specifically Teams admins) to customize some aspects of your Microsoft Teams app. Some possible examples include:
+
+* Changing the app's accent color to match the 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 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` in your app manifest.) For more information, see [customize apps in Microsoft Teams](/MicrosoftTeams/customize-apps).
+
+## Best practices
+
+Provide guidelines for customers who want to customize your app. For more information, see [customize apps in Microsoft Teams](/MicrosoftTeams/customize-apps).
platform Personal Apps https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/personal-apps.md
With a private workspace, you can view app content that's meaningful to you in a
### Anatomy: Personal app (private workspace)
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/personal-apps/personal-tab-component-anatomy.png" alt-text="Example shows personal tab's component anatomy." border="false"::: |Counter|Description| |-|--| |A|**App attribution**: Your app logo and name.|
-|B|**Tabs**: Provides navigation for your personal app. For example, include an **About** or **Help** tab.|
+|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 information and options. (You could alternatively make **Settings** a tab.)|
+|D|**More menu**: Includes additional app options and information. (You could alternatively make **Settings** a tab.)|
:::image type="content" source="../../assets/images/personal-apps/personal-tab-structural-anatomy.png" alt-text="Example shows personal tab's structural anatomy." border="false":::
With a private workspace, you can view app content that's meaningful to you in a
|A|**Tabs**: Provides navigation for your personal app.| |1|**iframe**: Displays your app content.|
-### Designing with UI templates
+# [Mobile](#tab/mobile)
++
+|Counter|Description|
+|-|--|
+|A|**App attribution**: Your app 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.|
+
-Use one of the following Teams UI templates to help design your personal tab:
+|Counter|Description|
+|-|--|
+|A|**Tabs**: Provides navigation for your personal app.|
+|1|**webview**: Displays your app content.|
+++
+### Designing with UI templates and advanced components
+
+Use one of the following Teams templates and components to help design your personal tab:
* [List](../../concepts/design/design-teams-app-ui-templates.md#list): Lists can display related items in a scannable format and allow users to take actions on an entire list or individual items. * [Task board](../../concepts/design/design-teams-app-ui-templates.md#task-board): A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. * [Dashboard](../../concepts/design/design-teams-app-ui-templates.md#dashboard): A dashboard is a canvas containing multiple cards that provide an overview of data or content. * [Form](../../concepts/design/design-teams-app-ui-templates.md#form): Forms are for collecting, validating, and submitting user input in a structured way. * [Empty state](../../concepts/design/design-teams-app-ui-templates.md#empty-state): The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more.
-* [Left nav](../../concepts/design/design-teams-app-ui-templates.md#left-nav): The left nav template can help if your tab requires some navigation. In general, you should keep tab navigation to a minimum.
+* [Left nav](~/concepts/design/design-teams-app-advanced-ui-components.md#left-nav): The left nav component can help if your personal app requires some navigation. In general, you should keep navigation to a minimum.
## Use a personal app (bot)
Personal apps can include a bot for one-on-one conversations and private notific
### Anatomy: Personal app (bot)
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/personal-apps/personal-bot-anatomy.png" alt-text="Example shows personal bot component anatomy." border="false"::: |Counter|Description|
Personal apps can include a bot for one-on-one conversations and private notific
|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)
++
+|Counter|Description|
+|-|--|
+|A|**Bot entry point**: Entry point for users to access the bot feature in your personal app.|
+|B|**Back button**: Takes users back to the private workspace.|
+|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.|
+++ ## 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.
platform Understand Use Cases https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/understand-use-cases.md
Identify which new features the user will prefer to have in the current solution
## See also
-* [Choose how to distribute your app](../deploy-and-publish/overview.md)
+* [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)
platform Tdp Configuration https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/tdp-configuration.md
+
+ Title: App configuration in Developer Portal
+description: Learn how to configure and manage your apps using the Developer Portal for Microsoft Teams
+keywords: getting started developer portal teams
+localization_priority: Normal
+++
+# App configuration
+
+The most significant part of a Microsoft Teams app package is its manifest.json file. This file must conform to the [Teams App schema](~/resources/schem). The manifest.json file contains metadata, which allows Teams to correctly present your app to users.
+
+You can perform the following actions in the **Configure** section of the Developer Portal:
+
+* Create an app package easily.
+* Describe the app.
+* Upload your icons.
+* Produce a .zip file for easy distribution.
+
+> [!NOTE]
+> Developer Portal does not produce functional code for your app, or host your app. Your app must already be hosted and running at the URL listed in the manifest for the app upload process to result in a working app.
++
+## Basic information and Branding
+
+The **Basic information** and **Branding** sections define the high-level description of the app you are making. This includes the appΓÇÖs name, description, and visual branding. The information in this section will be used in your app's Teams store listing and app installation dialogue.
+
+## Capabilities
+
+The **Capabilities** section of Configuration has the app's capabilities details listed.
+
+> [!NOTE]
+> The app customization feature is currently available in the developer preview only.
+>
+> As a best practice, you must provide customization guidelines for app users and customers to follow when customizing your app. For more information, see [customize apps in Microsoft Teams](/MicrosoftTeams/customize-apps).
+
+Following are the capabilities:
++
+* **Personal app**
+
+ This section lets you define a set of tabs that are presented by default in the personal app experience, that is, the experience a user has with your app outside the context of a team or channel. In this section, provide the following details:
+
+ * The tab name.
+ * A unique identifier.
+ * The URL that points to the UI to be displayed in Teams.
+ * The URL to use if a user opts to view the tab in a browser. This is an optional information.
+ * Any additional domains from which the tab expects to load from or link to.
+
+* **Group and channel app**
+
+ A Teams tab becomes part of a channel and provides quick access to team information and resources. For example, the Planner tab for a channel contains a single plan, the Power BI tab maps to a specific report. Users can drill down to the relevant context, but they should not be able to navigate outside the tab. The Power BI tab, for instance, doesn't enable navigation to other Power BI reports, but it does enable the **Go to website** button that launches the report in the main Power BI website.
+
+ > [!NOTE]
+ > For team tabs, you must provide a Configuration URL to present options and gather information, that would help you to customize the content and experience of your tab. This iframed HTML page is displayed when a user first adds the tab to a channel.
+ > You must also provide any additional domains that the tab expects to load from or link to.
+
+* **Bot**
+
+ This section allows you to add a [conversational bot](~/bots/what-are-bots.md) to your app. If you already have a bot registered with Bot Framework, you can add that bot by clicking **Set Up** and supplying the bot's name, Bot Framework ID, and defining the scopes in which the bot will work.
+
+ If you have not registered the bot with the Bot Framework yet, click **Register** to create a new one. After you have registered your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.
+
+ After you have supplied your bot's information, you can now optionally define a list of commands that your bot can suggest to users. Add the name of the command, a description of the command which indicates its syntax and arguments, and the scope(s) to which this command should apply.
+
+ Note that if you have defined your bot to only support one scope, commands specified for the unsupported scope will be ignored. You can edit the scopes your bot supports at any time.
+
+* **Connector**
+
+ This section allows you to add a connector to your app. If you already have registered an Office 365 connector, select **Set up** and enter the name and ID of the connector. If you want a new connector click **Register** to be taken to the Connector Developer Dashboard in your browser.
+
+ > [!NOTE]
+ > App customization enables admins to change the look-and-feel of the apps loaded through bots, messaging extensions, tabs, and connectors. For example, if the Teams admin customizes the name of an app from `Contoso` to `Contoso Agent`, then the app will appear with the new name `Contoso Agent` to the users. However, while adding a connector to a chat, in the list, the connectors will still show the name of the app as `Contoso`.
+
+* **Messaging Extensions**
+
+ [Messaging extensions](~/messaging-extensions/what-are-messaging-extensions.md) are a powerful way for users to engage with your app within Microsoft Teams. Users can query for information from your service and post that information in the form of cards, right into the channel or chat conversation.
+
+ Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. Otherwise, click *Register* to create one and enter the information afterward. Select whether the configuration of a messaging extension can be updated by the user.
+
+ After you have the underlying bot configured, define the commands and parameters which the messaging extension can accept.
+
+ Each command requires a title and an ID. The command can optionally contain a description for the user. Each command can support up to five parameters, each of which requires the following:
+
+ * The name of the parameter as it appears in the Teams client and is included in the user request.
+ * A user-friendly title.
+ * An optional description.
+
+ > [!NOTE]
+ > To create messaging extension using app studio, see [create messaging extension using app studio](~/resources/create-messaging-extension-using-appstudio.md).
+
+* **Meeting extension**
+
+ //TODO: Rajesh R.
+
+* **Scene**
+
+ Scenes in Together Mode is an artifact created by the scene developer using the Microsoft Scene studio that brings people together along with their video stream in a creative setting as conceived by the scene creator. In a conceived scene setting, participants have designated seats with video streams rendered in those seats. For more information, see [Teams Together Mode](~/apps-in-teams-meetings/teams-together-mode.md).
+
+## Permissions
+
+You can enrich your Teams app with native device capabilities, such as camera, microphone, and location.
+
+## Languages
+
+Set up or change the languages that your app supports.
+
+## Single Sign-On
+
+Configure your app to authenticate users with single sign-on (SSO).
+
+## Domains
+
+A list of valid domains for websites the app expects to load within the Teams client. Domain listings can include wildcards, for example, `*.example.com`. This matches exactly one segment of the domain; if you need to match `a.b.example.com` then use `*.*.example.com`. If your tab configuration or content UI needs to navigate to any other domain besides the one use for tab configuration, that domain must be specified here.
+
+It is not necessary to include the domains of the identity providers you want to support in your app. For example, to authenticate using a Google ID, it is required to redirect to accounts.google.com, however, you must not include accounts.google.com in `validDomains[]`.
+
+Teams apps that require their own sharepoint URLs to function well, includes "{teamsitedomain}" in their valid domain list.
+
+> [!IMPORTANT]
+> Do not add domains that are outside your control, either directly or through wildcards. For example, `yourapp.onmicrosoft.com` is valid, however, `*.onmicrosoft.com` is not valid.
+
+The object is an array with all elements of the type `string`.
+
+## Advanced
+//Todo by Karthig
+
+### App content
+//Todo by Karthig
+
+### First party settings
+//Todo by Karthig
+
+## See also
+
+* [Overview of Teams Developer Portal](~/concepts/build-and-test/teams-developer-portal.md)
+* [Distribute Teams Developer Portal](~/concepts/tdp-distribute.md)
+* [Tools in Teams Developer Portal](~/concepts/tdp-tools.md)
platform Tdp Distribute https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/tdp-distribute.md
+
+ Title: Distribute your apps
+description: Learn how to distribute your apps using the Developer Portal for Microsoft Teams.
+keywords: getting started developer portal teams
+localization_priority: Normal
+++
+# Distribute your apps
+
+## Distribute
+
+After you have finished defining your application, the **Distribute** section allows you to export your appΓÇÖs definition as a zip file which then can be shared and uploaded into the Teams client for testing. Clicking export downloads the zip file as **appname.zip** in your default download directory.
++
+### Manifest
+
+The manifest describes how your app is configured, including its capabilities, required resources, and other important attributes. See [manifest schema](~/resources/schem) for more information.
+
+### Flights
+
+Control who gets app updates. For example, you can release an update to Microsoft employees to identify and fix bugs before releasing it to the public. Select **Create a New Request** to create a new flight request.
+
+### Publish to org
+
+Make your app available to people in your org. Once approved by your IT admin, your app will be featured in Teams under Apps > Built for your org.
+
+### Publish your app to Teams store
+
+On your project home page, you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users. Your IT admin will review these submissions. You can return to the **Publish** page to check on your submission status and learn if your app was approved or rejected by your IT admin. This is also where you'll come to submit updates to your app or cancel any currently active submissions.
+
+## See also
+
+* [Overview of Teams Developer Portal](~/concepts/build-and-test/teams-developer-portal.md)
+* [Configure Teams Developer Portal](~/concepts/tdp-configuration.md)
+* [Tools in Teams Developer Portal](~/concepts/tdp-tools.md)
platform Tdp Tools https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/tdp-tools.md
+
+ Title: Tools in Developer Portal
+description: Learn about the tools available in the Developer Portal.
+keywords: tools adaptive card scene studio bot
+localization_priority: Normal
+++
+# Tools in Developer Portal
++
+## Bot Management
+
+//Todo
+
+## Scene studio
+
+Microsoft has a Scene studio that allows you to build the scenes in Together Mode. It is available on the [Scenes Editor - Teams Developer Portal](https://dev.teams.microsoft.com/scenes).
+
+![Scene studio](~/assets/images/apps-in-meetings/scene-design-studio.png)
+
+For more information, see [Build a scene using Scene studio](../apps-in-teams-meetings/teams-together-mode.md#build-a-scene-using-the-scene-studio).
+
+## Adaptive card editor
+
+//Todo
+
+## Microsoft identity platform management
+
+//Todo
+
+## Teams store app validation
+
+//Todo
+
+## See also
+
+* [Overview of Teams Developer Portal](~/concepts/build-and-test/teams-developer-portal.md)
+* [Configure Teams Developer Portal](~/concepts/tdp-configuration.md)
+* [Distribute Teams Developer Portal](~/concepts/tdp-distribute.md)
platform Messaging Extension Design https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/design/messaging-extension-design.md
You can find comprehensive messaging extension design guidelines, including elem
You can add a messaging extension in the following Teams contexts:
-* From the Teams store (AppSource).
+* 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:
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/messaging-extension/add-in-channel.png" alt-text="Example shows how to add a messaging extension near the compose box in a channel." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Set up a messaging extension Authentication isn't mandatory, but if your app is something like a ticket tracking tool, you may need people to sign in to use the messaging extension. 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)
+ :::image type="content" source="../../assets/images/messaging-extension/set-up.png" alt-text="Example shows messaging extension setup screen with a sign-in button." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Types of messaging extensions Messaging extensions can have search commands, action commands, or both. Your commands depend on your app's features and how those fit within Teams use cases.
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)
+ :::image type="content" source="../../assets/images/messaging-extension/search-command-type.png" alt-text="Example shows a search-based messaging extension launched from the compose box." border="false":::
+# [Mobile](#tab/mobile)
++++ #### Compose box layout options You have some options for displaying messaging extension search results, including [list and grid views](../../messaging-extensions/how-to/search-commands/respond-to-search.md#respond-to-user-requests).
The compose box and messages or posts are the primary contexts where people use
### From the compose box
-Once added, users can open your messaging extension by selecting your app icon below the compose box. In this example, the extension has search and action commands:
+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)
:::image type="content" source="../../assets/images/messaging-extension/open-from-compose-box.png" alt-text="Example shows how to open a messaging extension from the compose box." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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.
Once added, users can select the **More** :::image type="icon" source="../../ass
#### 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)
++
+# [Mobile](#tab/mobile)
+++ ## Use a messaging extension
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)
+ :::image type="content" source="../../assets/images/messaging-extension/insert-content-search.png" alt-text="Example shows a user searching for content to insert from the compose box." border="false":::
+# [Mobile](#tab/mobile)
++++ **2. Insert content**. Once posted, others can reply or select the content to see more information in your app.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/messaging-extension/insert-content-posted.png" alt-text="Example shows a user posting content into a channel conversation." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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)
+ :::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)
+ :::image type="content" source="../../assets/images/messaging-extension/paste-preview-link.png" alt-text="Example shows a user pasting a link in the compost box." border="false":::
+# [Mobile](#tab/mobile)
++++ **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](#tab/desktop)
+ :::image type="content" source="../../assets/images/messaging-extension/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." border="false":::
+# [Mobile](#tab/mobile)
++++ ## 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
The following example is a messaging extension opened from the compose box.
+# [Desktop](#tab/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"::: |Counter|Description|
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 Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/overview.md
Apps are how you extend Teams to fit your needs. Create something brand new for
## What are Teams apps?
-Teams apps are a combination of [capabilities](concepts/capabilities-overview.md) and [entry points](concepts/extensibility-points.md). For example, people can chat with your app's *bot* (capability) in a *channel* (entry point).
+Teams apps are a combination of [capabilities](concepts/capabilities-overview.md). Some apps are simple (send notifications), while others are complex (manage patient records). When planning your app, remember that Teams is a collaboration hub. The best Teams apps help people express themselves and work better together.
-Some apps are simple (send notifications), while others are complex (manage patient records). When planning your app, remember that Teams is a collaboration hub. The best Teams apps help people express themselves and work better together.
+### Personal apps
:::row:::
- :::column span="":::
+ :::column span="1":::
+
+**Help people focus**: A [personal app](concepts/design/personal-apps.md) is a dedicated space or bot to help users focus on their own tasks or view activities important to them.
+
+ :::column-end:::
+
+ :::column span="3":::
++
+ :::column-end:::
+ ### Tabs
-**Get information more conveniently**: Sometimes you just need to make things easier to find. Display an important webpage in a [tab](tabs/what-are-tabs.md), which provides a full-screen web experience for static and dynamic content in Teams.
+ :::column span="1":::
+**Collaborate more conveniently**: Display your web-based content in a [tab](tabs/what-are-tabs.md) where people can discuss and work on it together.
:::column-end:::
- :::column span="":::
+ :::column span="3":::
++
+ :::column-end:::
+ ### Bots
+ :::column span="1":::
+ **Turn words into actions**: Conversations often result in the need to do something (generate an order, review my code, check ticket status, and so on). A [bot](bots/what-are-bots.md) can kick off these kinds of workflows right inside Teams.
+ :::column-end:::
+
+ :::column span="3":::
+ :::column-end::: :::row-end:::
+### Messaging extensions
+ :::row:::
- :::column span="":::
-
-### Messaging extensions
+ :::column span="1":::
**Make it easier to multitask**: With [messaging extensions](messaging-extensions/what-are-messaging-extensions.md), you can quickly share external information in a conversation. You also can act on a message, such as creating a help ticket based on the content of a channel post.
+ :::column-end:::
+
+ :::column span="3":::
+ :::column-end:::
- :::column span="":::
+### Meeting extensions
-### Webhooks
-**Communicate with external apps**: [Incoming webhooks](webhooks-and-connectors/what-are-webhooks-and-connectors.md#incoming-webhooks) are a simple way to automatically send notifications from another app to a Teams channel. With [outgoing webhooks](webhooks-and-connectors/what-are-webhooks-and-connectors.md#outgoing-webhooks), message your web service with an @mention.
+ :::column span="1":::
+**Create apps for meetings**: There are a few options for [incorporating your app into the Teams calling experience](apps-in-teams-meetings/design/designing-apps-in-meetings.md).
+
+ :::column-end:::
+
+ :::column span="3":::
+ :::column-end::: :::row-end:::
+### Webhooks and connectors
+ :::row::: :::column span="":::
+**Communicate with external apps**: [Incoming webhooks](webhooks-and-connectors/what-are-webhooks-and-connectors.md#incoming-webhooks) are a simple way to automatically send notifications from another app to a Teams channel. With [outgoing webhooks](webhooks-and-connectors/what-are-webhooks-and-connectors.md#outgoing-webhooks), message your web service with an @mention.
+
+ :::column-end:::
+
+ :::column span="":::
++
+ :::column-end:::
+ ### Microsoft Graph for Teams
-**Utilize Teams data**: The [Microsoft Graph API for Teams](/graph/teams-concept-overview) provides access to information about teams, channels, users, and messages that can help you create or enhance features for your app.
+ :::column span="":::
+
+**Utilize Teams data**: The [Microsoft Graph API for Teams](/graph/teams-concept-overview) provides access to information about teams, channels, users, and messages that can help you create or enhance features for your app (such as rich notifications).
:::column-end::: :::column span="":::++ :::column-end::: :::row-end:::
Blend the features users love about an existing web app, service, or system with
## A little code goes a long way
-You don't need to be an expert programmer to build a great Teams app. Try one of the several low-code solutions.
+You don't need to be an expert programmer to build a great Teams app. Try one of several low-code solutions.
> [!div class="nextstepaction"] > [Create a low-code app](samples/teams-low-code-solutions.md)
platform Bots Conv Proactive https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bot-conversations/bots-conv-proactive.md
Occasionally it may be necessary to proactively message users that have not inst
You can only install apps that are in your organizational app catalogue, or the Teams app store.
-See [Install apps for users](/graph/teams-proactive-messaging) in the Graph documentation for complete details. There is also a [sample in .NET](https://github.com/microsoftgraph/contoso-airlines-teams-sample/blob/283523d45f5ce416111dfc34b8e49728b5012739/project/Models/GraphService.cs#L176).
+See [Install apps for users](/graph/api/userteamwork-post-installedapps?view=graph-rest-1.0&tabs=http&preserve-view=true) in the Graph documentation for complete details. There is also a [sample in .NET](https://github.com/microsoftgraph/contoso-airlines-teams-sample/blob/283523d45f5ce416111dfc34b8e49728b5012739/project/Models/GraphService.cs#L176).
## Examples
namespace Microsoft.Teams.TemplateBotCSharp.Dialogs
## See also
-[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md)
+[Bot Framework samples](https://github.com/Microsoft/BotBuilder-Samples/blob/master/README.md)
platform Manifest Schema Dev Preview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema-dev-preview.md
For more information on the features available see: [Features in the Public Deve
"mysite.someplace.com", "othersite.someplace.com" ],
+ "webApplicationInfo": {
+ "id": "AAD App ID",
+ "resource": "Resource URL for acquiring auth token for SSO",
+ "applicationPermissions": [
+ "TeamSettings.Read.Group",
+ "ChannelSettings.Read.Group",
+ "ChannelSettings.Edit.Group",
+ "Channel.Create.Group",
+ "Channel.Delete.Group",
+ "ChannelMessage.Read.Group",
+ "TeamsApp.Read.Group",
+ "TeamsTab.Read.Group",
+ "TeamsTab.Create.Group",
+ "TeamsTab.Edit.Group",
+ "TeamsTab.Delete.Group",
+ "Member.Read.Group",
+ "Owner.Read.Group",
+ "Member.ReadWrite.Group",
+ "Owner.ReadWrite.Group"
+ ],
+ },
"configurableProperties": [ "name", "shortDescription",
Specify your AAD App ID and Graph information to help users seamlessly sign into
|||||| |`id`|String|36 characters|Γ£ö|AAD application id of the app. This id must be a GUID.| |`resource`|String|2048 characters|Γ£ö|Resource url of app for acquiring auth token for SSO.|
+|`applicationPermissions`|Array|Maximum 100 items|Γ£ö|Resource permissions for application.|
## configurableProperties
platform Virtual Assistant https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/virtual-assistant.md
Book-a-room bot has two main commands for users:
- `Book room` - `Manage Favorites`
-We have built a LUIS model by understanding these two commands. Corresponding secrets must be populated in `cognitivemodels.json`. The corresponding LUIS JSON file is found [here](https://github.com/OfficeDev/microsoft-teams-apps-bookaroom/blob/nebhagat/microsoft-teams-apps-bookaroom-skill/Deployment/Resources/LU/book-a-meeting.json).
+We have built a LUIS model by understanding these two commands. Corresponding secrets must be populated in `cognitivemodels.json`. The corresponding LUIS JSON file is found [here](https://github.com/OfficeDev/microsoft-teams-apps-bookaroom/blob/nebhagat/microsoft-teams-apps-bookaroom-skill/Deployment/Resources/LU/en-us/book-a-meeting.json).
The corresponding `.lu` file is shown in the following section: ```
Updating activity, such as card refresh is not supported yet through Virtual Ass
To forward card action or task module activities to an associated skill, the skill must embed `skillId` to it. `Book-a-room` bot card action, task module fetch and submit action payloads are modified to contain `skillId` as a parameter.
-For more information refer [this](https://msteams-captain.visualstudio.com/xGrowth%20App%20Templates/_wiki/wikis/xGrowth.wiki/88/Virtual-Assistant-for-MS-Teams?anchor=rich-cards) section from this documentation.
+For more information refer [this](/microsoftteams/platform/samples/virtual-assistant#add-adaptive-cards-to-your-virtual-assistant) section from this documentation.
### Handle activities from group chat or channel scope
platform Tabs Mobile https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs-mobile.md
Title: Tabs on mobile
-description: Describes the guidelines for designing tabs that work on mobile.
+description: Describes developer considerations for implementing tabs on Microsoft Teams mobile.
localization_priority: Normal
-keywords: teams design guidelines reference framework personal apps mobile tabs
# Tabs on mobile
-You can include tabs in Teams mobile channels, chats, and personal apps.
+When you're building a Microsoft Teams app that includes a tab, you must consider (and test) how your tab will function on both the Android and iOS Microsoft Teams clients. The sections below outline some of the key scenarios you need to consider.
-## Accessing personal tabs
-
-You can access personal tabs in the app drawer.
--
-## Accessing channel tabs
-
-You can access channel and group tabs by selecting the **More** button in the channel or chat in which they've been added.
--
-## Design considerations
-
-Our mobile platform allows apps to be an immersive experience with the app content taking up all of the screen apart from main Teams navigation. To create an immersive experience that fits with Teams, follow these guidelines.
-
-### Responsive design
-
-Because your tab can be opened on devices with a wide range of screen sizes, it needs to follow [responsive design](https://www.w3schools.com/html/html_responsive.asp) principles. All of the key constructs should be accessible on mobile devices, and the views should not be distorted. Ensure that when your tab is loaded on a mobile device, all buttons and links are easily accessible using finger-based navigation.
-
-### Layouts
-
-Choosing the correct layout for your tab is important. You should consider the kind of information you're presenting, and choose a layout that organizes it for easy consumption. Some potential options are outlined below.
-
-#### Single canvas
-
-This is one large area where work gets done. The Teams Wiki app follows this pattern. If you have an app that doesnΓÇÖt separate content into smaller components this would be a good fit.
--
-#### List
-
-Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.
--
-#### Grid
-
-Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.
--
-### Tabs with bots on mobile
-
-The following example is a personal app that has tabs and a bot:
--
-## UI components
-
-### Color palettes
-
-Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Since Teams mobile has two colour themes (light and dark), itΓÇÖs a good idea to make sure your app looks great in both.
-
-#### Light color
-
-![light color palette](../../assets/images/light-color.png)
-
-#### Dark color
-
-![dark color palette](../../assets/images/dark-color.png)
-
-### Buttons and controls
-
-The way buttons are styled helps communicate what kind of action they trigger. We maintain a wide range of buttons that are formatted to show different levels of emphasis. Buttons can have text, an icon, or a combination of text and an icon. To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.
-
-#### Buttons
-
-Primary and secondary buttons.
-
-![buttons image](../../assets/images/buttons.png)
-
-#### Selection controls
-
-Radio buttons, checkboxes, and toggles.
-
-![selection controls](../../assets/images/selection-controls.png)
-
-#### Chiclets and pills
-
-![chiclets and pills](../../assets/images/chiclets-and-pills.png)
-
-### Typography
-
-Typography should be clear and purposeful. Emphasize important information and avoid using multiple fonts and sizes to reduce confusion. We recommend using sentence case and avoiding the usage of all caps for localization and legibility.
-
-![mobile typograph](../../assets/images/mobile-typography.png)
-
-### Fields and flyouts
-
-Fields are areas where users can input text. Flyouts are more lightweight than dialogs and appear from the top pane.
-
-#### List controls
-
-![mobile list controls](../../assets/images/mobile-list-controls.png)
-
-#### Field controls
-
-![mobile field controls](../../assets/images/mobile-field-controls.png)
-
-## Developer considerations
-
-When you're building an app that includes a tab, you need to consider (and test) how your tab will function on both the Android and iOS Microsoft Teams clients. The sections below outline some of the key scenarios you need to consider.
-
-### Authentication
+## Authentication
For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.
-### Low bandwidth and intermittent connections
+## Low bandwidth and intermittent connections
Mobile clients regularly need to function with low bandwidth and intermittent connections. Your app should handle any timeouts appropriately by providing a contextual message to the user. You should also user progress indicators to provide feedback to your users for any long-running processes.
-> [!NOTE]
-> Tabs are enabled on mobile only after the application is added to an allow list, based on the input of the approval team.
-> To check mobile responsiveness, reach out to teamsubm@microsoft.com.
-
-### Testing on mobile clients
+## Testing on mobile clients
You need to validate that your tab functions properly on mobile devices of various sizes and qualities. For Android devices, you can use the [DevTools](~/tabs/how-to/developer-tools.md) to debug your tab while it is running. We recommend that you test on both high- and low-performance devices, including a tablet.
-### Distribution
+## Distribution
Apps listed on the Teams store must be approved for mobile use to function properly in the Teams mobile client. Tab availability and behavior depends on whether your app is approved.
-#### Apps on Teams store approved for mobile
+### Apps on Teams store approved for mobile
The following table describes tab availability and behavior when the app is listed on the Teams store and approved for mobile use:
The following table describes tab availability and behavior when the app is list
|Channel <br /> and group tab|Yes|Tab opens in the Teams mobile client using your app's `contentUrl` configuration.| |Personal app|Yes|Each tab in the personal app tab opens in the Teams mobile client using its respective `contentUrl` configuration.|
-#### Apps on Teams store not approved for mobile
+### Apps on Teams store not approved for mobile
The following table describes tab availability and behavior when the app is listed on the Teams store but not approved for mobile use:
The following table describes tab availability and behavior when the app is list
|Channel and group tab|Yes|Tab opens in the device's default browser instead of the Teams mobile client using your app's `websiteUrl` configuration, which also must be included in your source code's `setSettings()` [function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest#functions&preserve-view=true). However, users can still view the tab in the Teams mobile client by selecting **More** next to the app and choosing **Open**, which triggers your appΓÇÖs `contentUrl` configuration.| |Personal app|No|Not applicable|
-#### Apps not on Teams store
+### Apps not on Teams store
If you're sideloading your app or publishing to an org's app catalog, tab behavior will be the same as Teams store apps approved by Microsoft for mobile.+
+## See also
+
+* [Tab design guidelines](~/tabs/design/tabs.md)
platform Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/design/tabs.md
localization_priority: Normal
-# Designing your tab for Microsoft Teams desktop and web
+# Designing your tab for Microsoft Teams
-A tab is a large canvas for your content. To guide your app design, the following information describes and illustrates how people can add, use, and manage tabs in Teams.
+A tab is a large canvas for your app content. To guide your app design, the following information describes and illustrates how people can add, use, and manage tabs in Teams.
## Microsoft Teams UI Kit
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)
-The following example shows how a tab is added in a channel:
+# [Desktop](#tab/desktop)
+
+The following example shows how users can add a tab in a channel.
:::image type="content" source="../../assets/images/tabs/design-add-tab.png" alt-text="Example shows a tab being added in a channel." border="false":::
+# [Mobile](#tab/mobile)
+
+Users can access tabs by selecting the **More** button in the channel (example below) or chat in which they've been added.
++++ ## Set up a tab There's a short setup process to add an app as a channel, chat, or meeting tab. The experience is largely up to you. For example, you could have a description of how to use the app and some optional settings. Include a sign-in step here if you need to authenticate users.
-### Tab configuration modal
+### Tab configuration dialog
:::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 modal
+### 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":::
There's a short setup process to add an app as a channel, chat, or meeting tab.
|-|--| |1|**App logo**: Full color app logo of your app.| |2|**App name**: Full name of your app.|
-|3|**iframe**: Responsive space for your appΓÇÖs content. For example, tab settings or authentication.|
-|4|**About link**: Opens a dialog showing more information about the app, such as a full description, permissions required by the app, and links to your privacy policy and terms of service.
-|5|**Close button**: Closes the modal.|
-|6|**Notify team members option**: The modal asks if you want to create a post letting others know you added a tab.|
+|3|**iframe**: Responsive space for your appΓÇÖs content (for example, tab settings or authentication).|
+|4|**About link**: Opens a dialog showing more information about the app, such as a full description, permissions required by the app, and links to your privacy policy and terms of service.|
+|5|**Close button**: Closes the dialog.|
+|6|**Notify team members option**: The dialog asks users if they want to create a post letting others know they added a tab.|
|7|**Back button**: Goes to the previous step based on where the dialog opened.| |8|**Save button**: Completes tab setup.|
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)
+ :::image type="content" source="../../assets/images/tabs/design-view-tab.png" alt-text="Example shows a tab with a task board." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Anatomy: Tab
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/tabs/design-view-tab-anatomy.png" alt-text="Illustration showing the UI anatomy of a tab." border="false"::: |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 thread on the right, allowing users to have a conversation next to the content.|
-|4|**iframe**: Displays your tabΓÇÖs content.
+|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.|
+
+# [Mobile](#tab/mobile)
++
+|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.|
++
-### Designing a tab with UI templates
+### Designing a tab with UI templates and advanced components
-Use one of the following Teams UI templates to help design your tab experience:
+Use one of the following Teams templates and components to help design your tab experience:
* [List](../../concepts/design/design-teams-app-ui-templates.md#list): Lists can display related items in a scannable format and allow users to take actions on an entire list or individual items. * [Task board](../../concepts/design/design-teams-app-ui-templates.md#task-board): A task board, sometimes called a kanban board or swim lanes, is a collection of cards often used to track the status of work items or tickets. * [Dashboard](../../concepts/design/design-teams-app-ui-templates.md#dashboard): A dashboard is a canvas containing multiple cards that provide an overview of data or content. * [Form](../../concepts/design/design-teams-app-ui-templates.md#form): Forms are for collecting, validating, and submitting user input in a structured way. * [Empty state](../../concepts/design/design-teams-app-ui-templates.md#empty-state): The empty state template can be used for many scenarios, including sign in, first-run experiences, error messages, and more.
-* [Left nav](../../concepts/design/design-teams-app-ui-templates.md#left-nav): The left nav template can help if your tab requires some navigation. In general, you should keep tab navigation to a minimum.
+* [Left nav](../../concepts/design/design-teams-app-advanced-ui-components.md#left-nav): The left nav component can help if your tab requires some navigation. In general, you should keep tab navigation to a minimum.
## Use a tab to collaborate
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)
+ :::image type="content" source="../../assets/images/tabs/design-use-tab-channel.png" alt-text="Example shows a tab being discussed in a channel thread." border="false":::
-### Side-by-side discussion
+# [Mobile](#tab/mobile)
++++
+### 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.
-Users can have a conversation next while viewing the tabΓÇÖs content.
+# [Desktop](#tab/desktop)
:::image type="content" source="../../assets/images/tabs/design-use-tab-side-chat.png" alt-text="Example shows a tab with a chat open on the right side." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Permissions and role-based views The tab experience may be different for users depending on their permissions. For example, one user can access the tab without having to sign in. Another user, however, must sign and will see slightly different content.
You can include options to rename, remove, or modify a tab.
### Anatomy: Tab menu
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/tabs/design-manage-tab-menu-anatomy.png" alt-text="Illustration showing the UI anatomy of a tab menu." border="false"::: |Counter|Description| |-|--| |1|**Settings**: (Optional) Allows users to modify a tabΓÇÖs settings after itΓÇÖs been added.|
-|2|**Rename**: Allows users to give the tab a name thatΓÇÖs more meaningful to the team.|
+|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)
++
+|Counter|Description|
+|-|--|
+|1|**Open in browser**: Opens the app in the deviceΓÇÖs default browser.|
+|2|**Copy link**: Users can copy and share a link to the tab.|
+|3|**Settings**: (Optional) Modify a tabΓÇÖs settings after it's been added.|
+|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.|
+++ ## Tab notifications and deep linking You can send a message with a deep link to your tab. For example, a card shows a summary of bug data a user can select to see the entire bug in a tab. Sending messages about tab activity increases awareness without explicitly notifying everyone (i.e., activity without noise). You also can @mention specific users if needed.
platform Using Teams Client Sdk https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/using-teams-client-sdk.md
See the following tables to understand commonly used SDK functions. The [SDK ref
| Function | Description | Documentation| | -- | -- | -- | | `microsoftTeams.initialize()` | Initializes the SDK. This function must be called before any other SDK calls.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initialize-any-&preserve-view=true)|
-|`microsoftTeams.getContext(callback: (context: Context)`| Gets the current state in which the page is running. The callback retrieves the **Context** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getcontext--context--context--void-&preserve-view=true)<br/>[context obj](/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.getContext(callback: (context: Context)`| Gets the current state in which the page is running. The callback retrieves the **Context** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getcontext--context--context--void-&preserve-view=true)<br/>[context obj](/javascript/api/@microsoft/teams-js/@microsoft.teams-js?view=msteams-client-js-latest&preserve-view=true)|
| `microsoftTeams.initializeWithContext({contentUrl: string, websiteUrl: string})` | Initializes the Teams library and sets the tab's [frame context](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website/reload functionality operates on the correct URL.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#initializewithframecontext-framecontext--void--string&preserve-view=true)| | `microsoftTeams.setFrameContext({contentUrl: string, websiteUrl: string})` | Sets the tab's [frame context](/javascript/api/@microsoft/teams-js/microsoftteams.framecontext?view=msteams-client-js-latest&preserve-view=true) depending on the contentUrl and websiteUrl. This ensures the go-to-website/reload functionality operates on the correct URL.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#setframecontext-framecontext-&preserve-view=true)| | `microsoftTeams.registerFullScreenHandler(handler: (isFullScreen: boolean)` |The handler that is registered when the user toggles a tab's full-screen/windowed view.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerfullscreenhandler--isfullscreen--boolean--void-&preserve-view=true)<br/>[boolean](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerFullScreenHandler__isFullScreen__boolean_____void_&preserve-view=true)| |`microsoftTeams.registerChangeSettingsHandler()` |The handler that is registered when the user selects the enabled **Settings** button to reconfigure a tab.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#registerchangesettingshandler-void-&preserve-view=true)|
-| `microsoftTeams.getTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters,)` |Gets the tabs owned by the app. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#gettabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.getMruTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters)`|Gets the most recently used tabs for the user. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getmrutabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/tabinformation?view=msteams-client-js-latest&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/tabinstanceparameters?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.shareDeepLink(deepLinkParameters: DeepLinkParameters)`|Takes the **DeepLinkParameters** object as input and shares a deep link dialog box that a user can use to navigate to content *within the tab*.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#sharedeeplink-deeplinkparameters-&preserve-view=true)<br/>[deepLink obj](/javascript/api/@microsoft/teams-js/deeplinkparameters?view=msteams-client-js-latest&preserve-view=true)|
+| `microsoftTeams.getTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters,)` |Gets the tabs owned by the app. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#gettabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/microsoftteams.tabinformation?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.getMruTabInstances(callback: (tabInfo: TabInformation),tabInstanceParameters?: TabInstanceParameters)`|Gets the most recently used tabs for the user. The callback retrieves the **TabInformation** object. The **TabInstanceParameters** object is an optional parameter.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#getmrutabinstances--tabinfo--tabinformation--void--tabinstanceparameters-&preserve-view=true)<br/>[tabInfo obj](/javascript/api/@microsoft/teams-js/microsoftteams.tabinformation?view=msteams-client-js-latest&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/microsoftteams.tabinstanceparameters?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.shareDeepLink(deepLinkParameters: DeepLinkParameters)`|Takes the **DeepLinkParameters** object as input and shares a deep link dialog box that a user can use to navigate to content *within the tab*.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#sharedeeplink-deeplinkparameters-&preserve-view=true)<br/>[deepLink obj](/javascript/api/@microsoft/teams-js/microsoftteams.deeplinkparameters?view=msteams-client-js-latest&preserve-view=true)|
|`microsoftTeams.executeDeepLink(deepLink: string, onComplete?: (status: boolean, reason?: string))`|Takes a required **deepLink** as input and navigates user to a URL or triggers a client actionΓÇösuch as opening or installingΓÇöan app *within Teams*.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#executedeeplink-stringstatus--boolean--reasonstring--void-&preserve-view=true)|
-|`microsoftTeams.navigateToTab(tabInstance: TabInstance, onComplete?: (status: boolean, reason?: string))`|Takes the **TabInstance** object as input and navigates to a specified tab instance.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#navigatetotab-tabinstance-&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/tabinstance?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.navigateToTab(tabInstance: TabInstance, onComplete?: (status: boolean, reason?: string))`|Takes the **TabInstance** object as input and navigates to a specified tab instance.|[function](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#navigatetotab-tabinstance-&preserve-view=true)<br/>[tabInstance obj](/javascript/api/@microsoft/teams-js/microsoftteams.tabinstance?view=msteams-client-js-latest&preserve-view=true)|
### Authentication namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.authentication.authenticate(authenticateParameters?: AuthenticateParameters)`|Initiates an authentication request that opens a new window with the parameters provided by the caller. Optional input values are defined by the **AuthenticateParameters** object.|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)<br/>[auth obj](/javascript/api/@microsoft/teams-js/authenticateparameters?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.authentication.notifySuccess(result?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request was successful and closes the authentication window|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.authentication.notifyFailure(reason?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request failed and closes the authentication window.|[function](/javascript/api/@microsoft/teams-js/authentication?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.authenticate(authenticateParameters?: AuthenticateParameters)`|Initiates an authentication request that opens a new window with the parameters provided by the caller. Optional input values are defined by the **AuthenticateParameters** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.authentication?view=msteams-client-js-latest&preserve-view=true)<br/>[auth obj](/javascript/api/@microsoft/teams-js/microsoftteams.authentication.authenticateparameters?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.notifySuccess(result?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request was successful and closes the authentication window|[function](/javascript/api/@microsoft/teams-js/microsoftteams.authentication?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.authentication.notifyFailure(reason?: string, callbackUrl?: string)`|Notifies the frame that initiated the authentication request that the request failed and closes the authentication window.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.authentication?view=msteams-client-js-latest&preserve-view=true)|
### Settings namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.settings.setValidityState(validityState: boolean)`|The initial value is false. Activates the **Save** or **Remove** button when the validity state is true.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.getSettings(callback: (instanceSettings: Settings)`|Gets the settings for the current instance. The callback retrieves the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/_settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.setSettings(instanceSettings: Settings, onComplete?: (status: boolean, reason?: string)`|Configures the settings for the current instance. Valid settings are defined by the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.registerOnSaveHandler(handler: (evt: SaveEvent)`|The handler that is registered when the user selects the **Save** button. This handler should be used to create or update the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
-|`microsoftTeams.settings.registerOnRemoveHandler(handler: (evt: RemoveEvent)`|The handler that is registered when the user selects the **Remove** button. This handler should be used to remove the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.setValidityState(validityState: boolean)`|The initial value is false. Activates the **Save** or **Remove** button when the validity state is true.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.getSettings(callback: (instanceSettings: Settings)`|Gets the settings for the current instance. The callback retrieves the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.setSettings(instanceSettings: Settings, onComplete?: (status: boolean, reason?: string)`|Configures the settings for the current instance. Valid settings are defined by the **Settings** object.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)<br/>[settings obj](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.registerOnSaveHandler(handler: (evt: SaveEvent)`|The handler that is registered when the user selects the **Save** button. This handler should be used to create or update the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.settings.registerOnRemoveHandler(handler: (evt: RemoveEvent)`|The handler that is registered when the user selects the **Remove** button. This handler should be used to remove the underlying resource powering the content.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.settings.settings?view=msteams-client-js-latest&preserve-view=true)|
### Task modules namespace | Function | Description | Documentation| | -- | -- | -- |
-|`microsoftTeams.tasks.startTask(taskInfo: TaskInfo, submitHandler?: (err: string, result: string)`|Takes the **TaskInfo** object as input and allows an app to open the task module. The optional **submitHandler** is registered when the task module is completed. |[function](/javascript/api/@microsoft/teams-js/tasks?view=msteams-client-js-latest&preserve-view=true)<br/>[taskInfo obj](/javascript/api/@microsoft/teams-js/taskinfo?view=msteams-client-js-latest&preserve-view=true)|
+|`microsoftTeams.tasks.startTask(taskInfo: TaskInfo, submitHandler?: (err: string, result: string)`|Takes the **TaskInfo** object as input and allows an app to open the task module. The optional **submitHandler** is registered when the task module is completed. |[function](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest&preserve-view=true)<br/>[taskInfo obj](/javascript/api/@microsoft/teams-js/microsoftteams.taskinfo?view=msteams-client-js-latest&preserve-view=true)|
|`microsoftTeams.tasks.submitTask(result?: string | object, appIds?: string | string[])`|Submits the task module. The optional **result** string parameter is the result sent to the bot or the app and is typically a JSON object or serialization; The optional **appIds** string or string array parameter aids in validating that the call originated from the same appId as the one that invoked the task module.|[function](/javascript/api/@microsoft/teams-js/microsoftteams.tasks?view=msteams-client-js-latest#submittask-stringobject--stringstring&preserve-view=true)|
platform Create Channel Group Tab Node Yeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/quickstarts/create-channel-group-tab-node-yeoman.md
gulp ngrok-serve
- Return to your team, choose the channel where you would like to display the tab, select Γ₧ò from the tab bar, and choose your tab from the gallery. - Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab. - Select **Save** and your tab will be added to the channel's tab bar.+
+## Next step
+
+> [!div class="nextstepaction"]
+> [Create a Custom Channel and Group Tab with ASP.NETCore](~/tabs/quickstarts/create-channel-group-tab-dotnet-core.md)
platform Tabs Link Unfurling https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/tabs-link-unfurling.md
# Tabs link unfurling and Stage View > [!NOTE]
-> This feature is available in public developer preview only.
+> This feature is available in [public developer preview](../resources/dev-preview/developer-preview-intro.md) only.
Stage View is a new UI component, which allows you to render the content that is opened in full screen in Teams and pinned as a tab.
platform Design Effective Cards https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/design-effective-cards.md
An Adaptive Card contains a freeform body of card elements and optional set of actions. Adaptive Cards are actionable snippets of content that you can add to a conversation through a bot or messaging extension. Using text, graphics, and buttons, these cards provide rich communication to your audience.
-The Adaptive Card framework is used across many Microsoft products, including Teams. You can send cards inside messages to users via bots or messaging extensions. Users can take actions on cards when present.
+The Adaptive Card framework is used across many Microsoft products, including Teams. You can send cards inside messages to users via bots or messaging extensions. Users can also take actions on cards when present.
:::image type="content" source="../../assets/images/adaptive-cards/adaptive-card-overview.png" alt-text="Overview example of an Adaptive Card." border="false":::
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)
+ :::image type="content" source="../../assets/images/adaptive-cards/hero-card.png" alt-text="Example shows an Adaptive Card hero card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Thumbnail Use for sending a simple actionable message.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/thumbnail-card.png" alt-text="Example shows an Adaptive Card thumbnail card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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)
+ :::image type="content" source="../../assets/images/adaptive-cards/list-card.png" alt-text="Example shows an Adaptive Card list card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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)
+ :::image type="content" source="../../assets/images/adaptive-cards/digest-card.png" alt-text="Example shows an Adaptive Card digest card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Media Use when you want to combine text and media, like audio or video.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/media-card.png" alt-text="Example shows an Adaptive Card media card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### People Best used when you to efficiently convey who's involved with a task.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/people-card.png" alt-text="Example shows an Adaptive Card people card." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Request ticket Use to get quick inputs from a user to automatically create a task or ticket.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/request-ticket-card.png" alt-text="Example shows an Adaptive Card request ticket card." border="false":::
-### ImageSet
+# [Mobile](#tab/mobile)
++++
+### Image set
Use to send multiple image thumbnails.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/image-set-card.png" alt-text="Example shows an Adaptive Card image set card." border="false":::
-### ActionSet
+# [Mobile](#tab/mobile)
++++
+### 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)
+ :::image type="content" source="../../assets/images/adaptive-cards/action-set-card.png" alt-text="Example shows an Adaptive Card action set card." border="false":::
-### ChoiceSet
+# [Mobile](#tab/mobile)
++++
+### Choice set
Use to gather multiple inputs from the user.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/adaptive-cards/choice-set-card.png" alt-text="Example shows an Adaptive Card choice set card." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Anatomy
+Adaptive Cards have a lot of flexibility. But at minimum, we strongly suggest including the following components in every card.
+
+# [Desktop](#tab/desktop)
+
-Adaptive Cards have a lot of flexibility. But at minimum, we strongly suggest including the following components in every card:
+# [Mobile](#tab/mobile)
+++ |Counter|Description| |-|--|
-|A|**Header**: Make headers clear and concise, yet descriptive.|
-|B|**Body copy**: Use to convey detail that is either too long or not important enough to include in the header.|
-|C|**Primary actions**: As a best practice, include 1-3 primary actions. A maximum of six are allowed.|
+|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.|
## Best practices
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 can be launched from almost anywhere in your app.
## Anatomy
+Task modules provide a flexible surface for hosted app experiences. They're built using an iframe (desktop) or webview (mobile), so you can design task modules with our UI templates (recommended) or from scratch.
+
+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).
-Task modules are very flexible surfaces. They can be built with iframes, pulling in other UI templates, to host partner-built experiences. This is preferred for the most polished experience.
+# [Desktop](#tab/desktop)
-They can also be built with the [Adaptive Card](../../task-modules-and-cards/cards/design-effective-cards.md) framework, which can be a simpler and faster way to execute common scenarios (such as forms).
|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**: Allows users to find app content they want to insert.|
+|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)
++
+|Counter|Description|
+|-|--|
+|1|**Header**: Make headers clear and concise. Describe the task you want users to complete.
+|2|**App name**: Full name of your app.|
+|3|**Close button**: Closes the task module. Does not apply unsaved changes in the app content.|
+|4|**webview**: Responsive space that hosts your app content.|
+|5|**Actions (optional)**: Buttons related to your app content.|
+++ ## Designing with UI templates Consider using templates for common layouts inside your task modules. Each one is made up of smaller components to create an elegant, responsive design that can be used out of the box or customized for your scenario or with your brand look and feel.
Consider using templates for common layouts inside your task modules. Each one i
### List
-Lists work nicely in a task module because theyΓÇÖre easy to scan.
+Lists work nicely in a task module because they're easy to scan.
+
+# [Desktop](#tab/desktop)
:::image type="content" source="../../assets/images/task-module/list.png" alt-text="Example list in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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)
+ :::image type="content" source="../../assets/images/task-module/form.png" alt-text="Example form in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### 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)
+ :::image type="content" source="../../assets/images/task-module/sign-in.png" alt-text="Example sign in experience in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Media Embed media content in a task module for a focused viewing experience.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/task-module/media.png" alt-text="Example media content in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Empty state Use for welcome, error, and success messages.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/task-module/empty-state.png" alt-text="Example empty state in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Image gallery
-Embed a gallery carousel in an iframe.
+Embed a gallery carousel in an iframe (desktop) or webview (mobile).
+
+# [Desktop](#tab/desktop)
:::image type="content" source="../../assets/images/task-module/image-gallery.png" alt-text="Example image gallery in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ### Poll This example shows poll results launched from an Adaptive Card. The poll can be placed inside a task module, too.
+# [Desktop](#tab/desktop)
+ :::image type="content" source="../../assets/images/task-module/poll.png" alt-text="Example poll in a task module." border="false":::
+# [Mobile](#tab/mobile)
++++ ## Best practices Use these recommendations to create a quality app experience.
See the forms UI template for guidelines on inline error handling.
#### Don't: Put error messages in dialogs
-Don't pop an error message in a dialog on top of a task modules. It creates a confusing user experience.
+Don't pop an error message in a dialog on top of a task module. It creates a confusing user experience.
:::column-end::: :::row-end:::
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
Last updated 04/19/2019
# Creating Office 365 Connectors for Microsoft Teams
->With Microsoft Teams apps, you can add your existing Office 365 Connector or build a new one to include in Microsoft Teams. See [Build your own Connector](/outlook/actionable-messages/connectors-dev-dashboard#build-your-own-connector) for more information.
+With Microsoft Teams apps, you can add your existing Office 365 Connector or build a new one to include in Microsoft Teams. See [Build your own Connector](/outlook/actionable-messages/connectors-dev-dashboard#build-your-own-connector) for more information.
## Adding a Connector to your Teams App
The following manifest.json file contains the basic elements needed to test and
} ```
+## Disable or enable connectors in Teams
+
+The Exchange Online PowerShell V2 module uses modern authentication and works with multi-factor authentication (MFA) for connecting to all Exchange-related PowerShell environments in Microsoft 365. Admins can use Exchange Online PowerShell to disable connectors for an entire tenant or a specific group mailbox, affecting all users in that tenant or mailbox. It is not possible to disable for some and not others. Also, connectors are disabled by default for GCC tenants.
+
+The tenant-level setting overrides the group-level setting. For example, if an admin enables connectors for the group and disables them on the tenant, connectors for the group will be disabled. To enable a connector in Teams, [connect to Exchange Online PowerShell](/docs.microsoft.com/powershell/exchange/connect-to-exchange-online-powershell?view=exchange-ps#connect-to-exchange-online-powershell-using-modern-authentication-with-or-without-mfa&preserve-view=true) using modern authentication with or without MFA.
+
+### Commands to disable or enable connectors
+
+**Run the command in Exchange Online PowerShell**
+
+* To disable connectors for the tenant: `Set-OrganizationConfig -ConnectorsEnabled:$false`.
+* To disable actionable messages for the tenant: `Set-OrganizationConfig -ConnectorsActionableMessagesEnabled:$false`.
+* To enable connectors for Teams, run the following commands:
+ * `Set-OrganizationConfig -ConnectorsEnabled:$true `
+ * `Set-OrganizationConfig -ConnectorsEnabledForTeams:$true`
+ * `Set-OrganizationConfig -ConnectorsActionableMessagesEnabled:$true`
+
+For more information on PowerShell module exchange, see [Set-OrganizationConfig](/docs.microsoft.com/powershell/module/exchange/Set-OrganizationConfig.md?view=exchange-ps&preserve-view=true). To enable or disable Outlook connectors, [connect apps to your groups in Outlook](https://support.microsoft.com/topic/connect-apps-to-your-groups-in-outlook-ed0ce547-038f-4902-b9b3-9e518ae6fbab?ui=en-us&rs=en-us&ad=us).
+ ## Testing your Connector To test your Connector, upload it to a team as you would with any other app. You can create a .zip package using the manifest file from the Connectors Developer Dashboard (modified as directed in the preceding section) and the two icon files.
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Notes** | **Changed topics** | | -- | | |
-|05/13/2021|New: Added Tabs link unfurling and Stage View|[Tabs link unfurling and Stage View](tabs/tabs-link-unfurling.md)
+|5/24/2021|Updated Teams app design guidelines with mobile patterns and more.|[Designing your Teams app](~/concepts/design/design-teams-app-overview.md)
|03/18/2021|Notice: **Please update to version 4.10 or above of the Bot Framework SDK** as we've started with the deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync`. | [Bot API Changes for Team/Chat Members](resources/team-chat-member-api-changes.md) | |05/13/2021|Added information on mConnect and Skooler.|[Moodle learning management system](resources/moodle-overview.md) |05/10/2021| Manifest v1.10 is released.|[Manifest schema](resources/schem) |
-|05/10/2021| App customization feature.| [Designing your Microsoft Teams app](~/concepts/design/design-teams-app-overview.md#app-customization) |
+|05/10/2021| New app customization feature.| [Enable orgs to customize your app](concepts/design/enable-app-customization.md) |
|05/07/2021| Deep links for audio and video calls in chat. |[Deep links](concepts/build-and-test/deep-links.md#deep-linking-to-an-audio-or-audio-video-call) | |04/30/2021|New guidance on how to publish apps to the Teams store.|[Publish your app to the Teams store](concepts/deploy-and-publish/appsource/publish.md), [Teams store validation guidelines](concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) |
-|04/29/2021 | New: Universal Actions for Adaptive Cards. | [Universal Actions for Adaptive Cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) |
+| 04/29/2021 | New: Universal Actions for Adaptive Cards. | [Universal Actions for Adaptive Cards](task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview.md) |
|03/18/2021|Notice: Update to version 4.10 or above of the Bot Framework SDK, as we've started with the deprecation process for `TeamsInfo.getMembers` and `TeamsInfo.GetMembersAsync`. | [Bot API Changes for Team/Chat Members](resources/team-chat-member-api-changes.md) | |03/05/2021|Notice: Tabs will no longer have margins surrounding their experiences. Tab developers should review and update their apps. | [Removing tab margins](resources/removing-tab-margins.md) | |03/05/2021|Default install scope and group capability is in developer preview.| [Default install scope and group capability](concepts/deploy-and-publish/add-default-install-scope.md) |
Developer preview is a public program that provides early access to unreleased T
| **Date** | **Notes** | **Changed topics** | | -- | | |
-|05/21/2021|Tabs link unfurling and Stage View|[Tabs link unfurling and Stage View](tabs/tabs-link-unfurling.md)
+|05/25/2021| New Developer Portal for Teams introduced for managing your Teams apps. | [Developer Portal for Teams](concepts/build-and-test/teams-developer-portal.md) |
+|05/24/2021|Bots can be enabled to receive all channel messages using resource-specific consent (RSC).|[Receive all messages with RSC](~/bots/how-to/conversations/channel-messages-with-rsc.md), [bot conversation overview](~/bots/how-to/conversations/conversation-basics.md), [channel and group conversations](~/bots/how-to/conversations/channel-and-group-conversations.md), and [developer preview manifest schema](~/resources/schem) |
+|05/21/2021|Tabs link unfurling and stage view|[Tabs link unfurling and stage view](tabs/tabs-link-unfurling.md) |
|03/05/2021| Tabs will no longer have margins surrounding their experiences. Tab developers should review and update their apps. | [Removing tab margins](resources/removing-tab-margins.md) | For more information, see [public developer preview for Teams](~/resources/dev-preview/developer-preview-intro.md).