Updates from: 01/21/2021 04:08:55
Service Microsoft Docs article Related commit history on GitHub Change details
platform https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/conversations/subscribe-to-conversation-events https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/subscribe-to-conversation-events.md
@@ -1086,3 +1086,11 @@ async def on_reactions_removed(
``` * * *+
+## Samples
+For sample code showing the bots conversation events, see:
+
+[Microsoft Teams bots conversation events sample](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot)
+++
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-bot.md
@@ -129,6 +129,7 @@ It's important to understand that this isn't the same as a channel in Teams. In
* [See what else Teams bots can do with one of our samples](https://github.com/microsoft/BotBuilder-Samples#teams-samples) * [Bot conversation basics](../bots/how-to/conversations/conversation-basics.md)
+* Follow our [design guidelines](../bots/design/bots.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
* [Bot authentication in Teams](../bots/how-to/authentication/auth-flow-bot.md) * [Microsoft Bot Framework](https://dev.botframework.com/) * [Create a bot without the toolkit](../bots/how-to/create-a-bot-for-teams.md)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-channel-tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-channel-tab.md
@@ -174,12 +174,11 @@ Congratulations! You have a Teams app with a tab for displaying useful content i
## Learn more
-* [Authenticate tab users with SSO](../tabs/how-to/authentication/auth-aad-sso.md): If you only want authorized users viewing your tab, set up single sign-on (SSO) through Azure Active Directory (AD).
-* [Embed content from an existing web app or webpage](../tabs/how-to/add-tab.md#tab-requirements): We showed you how to create new content for a tab, but you can also load content from an external URL.
-* [Create a seamless tab experience](../tabs/design/tabs.md): See the recommended guidelines for designing Teams tabs.
-* [Build tabs for mobile](../tabs/design/tabs-mobile.md): Understand how to develop tabs for phones and tablets.
+* Follow our [design guidelines](../tabs/design/tabs.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
+* Understand [mobile considerations](../tabs/design/tabs-mobile.md) for tabs.
+* [Add SSO authentication to your tab](../tabs/how-to/authentication/auth-aad-sso.md).
+* Utilize Teams data with [Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview).
* [Create a tab without the toolkit](../tabs/quickstarts/create-channel-group-tab-node-yeoman.md)
-* [Utilize Teams data with Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview)
## Next lesson
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-messaging-extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-messaging-extension.md
@@ -137,6 +137,7 @@ It's important to understand that this isn't the same as a channel in Teams. In
## Learn more * [Include a link unfurling feature](../messaging-extensions/how-to/link-unfurling.md)
+* Follow our [design guidelines](../messaging-extensions/design/messaging-extension-design.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
* [Add authentication](../messaging-extensions/how-to/add-authentication.md) * [Create an action-based messaging extension](../messaging-extensions/how-to/action-commands/define-action-command.md) * [Microsoft Bot Framework](https://dev.botframework.com/)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-personal-tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-personal-tab.md
@@ -170,12 +170,11 @@ Congratulations! You have a Teams app with a personal tab that makes it easier t
## Learn more
-* [Authenticate tab users with SSO](../tabs/how-to/authentication/auth-aad-sso.md): If you only want authorized users viewing your tab, set up single sign-on (SSO) through Azure Active Directory (AD).
-* [Embed content from an existing web app or webpage](../tabs/how-to/tab-requirements.md): We showed you how to create new content for a personal tab, but you can also load content from an external URL.
-* [Create a seamless experience for your tab](../tabs/design/tabs.md): See the recommended guidelines for designing Teams tabs.
-* [Build tabs for mobile](../tabs/design/tabs-mobile.md): Understand how to develop tabs for phones and tablets.
-* [Utilize Teams data with Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview)
-* [Create a tab without the toolkit](../tabs/quickstarts/create-channel-group-tab-node-yeoman.md)
+* Follow our [design guidelines](../tabs/design/tabs.md) and build with [production-ready UI templates](../concepts/design/design-teams-app-ui-templates.md) to create a seamless experience.
+* Understand [mobile considerations](../tabs/design/tabs-mobile.md) for tabs.
+* [Add SSO authentication to your tab](../tabs/how-to/authentication/auth-aad-sso.md).
+* Utilize Teams data with [Microsoft Graph](https://docs.microsoft.com/graph/teams-concept-overview).
+* [Create a tab without the toolkit](../tabs/quickstarts/create-personal-tab-node-yeoman.md).
## Next lesson
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-overview.md
@@ -118,6 +118,10 @@ Learn the [fundamentals of Teams app design](design-teams-app-fundamentals.md),
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.
@@ -130,31 +134,50 @@ Understand how people add, use, and manage Teams apps to make the most of each c
* [Task modules](../../task-modules-and-cards/task-modules/design-teams-task-modules.md) * [Adaptive Cards](../../task-modules-and-cards/cards/design-effective-cards.md)
-## UI templates
+## Tools and samples
-Quickly create complex, high-fidelity designs with [templates for common Teams use cases and workflows](design-teams-app-ui-templates.md).
+The following tools can help designers and developers get started.
+
+### Microsoft Teams UI Kit
+
+Design a Teams app with UI components, templates, and examples that you can drag, drop, and modify as needed. The UI kit also includes comprehensive information about how apps should look and behave in different Teams scenarios.
+
+> [!div class="nextstepaction"]
+> [Get the UI kit (Figma)](https://www.figma.com/community/file/916836509871353159)
+
+### Microsoft Teams UI Library
+
+View and test individual Teams UI templates and related components in your browser.
+
+> [!div class="nextstepaction"]
+> [Try the UI library (playground)](https://dev-int.teams.microsoft.com/storybook/main/https://docsupdatetracker.net/index.html)
+
+Import these templates and related components directly into your Teams app project.
+
+> [!div class="nextstepaction"]
+> [Get the UI library (GitHub)](https://github.com/OfficeDev/microsoft-teams-ui-component-library)
-## Get started with the Microsoft Teams UI Kit
+### Sample app
-The Microsoft Teams UI Kit has UI components, templates, and examples that you can drag, drop, and modify as needed. The UI kit also includes comprehensive information about how apps should look and behave in different Teams scenarios.
+Install a sample app to see how UI templates look and behave within Teams contexts.
> [!div class="nextstepaction"]
-> [Get the Microsoft Teams UI Kit (Figma)](https://www.figma.com/community/file/916836509871353159)
+> [Get the sample app (GitHub)](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts)
## Other resources To learn more, try one of the following resources.
-### Fluent UI
+### Fluent UI documentation
Get code samples and implementation details for the Fluent UI-based components used to build Teams experiences. > [!div class="nextstepaction"]
-> [Try out Teams UI components (Fluent UI)](https://fluentsite.z22.web.core.windows.net/)
+> [Try Teams UI components (Fluent UI)](https://fluentsite.z22.web.core.windows.net/)
### Adaptive Cards designer
-Design Adaptive Cards in a web-based tool.
+Design Adaptive Cards in our web-based tool.
> [!div class="nextstepaction"] > [Try the Adaptive Cards designer](https://adaptivecards.io/designer/)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-ui-templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/design-teams-app-ui-templates.md
@@ -9,12 +9,35 @@ ms.topic: reference
Design your Microsoft Teams app faster with UI templates. The templates are a collection of Fluent UI-based components that work across common Teams use cases, giving you more time to figure out the best experience for your users.
-## Microsoft Teams UI Kit
+## Getting started with tools and samples
-You can grab UI templates from the Microsoft Teams UI Kit, which also includes extensive information about usage, anatomy, accessibility, and best practices.
+The following resources can help you design and develop your app using UI templates.
+
+### Microsoft Teams UI Kit
+
+Grab UI templates for your app design from the Microsoft Teams UI Kit, which also includes extensive information about usage, anatomy, accessibility, and best practices.
+
+> [!div class="nextstepaction"]
+> [Get the UI kit (Figma)](https://www.figma.com/community/file/916836509871353159)
+
+### Microsoft Teams UI Library
+
+View and test individual Teams UI templates and related components in your browser.
> [!div class="nextstepaction"]
-> [Get the Microsoft Teams UI Kit (Figma)](https://www.figma.com/community/file/916836509871353159)
+> [Try the UI library (playground)](https://dev-int.teams.microsoft.com/storybook/main/https://docsupdatetracker.net/index.html)
+
+Import these templates and related components directly into your Teams app project.
+
+> [!div class="nextstepaction"]
+> [Get the UI library (GitHub)](https://github.com/OfficeDev/microsoft-teams-ui-component-library)
+
+### Sample app
+
+Install a sample app to see how UI templates look and behave within Teams contexts.
+
+> [!div class="nextstepaction"]
+> [Get the sample app (GitHub)](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-ui-templates/ts)
## List
@@ -101,7 +124,7 @@ A wizard guides a user through several screens to complete a task (such as a set
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.
-:::image type="content" source="../../assets/images/ui-templates/empty-state.png" alt-text="Example shows a wizard UI template." border="false":::
+:::image type="content" source="../../assets/images/ui-templates/empty-state.png" alt-text="Example shows an empty state UI template." border="false":::
### Top use cases
@@ -168,7 +191,3 @@ Stage offers a way for users to open an entityΓÇölike an image, file, or website
* Open an entity in Teams instead of another app or browser * Spotlight media or other content-
-## Microsoft Teams UI Library (coming soon)
-
-The Microsoft Teams UI Library will allow you to import these production-ready UI templates directly into your app project.
platform https://docs.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/add-authentication https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/add-authentication.md
@@ -128,3 +128,9 @@ At this point, the window closes and control is passed to the Teams client. The
} ```
+## Samples
+For sample code showing the messaging-extensions authentication process, see:
+
+[Microsoft Teams messaging-extensions authentication sample](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config)
+
+
platform https://docs.microsoft.com/en-us/microsoftteams/platform/overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/overview.md
@@ -133,7 +133,7 @@ Some apps are simple (send notifications), while others are complex (manage pati
## Resources * [Add a Share-to-Teams button to your website](concepts/build-and-test/share-to-teams.md)
-* <a href="https://fluentsite.z22.web.core.windows.net/" target="_blank">Fluent UI</a>
+* [Design your Teams app](concepts/design/design-teams-app-overview.md)
* [Microsoft Teams JavaScript client SDK](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest&preserve-view=true)
-* [Bot Framework SDK for JavaScript](https://github.com/Microsoft/botbuilder-js) and [Bot Framework SDK for .NET](https://github.com/Microsoft/botbuilder-dotnet/)
-* [Publish your app to an organization or AppSource](concepts/deploy-and-publish/overview.md)
+* Bot Framework SDK for [JavaScript](https://github.com/Microsoft/botbuilder-js) and [.NET](https://github.com/Microsoft/botbuilder-dotnet/)
+* [Publish your Teams app](concepts/deploy-and-publish/overview.md)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/what-are-tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/what-are-tabs.md
@@ -60,12 +60,11 @@ Apps that are [distributed through Appsource](~/concepts/deploy-and-publish/apps
>[!NOTE] >
->- The default behavior of the apps is only applicable if they are distributed through AppSource. There is no approval process for apps distributed through other [distribution methods](~/concepts/deploy-and-publish/overview.md). By default, all tabs open in the Teams client.
+>- The default behavior of the apps is only applicable if they are distributed through the Teams store (AppSource). There is no approval process for apps distributed through other [distribution methods](~/concepts/deploy-and-publish/overview.md). By default, all tabs open in the Teams client.
>- To initiate an evaluation of your app for mobile-friendliness, reach out to teamsubm@microsoft.com with your app details. - > [!div class="nextstepaction"]
-> [Learn more: Request device permissions](/concepts/device-capabilities/native-device-permissions.md)
+> [Learn more: Request device permissions](../concepts/device-capabilities/native-device-permissions.md)
> [!div class="nextstepaction"]
->[Learn more: Camera and image gallery permissions](/concepts/device-capabilities/mobile-camera-image-permissions.md)
+>[Learn more: Camera and image gallery permissions](../concepts/device-capabilities/mobile-camera-image-permissions.md)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-reference.md
@@ -2,14 +2,15 @@
title: Cards Reference description: Describes all the cards and card actions available to bots in Teams keywords: bots cards reference
+ms.topic: reference
---
-# Cards Reference
+# Cards reference
-The cards listed in this section are supported in bots for Teams. They are based on cards defined by the Bot Framework, but Teams does not support all Bot Framework cards and has added some of its own. Differences are called out in the references below.
+The cards listed in this section are supported in bots for Microsoft Teams. They are based on cards defined by the Bot Framework, but Teams does not support all Bot Framework cards and has added some of its own. Differences are called out in the references in this document.
## Card examples
-You can find additional information on how to use cards in the documentation for the Bot Builder SDK (v3). There are also code samples available in the Microsoft/BotBuilder-Samples repository on GitHub.
+You can find additional information on how to use cards in the documentation for the Bot Builder SDK (v3). Code samples are also available in the Microsoft/BotBuilder-Samples repository on GitHub.
* .NET * [Add cards as attachments to messages](/bot-framework/dotnet/bot-builder-dotnet-add-rich-card-attachments)
@@ -20,28 +21,28 @@ You can find additional information on how to use cards in the documentation for
## Types of cards
-This table shows the types of cards available to you.
+This table shows the types of cards available to you:
-| Card Type | Description |
+| Card type | Description |
| --- | --- |
-| [Adaptive Card](#adaptive-card) | Highly customizable card that can contain any combination of text, speech, images, buttons and input fields. |
-| [Hero Card](#hero-card) | Typically contains a single large image, one or more buttons, and a small amount of text. |
-| [List Card](#list-card) | A scrolling list of items. |
-| [Office 365 Connector Card](#office-365-connector-card) | Flexible layout with multiple sections, fields, images and actions. |
-| [Receipt Card](#receipt-card) | Provides a receipt to the user. |
-| [Signin Card](#signin-card) | Enables a bot to request that a user sign in. |
-| [Thumbnail Card](#thumbnail-card) | Typically contains a single thumbnail image, some short text, and one or more buttons. |
-| [Card Collections](#card-collections) | Used to return multiple items in a single response |
+| [Adaptive card](#adaptive-card) | Highly customizable card that can contain any combination of text, speech, images, buttons and input fields. |
+| [Hero card](#hero-card) | Typically contains a single large image, one or more buttons, and a small amount of text. |
+| [List card](#list-card) | A scrolling list of items. |
+| [Office 365 connector card](#office-365-connector-card) | Flexible layout with multiple sections, fields, images and actions. |
+| [Receipt card](#receipt-card) | Provides a receipt to the user. |
+| [Signin card](#signin-card) | Enables a bot to request that a user sign in. |
+| [Thumbnail card](#thumbnail-card) | Typically contains a single thumbnail image, some short text, and one or more buttons. |
+| [Card collections](#card-collections) | Used to return multiple items in a single response. |
## Common properties for all cards ### Inline card images
-Your card can contain an inline image by including a link to your publicly available image. For performance purposes we highly recommend you host your image on a public content-delivery network (CDN).
+The card can contain an inline image by including a link to the publicly available image. For performance purposes, it is highly recommended you host the image on a public content-delivery network (CDN).
Images are scaled up or down in size while maintaining the aspect ratio to cover the image area, and then cropped from center to achieve the appropriate aspect ratio for the card.
-Images must be at most 1024×1024 in PNG, JPEG, or GIF format; animated GIF is not officially supported.
+Images must be at most 1024×1024, in PNG, JPEG, or GIF format, and animated GIF is not supported.
| Property | Type | Description | | --- | --- | --- |
@@ -54,27 +55,27 @@ Buttons are shown stacked at the bottom of the card. Button text is always on a
See [Card Actions](~/task-modules-and-cards/cards/cards-actions.md) for more information.
-### Card Formatting
+### Card formatting
See [Card Formatting](~/task-modules-and-cards/cards/cards-format.md) for more information on text formatting in cards. ## Adaptive card
-A customizable card that can contain any combination of text, speech, images, buttons, and input fields. *See* [Adaptive Cards v1.2.0](https://github.com/microsoft/AdaptiveCards/releases/tag/v1.2.0).
+An adaptive card is a customizable card that can contain any combination of text, speech, images, buttons, and input fields. See [Adaptive Cards v1.2.0](https://github.com/microsoft/AdaptiveCards/releases/tag/v1.2.0).
-### Support for Adaptive cards
+### Support for adaptive cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£û | Γ£ö |
-|
> [!NOTE] > * Teams platform supports v1.2 or earlier of Adaptive card features. > * Media elements are currently not supported in Adaptive card v1.2 on the Teams platform.
-### Example Adaptive card
-![Example of a adaptive card card](~/assets/images/cards/adaptivecard.png)
+### Example of an adaptive card
+
+![Example of an adaptive card](~/assets/images/cards/adaptivecard.png)
```json {
@@ -209,35 +210,33 @@ A customizable card that can contain any combination of text, speech, images, bu
} ```
-#### For more information on Adaptive cards
+#### Additional information on adaptive cards
-* [Adaptive Cards Overview](/adaptive-cards/)
+* [Adaptive cards overview](/adaptive-cards/)
* [Adaptive card actions in Teams](~/task-modules-and-cards/cards/cards-actions.md#adaptive-cards-actions) ## Hero card A card that typically contains a single large image, one or more buttons and text.
-### Support for Hero cards
+### Support for hero cards
| Bots in Teams | Messaging Extensions | Connectors | Bot Framework | | --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£û | Γ£ö |
-|
-### Properties of a Hero card
+### Properties of a hero card
| Property | Type | Description | | --- | --- | --- | | title | Rich text | Title of the card. Maximum 2 lines. | | subtitle | Rich text | Subtitle of the card. Maximum 2 lines.|
-| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options |
-| images | Array of images | Image displayed at top of card. Aspect ratio 16:9 |
-| buttons | Array of action objects | Set of actions applicable to the current card. Maximum 6 |
-| tap | Action object | This action will be activated when the user taps on the card itself |
-|
+| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options. |
+| images | Array of images | Image displayed at top of card. Aspect ratio 16:9. |
+| buttons | Array of action objects | Set of actions applicable to the current card. Maximum 6. |
+| tap | Action object | This action will be activated when the user taps on the card itself. |
-### Example Hero card
+### Example of a hero card
![Example of a hero card](~/assets/images/cards/hero.png)
@@ -270,7 +269,7 @@ A card that typically contains a single large image, one or more buttons and tex
```
-### For more information on Hero cards
+### Additional information on hero cards
Bot Framework reference:
@@ -281,14 +280,13 @@ Bot Framework reference:
The list card has been added by Teams to provide functions beyond what the list collection can provide. The list card provides a scrolling list of items.
-### Support for List cards
+### Support for list cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£û | Γ£û |Γ£ö |
-|
-### Properties of a List card
+### Properties of a list card
| Property | Type | Description | | --- | --- | --- |
@@ -296,7 +294,7 @@ The list card has been added by Teams to provide functions beyond what the list
| items | Array of list items || | buttons | Array of action objects | Set of actions applicable to the current card. Maximum 6. |
-### Example List card
+### Example of a list card
```json {
@@ -352,16 +350,13 @@ The list card has been added by Teams to provide functions beyond what the list
## Office 365 connector card
-Supported in Teams, not in Bot Framework.
-
-The Office 365 Connector card provides a flexible layout with multiple sections, fields, images, and actions. This card encapsulates a connector card so that it can be used by bots. See the notes section for differences between connector cards and the O365 card.
+The Office 365 Connector card is supported in Teams, not in Bot Framework. This card provides a flexible layout with multiple sections, fields, images, and actions. This card encapsulates a connector card so that it can be used by bots. See the notes section for differences between connector cards and the O365 card.
### Support for Office 365 connector cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£ö | Γ£û |
-|
### Properties of the Office 365 connector card
@@ -369,19 +364,19 @@ The Office 365 Connector card provides a flexible layout with multiple sections,
| --- | --- | --- | | title | Rich text | Title of the card. Maximum 2 lines. | | summary | Rich text | Summary of the card. Maximum 2 lines. |
-| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options |
-| themeColor | HEX string | color that overrides the accentColor provided from the application manifest |
+| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options. |
+| themeColor | HEX string | Color that overrides the accentColor provided from the application manifest. |
### Notes on the Office 365 connector card
-Office 365 Connector cards function properly on Microsoft Teams, including [ActionCard actions](/outlook/actionable-messages/card-reference#actioncard-action).
+Office 365 connector cards function properly in Microsoft Teams, including [ActionCard actions](/outlook/actionable-messages/card-reference#actioncard-action).
-One important difference between using Connector cards from a Connector and using Connector cards in your bot is the handling of card actions.
+One important difference between using connector cards from a connector and using connector cards in your bot is the handling of card actions.
-* For a Connector, the endpoint receives the card payload via HTTP POST.
+* For a connector, the endpoint receives the card payload via HTTP POST.
* For a bot, the `HttpPOST` action triggers an `invoke` activity that sends only the action ID and body to the bot.
-Each Connector card can display a maximum of 10 sections, and each section can contain a maximum of 5 images and 5 actions.
+Each connector card can display a maximum of 10 sections, and each section can contain a maximum of 5 images and 5 actions.
> [!NOTE] > Any additional sections, images, or actions in a message will not appear.
@@ -390,14 +385,14 @@ All text fields support Markdown and HTML. You can control which sections use Ma
If you specify the `themeColor` property, it overrides the `accentColor` property in the app manifest.
-To specify the rendering style for `activityImage`, you can set `activityImageType` as follows.
+To specify the rendering style for `activityImage`, you can set `activityImageType` as follows:
| Value | Description | | --- | --- |
-| `avatar` | Default; `activityImage` will be cropped as a circle |
-| `article` | `activityImage` will be displayed as a rectangle and retain its aspect ratio |
+| `avatar` | Default; `activityImage` will be cropped as a circle. |
+| `article` | `activityImage` will be displayed as a rectangle and retain its aspect ratio. |
-For all other details about Connector card properties, see the [Actionable message card reference](/outlook/actionable-messages/card-reference). The only Connector card properties that Microsoft Teams does not currently support are as follows:
+For all other details about connector card properties, see the [Actionable message card reference](/outlook/actionable-messages/card-reference). The only connector card properties that Microsoft Teams does not currently support are as follows:
* `heroImage` * `hideOriginalBody`
@@ -405,7 +400,7 @@ For all other details about Connector card properties, see the [Actionable messa
* `originator` * `correlationId`
-### Example Office 365 connector card
+### Example of an Office 365 connector card
```json {
@@ -470,18 +465,66 @@ For all other details about Connector card properties, see the [Actionable messa
## Receipt card
-Supported in Teams.
-
-A card that enables a bot to provide a receipt to the user. It typically contains the list of items to include on the receipt, tax and total information, and other text.
+Teams supports receipt card. It is a card that enables a bot to provide a receipt to the user. It typically contains the list of items to include on the receipt, such as tax and total information.
-### Support for Receipts cards
+### Support for receipt cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£û | Γ£ö |
-|
-### For more information on Receipt cards
+### Example of a receipt card
+
+![Example of a receipt card](~/assets/images/cards/receipt.png)
+
+```json
+{
+ "contentType": "application/vnd.microsoft.card.receipt",
+ "content": {
+ "title": "John Doe",
+ "facts": [
+ {
+ "key": "Order Number",
+ "value": "1234"
+ },
+ {
+ "key": "Payment Method",
+ "value": "VISA 5555-****"
+ }
+ ],
+ "items": [
+ {
+ "title": "Data Transfer",
+ "image": {
+ "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png"
+ },
+ "price": "$ 38.45",
+ "quantity": "368"
+ },
+ {
+ "title": "App Service",
+ "image": {
+ "url": "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png"
+ },
+ "price": "$ 45.00",
+ "quantity": "720"
+ }
+ ],
+ "total": "$ 90.95",
+ "tax": "$ 7.50",
+ "buttons": [
+ {
+ "type": "openUrl",
+ "title": "More information",
+ "image": "https://account.windowsazure.com/content/6.10.1.38-.8225.160809-1618/aux-pre/images/offer-icon-freetrial.png",
+ "value": "https://azure.microsoft.com/en-us/pricing/"
+ }
+ ]
+ }
+}
+```
+
+### Additional information on receipt cards
Bot Framework reference:
@@ -490,18 +533,17 @@ Bot Framework reference:
## Signin card
-A card that enables a bot to request that a user sign in. Supported in Teams in a slightly different form than is found in the Bot Framework. The signin card in Teams is similar to the signin card in the bot framework with the exception that the signin card in Teams only supports two actions: `signin` and `openUrl`.
+Signin card enables a bot to request a user to sign in. Supported in Teams in a slightly different form than is found in the Bot Framework. The signin card in Teams is similar to the signin card in the Bot Framework except that the signin card in Teams only supports two actions: `signin` and `openUrl`.
-The *signin action* can be used from any card in Teams, not just the signin card. See the topic [Microsoft Teams authentication flow for bots](~/bots/how-to/authentication/auth-flow-bot.md) for more details on authentication.
+The *signin action* can be used from any card in Teams, not just the signin card. For more details on authentication, see [Microsoft Teams authentication flow for bots](~/bots/how-to/authentication/auth-flow-bot.md).
### Support for Signin cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£û | Γ£û | Γ£ö |
-|
-### For more information on Signin cards
+### Additional information on signin cards
Bot Framework reference:
@@ -512,28 +554,26 @@ Bot Framework reference:
A card that typically contains a single thumbnail image, one or more buttons, and text.
-### Support for Thumbnail cards
+### Support for thumbnail cards
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£û | Γ£ö |
-|
![Example of a thumbnail card](~/assets/images/cards/thumbnail.png)
-### Properties of a Thumbnail card
+### Properties of a thumbnail card
| Property | Type | Description | | --- | --- | --- | | title | Rich text | Title of the card. Maximum 2 lines.| | subtitle | Rich text | Subtitle of the card. Maximum 2 lines.|
-| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options |
-| images | Array of images | Image displayed at top of card. Aspect ratio 1:1 (square) |
-| buttons | Array of action objects | Set of actions applicable to the current card. Maximum 6 |
-| tap | Action object | This action will be activated when the user taps on the card itself |
-|
+| text | Rich text | Text appears just below the subtitle; see [Card formatting](~/task-modules-and-cards/cards/cards-format.md) for formatting options. |
+| images | Array of images | Image displayed at top of card. Aspect ratio 1:1 (square). |
+| buttons | Array of action objects | Set of actions applicable to the current card. Maximum 6. |
+| tap | Action object | This action will be activated when the user taps on the card itself. |
-### Example Thumbnail card
+### Example of a thumbnail card
```json {
@@ -576,7 +616,7 @@ A card that typically contains a single thumbnail image, one or more buttons, an
} ```
-### For more information
+### Additional information
Bot Framework reference:
@@ -585,29 +625,28 @@ Bot Framework reference:
## Card collections
-Card collections are supported in Teams.
+Teams supports Card collections.
-Card collections: `builder.AttachmentLayout.carousel` and `builder.AttachmentLayout.list`. These collections contain Adaptive, Hero, or Thumbnail cards.
+Card collections: `builder.AttachmentLayout.carousel` and `builder.AttachmentLayout.list`. These collections contain adaptive, hero, or thumbnail cards.
## Carousel collection The [carousel layout](/azure/bot-service/dotnet/bot-builder-dotnet-add-rich-card-attachments?view=azure-bot-service-3.0&preserve-view=true) shows a carousel of cards, optionally with associated action buttons.
-### Support for Carousel collections
+### Support for carousel collections
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£û | Γ£û | Γ£ö |
-|
> [!NOTE] > A carousel can display a maximum of 10 cards per message.
-### Properties of a Carousel card
+### Properties of a carousel card
Properties of a Carousel card are same as those of the Hero and Thumbnail cards.
-### Example Carousel collection
+### Example of a carousel collection
![Example of a carousel of cards](~/assets/images/cards/carousel.png)
@@ -776,22 +815,21 @@ Properties of a Carousel card are same as those of the Hero and Thumbnail cards.
} ```
-### Syntax for Carousel collections
+### Syntax for carousel collections
`builder.AttachmentLayoutTypes.Carousel` ## List collection
-### Support for List collections
+### Support for list collections
The list layout shows a vertically stacked list of cards, optionally with associated action buttons.
-| Bots in Teams | Messaging Extensions | Connectors | Bot Framework |
+| Bots in Teams | Messaging extensions | Connectors | Bot Framework |
| --- | --- | --- | --- | | Γ£ö | Γ£ö | Γ£û | Γ£ö |
-|
-### Example List collection
+### Example of a list collection
![Example of a list of cards](~/assets/images/cards/list.png)
@@ -802,7 +840,7 @@ A list can display a maximum of 10 cards per message.
> [!NOTE] > Some combinations of list cards are not yet supported on iOS and Android.
-### Syntax for List collections
+### Syntax for list collections
`builder.AttachmentLayout.list`
platform https://docs.microsoft.com/en-us/microsoftteams/platform/tutorials/code-samples https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/code-samples.md
@@ -68,7 +68,7 @@ As always, the project's README file should have more information on specific ne
| Sample | Description |--------|------------- | [Sample connector for Node.js](https://github.com/OfficeDev/microsoft-teams-sample-connector-nodejs) | This sample, written in Node.js, showcases how to build a connector for Microsoft Teams using GitHub as an example to generate connector notifications.
-| [Sample connector for C#/.NET](https://github.com/OfficeDev/microsoft-teams-sample-connector-csharp) | This sample, written in C#, showcases how to build a connector for Microsoft Teams using a sample task list app as an example to generate connector notifications.
+| [Sample connector for C#/.NET](https://github.com/OfficeDev/microsoft-teams-sample-connector-csharp) | This sample, written in C#, showcases how to build a connector for Microsoft Teams using a sample task list app as an example to generate connector notifications. This sample also shows how to implement the login functionality in the connector configuration page.
## Graph API