+A bot can also send proactive messages to users. A proactive message is any message sent by a bot that isn't 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. The outgoing request to the bot shows conversation ID and tenant ID in the headers. The workflow bot is a type of conversational bot, which interacts with the users in the Adaptive Card. You can customize how the bot sends the Adaptive Card to the users.

+ Title: Workflow bot in Teams

+description: Learn how to send a response to card action in Teams workflow bot, add more card actions and customize action responses.

+ms.localizationpriority: high

+# Workflow bot in Teams

+A workflow bot allows users to interact with an Adaptive Card. Adaptive Card action handler enables the Adaptive card to converse in Teams app. You can create a workflow bot in multiple scenarios for your users to enhance the user experience, such as incident management, ticketing, approval workflow, and project management cards. You can create and assign a work item with workflow bot and sync the content to Azure DevOps or Jira system.

+A workflow bot can be installed into a team, group chat, or as personal app, depending on different scopes. The default command logic returns an Adaptive Card. You can customize this logic with your business requirement. For the customization, you need to call your existing APIs.

+**Advantages**:

+1. Automates business processes and repetitive workflows without leaving the context of conversations.

+1. Supports users with sequential workflow through various cards progressively, without sending additional cards.

+1. Provides up-to-date user-specific views.

+1. Simplifies programming model with TeamsFx SDK.

+ > [!NOTE]

+ > You can select the capability that you want to install, when adding the app. For more information, see [configure default install options](../../../concepts/deploy-and-publish/apps-publish-overview.md#configure-default-install-options).

+You can create a workflow bot to respond to the Adaptive Card triggered by users. Adaptive Card action handler powered by TeamsFx SDK can execute the Adaptive Card universal action `Action.Execute` triggered by users. In response to this respective card action in the conversation another Adaptive Card is sent by the Adaptive card action handler.

+## Card action handler

+To simplify the creation of a workflow bot, the TeamsFx SDK provides an Adaptive Card action handler `TeamsFxAdaptiveCardActionHandler`. You can focus only on the development of workflow bot to respond to the card action without learning the Bot Framework.

+The following diagram illustrates how to respond to an Adaptive Card action with TeamsFx SDK:

+1. **Action card**: The card where you define your action that users can invoke, for example the `DoStuff`.

+1. **Card action handler**: Triggered when users invoke the corresponding card action, its `triggerVerb` is same as the `verb` property in Adaptive Card action. It can send a response card to respond to the action.

+1. **Response card**: The card that responds to the action when user invokes it from the action card.

+To handle card actions with TeamsFx SDK, each card action handler must implement the `TeamsFxAdaptiveCardActionHandler` interface. This is the interface definition for `TeamsFxAdaptiveCardActionHandler`:

+``` Export interface

+TeamsFxAdaptiveCardActionHandler

+{

+ /**

+ * The verb defined in adaptive card action that can trigger this handler.

+ */

+ triggerVerb: string;

+ /**

+ * Specify the behavior for how the card response will be sent in Teams conversation.

+ * The default value is `AdaptiveCardResponse.ReplaceForInteractor`, which means the card

+ * response will replace the current one only for the interactor.

+ */

+ adaptiveCardResponse?: AdaptiveCardResponse;

+

+ /**

+ * The handler function that will be invoked when the action is fired.

+ * @param context The turn context.

+ * @param actionData The contextual data that associated with the action.

+ */

+ handleActionInvoked(context: TurnContext, actionData: any): Promise<InvokeResponse>;

+}

+```

+## Customize initialization

+You can initialize the workflow bot with your own adapter or customize after initialization. The default initialization is located in `bot/src/internal/initialize.js(ts)`.

+You can update the initialization logic to:

+1. Set `options.adapter` to use your own `BotFrameworkAdapter`.

+1. Set `options.command.commands` to include multiple command handlers.

+1. Set `options.cardAction.actions` to include multiple action handlers.

+1. Set `options.{feature}.enabled` to enable multiple `ConversationBot` functionality.

+For more information on initialization customization, see [additional initialization customization](https://github.com/OfficeDev/TeamsFx/wiki/Respond-to-chat-commands-in-Teams#customize-initialization)

+## Add card actions

+To add card actions with JavaScript and TypeScript, you can perform the following:

+<br>

+<details>

+<summary><b>1. Add an action to your Adaptive Card</b></summary>

+You can add a new action (button) to an Adaptive Card by defining it in the JSON file, such as add a new `DoSomething` action to the `src/adaptiveCards/helloworldCommandResponse.json` file. This is a sample action type `Action.Execute`:

+```helloworldCommandResponse.json

+{

+ "type": "AdaptiveCard",

+ "body": [

+ ...

+ {

+ "type": "ActionSet",

+ "actions": [

+ {

+ "type": "Action.Execute",

+ "title": "DoSomething",

+ "verb": "doSomething"

+ }

+ ]

+ },

+ ...

+ ]

+}

+```

+When the action is invoked in Teams, verb property is required, so that the TeamsFx conversation SDK can invoke the corresponding action handler.

+> [!NOTE]

+> Ensure to provide a global unique string for the verb property, when you're using a general string that might cause a collision with other bot. This can avoid unexpected behavior.

+<br>

+</details>

+<details>

+<summary><b>2. Respond with new Adaptive Card</b></summary>

+You can return a new Adaptive Card for each action invoked to display the response to end user. You need to create a new file, `bot/src/adaptiveCards/doSomethingResponse.json` as a response for the `doSomething` action with the following content:

+```

+{

+ "type": "AdaptiveCard",

+ "body": [

+ {

+ "type": "TextBlock",

+ "size": "Medium",

+ "weight": "Bolder",

+ "text": "A sample response to DoSomething."

+ }

+ ],

+ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

+ "version": "1.4"

+}

+```

+> [!NOTE]

+> You can design your card layout according to your business need. See, [adaptive Card designer](https://adaptivecards.io/designer/).

+<br>

+</details>

+<details>

+<summary><b>3. Add action handler</b></summary>

+You can handle a new action invoked by Adaptive Card with TeamsFx SDK's class `TeamsFxAdaptiveCardActionHandler`. You need to customize the action in this step, such as calling an API, processing data, or any other action as per your business need.

+### [JavaScript](#tab/JS)

+You can create a new file `bot/src/cardActions/doSomethingActionHandler.js`:

+```doSomethingActionHandler.js

+ const { AdaptiveCards } = require("@microsoft/adaptivecards-tools");

+ const { AdaptiveCardResponse, InvokeResponseFactory } = require("@microsoft/teamsfx");

+ const responseCard = require("../adaptiveCards/doSomethingResponse.json");

+ class DoSomethingActionHandler {

+ triggerVerb = "doStuff";

+ async handleActionInvoked(context, message) {

+ const responseCardJson = AdaptiveCards.declare(responseCard).render(actionData);

+ return InvokeResponseFactory.adaptiveCard(responseCardJson);

+ }

+ }

+ module.exports = {

+ DoSomethingActionHandler,

+ }

+```

+### [TypeScript](#tab/TS)

+You can create a new file `bot/src/cardActions/doSomethingActionHandler.ts`:

+```doSomethingActionHandler.ts

+ const { AdaptiveCards } = require("@microsoft/adaptivecards-tools");

+ const { AdaptiveCardResponse, InvokeResponseFactory } = require("@microsoft/teamsfx");

+ const responseCard = require("../adaptiveCards/doSomethingResponse.json");

+ export class DoSomethingActionHandler {

+ triggerVerb = "doSomething";

+ async handleActionInvoked(context, message) {

+ const responseCardJson = AdaptiveCards.declare(responseCard).render(actionData);

+ return InvokeResponseFactory.adaptiveCard(responseCardJson);

+ }

+ }

+```

+The following is an example of action handler:

+* `triggerVerb` is the verb property of your action.

+* `actionData` is the data associated with the action, which may include dynamic user input, or some contextual data provided in the data property of your action.

+* If an Adaptive Card is returned, the existing card is replaced with it by default.

+<br>

+</details>

+<details>

+<summary><b>4. Register the action handler</b></summary>

+You need to configure each new card action in the `conversationBot` that enables the conversational flow of the workflow bot template. You can navigate to `bot/src/internal/initialize.js(ts)` file and update the `actions` array of the `cardAction` property.

+The following steps help you to register the action handler:

+1. You can open file `bot/src/internal/initialize.js(ts)`.

+1. You need to update your `conversationBot` initialization, to enable `cardAction` feature and add the handler to actions array:

+ ```initialize.js(ts)

+ const conversationBot = new ConversationBot({

+ ...

+ cardAction: {

+ enabled: true,

+ actions: [

+ new DoStuffActionHandler(),

+ new DoSomethingActionHandler()

+ ],

+ }

+ });

+ ```

+ > [!NOTE]

+ > To learn more about extending the Workflow bot template, see [respond to card actions in Teams](https://github.com/OfficeDev/TeamsFx/wiki/Respond-to-card-actions-in-Teams)

+<br>

+</details>

+## Customize the action response

+You can use the `adaptiveCardResponse` property in handler to customize how the bot sends the Adaptive Card to users. Following are the three options to customize:

+* The response card is replaced by the current card where the button is defined for the interactor that triggers the action. The users in the conversation can still view the original action card `AdaptiveCardResponse.ReplaceForInteractor`. This is the default behavior.

+ :::image type="content" source="../../../assets/images/sbs-workflow-bot/replace-for-interactor.png" alt-text="Customize how the bot sends adaptive card" lightbox="../../../assets/images/sbs-workflow-bot/replace-for-interactor.png":::

+* The response card is replaced by the action card for all users in the chat, and they can view the response card `AdaptiveCardResponse.ReplaceForAll`.

+ :::image type="content" source="../../../assets/images/sbs-workflow-bot/replace-for-all1.png" alt-text="Replaced the action card for all with the acknowledge button" lightbox="../../../assets/images/sbs-workflow-bot/replace-for-all1.png":::

+ :::image type="content" source="../../../assets/images/sbs-workflow-bot/replace-for-all2.png" alt-text="Replaced the action card for all" lightbox="../../../assets/images/sbs-workflow-bot/replace-for-all2.png":::

+* The response card is sent as a separate message in the conversation that can't replace the action card. All users in the chat can view the response card `AdaptiveCardResponse.NewForAll`.

+ :::image type="content" source="../../../assets/images/sbs-workflow-bot/new-for-all.png" alt-text="Response card sent for all as new" lightbox="../../../assets/images/sbs-workflow-bot/new-for-all.png":::

+### Respond with text message

+You can also respond with text messages instead of using Adaptive Card for card action response, using `InvokeResponseFactory.textMessage`:

+```

+async handleActionInvoked(context: TurnContext, actionData: any): Promise<InvokeResponse> {

+ return InvokeResponseFactory.textMessage("This is a sample card action response!");

+}

+```

+You can see the following response message in Teams:

+### Respond with error messages

+When you want to return an error response message to the client, you can apply `InvokeResponseFactory.errorResponse` to build your invoke response. The following image shows error message in Adaptive Card:

+> [!NOTE]

+> For more information about the invoke response format, see [response format](/adaptive-cards/authoring-cards/universal-action-model?branch=pr-en-us-7193).

+### Customize Adaptive Card content

+You can edit the file `src/adaptiveCards/helloworldCommand.json` to customize Adaptive Card to your preference. The file `src/cardModels.ts` defines a data structure used to fill data for the Adaptive Card.

+The binding between the model and the Adaptive Card is done by matching name such as, `CardData.title` maps to `${title}` in Adaptive Card. You can add, edit, or remove properties, and their bindings to customize the Adaptive Card to your needs.

+You can also add new cards, if needed for your application. To build different types of Adaptive Cards with a list or a table of dynamic content using `ColumnSet` and `FactSet`, see [TeamsFx-Samples](https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/adaptive-card-notification).

+## Auto-refresh to user-specific view

+When Adaptive Cards are sent in a Teams channel or group chat, all users can see the same card content. With the new refresh model for Adaptive Cards universal action, users can have a user-specific view. The auto-refresh also facilitates scenarios such as approvals, poll creator controls, ticketing, incident management, and project management cards. The following diagram illustrates how to provide user-specific view with `refresh` model:

+1. **Base card**: The bot sends a message with the base version of the card. This base card can be sent as a bot notification, command response, or any other card action response. All members of the conversation can view the same response. The base card is automatically refreshed to the user defined `userId` in the `refresh` property of the base card.

+1. **Refresh behavior**: After the user views the message, Teams client automatically triggers a refresh a minute after the last refresh response. The user-specific view handler is invoked to return a card view `Response Card` for specific user `UserA`. Other users in the conversation can still view the base card.

+The following image illustrates how user-specific view is displayed in Teams:

+### Add user-specific view

+The following steps help you to add user-specific view with TeamsFx SDK:

+<br>

+</details>

+<details>

+<summary><b>1. Enable refresh in base Adaptive Card</b></summary>

+ The user-specific views are refreshed from a base card, when response card is refreshed from the base card, as illustrated in the [auto-refresh user-specific view](#auto-refresh-to-user-specific-view). You need to enable auto-refresh on the base card. There are two options to achieve this:

+* First option enables user-specific view refresh with SDK. The base card can be sent as a command response or a card action response. You can enable user-specific view refresh in `handleCommandReceived` of a command handler, or in `handleActionInvoked` of card action handler where the base card is returned. You can use `refresh(refreshVerb, userIds, data)` method from the `@microsoft/adaptivecards-tools` library to inject a refresh section into your base card. To define the refresh section, ensure that you provide the following:

+ 1. `userIds`: A set of user MRIs for those who can trigger auto-refresh. For more information on how to add in `userIds` list in refresh section of Adaptive Card, see [fetch the roster or user profile](../get-teams-context.md#fetch-the-roster-or-user-profile).

+ 1. `verb`: A string to identify the refresh action.

+ 1. `data`: An optional data to associate with the refresh action.

+ In the following sample, a base card returns as command response that can auto-refresh to specific user, such as the command sender:

+ ```

+ import baseCard from "../adaptiveCards/baseCard.json";

+ import { AdaptiveCards } from "@microsoft/adaptivecards-tools";

+ export class MyCommandHandler1 implements TeamsFxBotCommandHandler {

+ triggerPatterns: TriggerPatterns = "helloWorld";

+ async handleCommandReceived(context: TurnContext, message: CommandMessage):

+ Promise<string | Partial<Activity> | void> {

+ const refreshVerb = "userViewRefresh"; // verb to identify the refresh action

+ const userIds = [ context.activity.from.id ]; // users who will be refreshed

+ const data = { key: "value"}; // optional data associated with the action

+ const responseCard = AdaptiveCards

+ .declare(baseCard)

+ .refresh(refreshVerb, userIds, data)

+ .render(cardData);

+

+ return MessageFactory.attachment(CardFactory.adaptiveCard(responseCard));

+ }

+ }

+ ```

+* Second option enables user-specific view to refresh your Adaptive Card. This is a sample refresh action defined in `baseCard.json`:

+ ```baseCard.json

+ {

+ "type": "AdaptiveCard",

+ "refresh": {

+ "action": {

+ "type": "Action.Execute",

+ "title": "Refresh",

+ "verb": "userViewRefresh" ,

+ "data": {

+ "key": "value"

+ }

+ },

+ "userIds": [

+ "${userID}"

+ ]

+ },

+ "body": [

+ ...

+ ],

+ ...

+ }

+ ```

+ You need to replace `${userID}` with user MRI in code, while rendering your card content.

+<br>

+</details>

+<details>

+<summary><b>2. Add user-specific Adaptive Card</b></summary>

+You need to design the user-specific Adaptive Card to refresh a specific response card such as `responseCard.json` for `userA` shown in the diagram for [refresh behavior](#auto-refresh-to-user-specific-view). To get started, you can create a `responseCard.json` with the following content, and save it in `bot/src/adaptiveCards` folder:

+```responseCard.json

+{

+ "type": "AdaptiveCard",

+ "body": [

+ {

+ "type": "TextBlock",

+ "size": "Medium",

+ "weight": "Bolder",

+ "text": "This is a user-specific view"

+ }

+ ],

+ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

+ "version": "1.4"

+}

+```

+<br>

+</details>

+<details>

+<summary><b>3. Add card action handler to refresh views</b></summary>

+You can add handler that implements `TeamsFxAdaptiveCardActionHandler` to process the refresh invoke activity that is automatically triggered in Teams:

+```TypeScript

+import responseCard from "../adaptiveCards/responseCard.json";

+export class Handler1 implements TeamsFxBotCardActionHandler {

+ triggerVerb: string = "userViewRefresh";

+ async handleActionInvoked(context: TurnContext, actionData: any): Promise<InvokeResponse> {

+ /**

+ * If you have multiple userIds defined in your refresh action, for example: userIds: [ "<UserA>", "<userB>" ] ,

+ * and you can return different card response for those users respectively with the following code sample.

+

+ const currentUserId = context.activity.from.id;

+ switch (currentUserId) {

+ case "<userA's id>":

+ const card1 = AdaptiveCards.declare(card1).render(actionData);

+ return InvokeResponseFactory.adaptiveCard(card1);

+ case "<userB's id>":

+ const card1 = AdaptiveCards.declare(card2).render(actionData);

+ return InvokeResponseFactory.adaptiveCard(card2);

+ }

+ */

+ const responseCardJson = AdaptiveCards.declare(responseCard).render(actionData);

+ return InvokeResponseFactory.adaptiveCard(responseCardJson);

+ }

+}

+```

+<br>

+</details>

+<details>

+<summary><b>4. Register the action handler</b></summary>

+You can register the refresh action handler in `bot/src/internal/initialize.js(ts)` with the following code:

+```initialize.js(ts)

+export const commandBot = new ConversationBot({

+ ...

+ cardAction: {

+ enabled: true,

+ actions: [

+ new Handler1()

+ ],

+ }

+})

+```

+<br>

+</details>

+### Access Microsoft Graph

+If you're responding to a command that needs to access Microsoft Graph data of an already signed in Teams user, you can do so by single sign-on (SSO) with their Teams user token. Read more about how Teams Toolkit can help you to [add single sign-on to Teams app](../../../toolkit/add-single-sign-on.md).

+### Connect to existing APIs

+You need to often connect to existing APIs for retrieving data to send to Teams. Teams Toolkit makes it easy for you to configure and manage authentication for existing APIs. For more information, see how to [integrate existing third party APIs](../../../toolkit/add-API-connection.md).

+## FAQ

+<br>

+<details>

+<summary><b>How to extend workflow bot with notifications?</b></summary>

+Notifications add the ability in your application to send Adaptive Cards in response to external events. For example, when a message is posted to an Event Hub, your application can respond and send an appropriate Adaptive Card to Teams.

+The following steps help you to add the notification:

+1. You can navigate to file `bot\src\internal\initialize.js(ts)`.

+1. You need to update your `conversationBot` initialization, to enable the notifications:

+ ```initialize.js(ts)

+ const conversationBot = new ConversationBot({

+ ...

+ cardAction: {

+ enabled: true,

+ actions: [

+ new Handler1()

+ ],

+ },

+ notification: {

+ enabled: true

+ }

+ });

+ ```

+1. You can add the following sample code in your sample notification triggered by HTTP request to your file `bot\src\index.js(ts)`:

+ ```index.js(ts)

+ server.post("/api/notification", async (req, res) => {

+ for (const target of await conversationBot.notification.installations()) {

+ await target.sendMessage("This is a sample notification message");

+ }

+ res.json({});

+ });

+ ```

+1. You need to uninstall your previous bot from Teams, and select `F5` to start your application.

+1. You can now send a notification to the bot installation targets (channel, group chat, or personal chat) by using your favorite tool to send HTTP POST request to `https://localhost:3978/api/notification`.

+<br>

+</details>

+<details>

+<summary><b>How to extend workflow bot with command and response?</b></summary>

+The default workflow bot comes with command and response. See, [how to add more command and response](https://github.com/OfficeDev/TeamsFx/wiki/Respond-to-chat-commands-in-Teams#How-to-add-more-command-and-response).

+<br>

+</details>

+## Step-by-step guide

+Follow the [step-by-step](../../../sbs-gs-workflow-bot.yml) guide to build Teams workflow bot.

+## See also

+* [Build bots for Teams](../../what-are-bots.md)

+* [Build your first bot app using JavaScript](../../../sbs-gs-bot.yml)

+* [Build notification bot with JavaScript](../../../sbs-gs-notificationbot.yml)

+* [Adaptive Cards](../../../task-modules-and-cards/what-are-cards.md#adaptive-cards)

+* [Conversation basics](conversation-basics.md)

+Formatting support differs between card types. Rendering of the card can differ slightly between the desktop and the mobile Microsoft Teams clients, and Teams in the desktop browser.

+You can include an inline image with any Teams card. Supported image formats are .png, .jpg, or .gif formats. Keep the dimensions within 1024 x 1024 pixels and file size less than 1 MB. Animated .gif images aren't supported. For more information, see [types of cards](./cards-reference.md#inline-card-images).

+* Adaptive Cards: Markdown is supported in Adaptive Card `Textblock` field, and `Fact.Title` and `Fact.Value`. HTML isn't supported in Adaptive Cards.

+The following Markdown tags aren't supported:

+> The date and localization features mentioned in this section aren't supported in Teams.

+> * Channel and team mentions aren't supported in bot messages.

+| Azure AD Object ID | Bot, Connector | Azure AD userΓÇÖs Object ID | 49c4641c-ab91-4248-aebb-6a7de286397b |

+> Schema update and UI/UX changes aren't required for user mentions with Adaptive Cards in Bot.

+> * UI/UX changes aren't required for user mentions with Azure AD Object ID and UPN.

+When users hover over the image, an expand icon appears at the upper-right corner as shown in the following image:

+* The iOS client for Teams doesn't render Markdown or HTML inline images in connector cards.

+## Adaptive Cards overflow menu

+Adaptive Card in Teams supports overflow menu. You can populate an overflow menu for all the secondary actions in an Adaptive Card. An overflow menu in an Adaptive Card can be added to the following:

+* [Actions](https://adaptivecards.io/explorer/ActionSet.html): In actions, the primary buttons appear on the Adaptive Card and the secondary buttons are inside the overflow menu.

+* [ActionSet](https://adaptivecards.io/explorer/ActionSet.html): ActionSet is a combination of multiple actions in an Adaptive Card. Each action set can have an overflow menu.

+> [!NOTE]

+> An Adaptive Card supports up to six primary actions to be viewed on the card. Any additional primary action is viewed in the overflow menu.

+ :::image type="content" source="../../assets/images/Cards/overflow-menu-gif.gif" alt-text="GIF shows the overflow menu experience in an Adaptive Card.":::

+### Enable overflow menu

+To enable overflow menu, configure the `mode` property with the value as `primary` or `secondary` in the Adaptive Card schema. The following table describes the `mode` property:

+|Property|Type|Required|Description|

+|||||

+|`mode`| Enum (Primary, Secondary) |No |Whether or not the action is a primary or secondary action. Secondary actions will be collapsed into an overflow menu.|

+The following is an example of the `mode` property in the `actions` type and the `ActionSet` element:

+**Actions**

+In the following example, there are two primary actions and one secondary action. The secondary action creates an overflow menu.

+```json

+{

+ "type": "AdaptiveCard",

+ "actions": [

+ {

+ "type": "Action.Submit",

+ "title": "Set due date"

+ },

+ {

+ "type": "Action.OpenUrl",

+ "title": "View",

+ "url": "https://adaptivecards.io"

+ },

+ {

+ "type": "Action.Submit",

+ "title": "Delete",

+ "mode": "secondary"

+ }

+ ]

+}

+```

+> [!NOTE]

+>

+> * The overflow menu behaves differently on a bot sent card and a message extension card for the root level `actions` in an Adaptive Card. The overflow menu on a bot sent card appears as a pop-up context menu and on the message extension card it appears at the upper-right corner under the More options (**...**) icon. The behavior is not applicable to the `ActionSet` in an Adaptive Card.

+The following image is an example of overflow menu in a bot sent card and a message extension card:

+**Action set**

+In the following example, all the actions are marked as secondary, therefore, a single overflow menu appears on the card.

+``` json

+{

+ "type": "ActionSet",

+ "actions": [

+ {

+

+ "type": "Action.Submit",

+ "title": "view",

+ "mode": "Secondary"

+ {

+ },

+ "type": "Action.submit",

+ "title": "Delete",

+ "mode": "secondary"

+ },

+ {

+ "type": "Action.submit",

+ "title": "Delete",

+ "mode": "secondary"

+ }

+ ]

+}

+```

+The following is an example of the overflow menu experience in Teams desktop and mobile:

+# [Desktop](#tab/desktop)

+When a user selects the overflow menu on a desktop, the buttons that are set as secondary appear in the Adaptive Card.

+ :::image type="content" source="../../assets/images/Cards/desktop-overflow-image-1.png" alt-text="Screenshot shows an example of buttons in an Adaptive Card on Teams desktop.":::

+ :::image type="content" source="../../assets/images/Cards/desktop-overflow-image-2.png" alt-text="Screenshot shows an example of an Adaptive Card with the list of actions in an overflow menu on Teams desktop.":::

+

+ :::image type="content" source="../../assets/images/Cards/desktop-overflow-menu-image-3.png" alt-text="Screenshot shows an example of an Adaptive Card with the buttons that are set as secondary as options in an overflow menu on Teams desktop.":::

+# [Mobile](#tab/mobile)

+When a user selects the overflow menu on mobile, the Adaptive Card displays the buttons that are defined. There's an integrated sheet that displays an overflow menu with card related tasks with a message option. A long press on any message displays a list of related messages. This option is available only for actions.

+ :::image type="content" source="../../assets/images/over-flow-menu-mob-1.png" alt-text="Screenshot shows an example of overflow menu on Teams mobile.":::

+* Office 365 Connector cards: Limited Markdown and HTML formatting are supported in Office 365 Connector cards.

+* Inline images aren't rendered on iOS using either Markdown or HTML in connector cards.

+* Preformatted text is rendered but doesn't have a gray background.

+HTML tags are supported for simple cards, such as the hero and thumbnail cards. Markdown isn't supported.

+Character formatting, such as bold and italic isn't rendered on iOS.

+Character formatting, such as bold and italic displays correctly on Android.

+Adaptive, hero, list, Office 365 Connector, receipt, sign in, and thumbnail cards and card collections are supported in bots for Microsoft Teams. They're based on cards defined by the Bot Framework, but Teams doesn't support all Bot Framework cards and has added some of its own.

+1. Select **Design and build Adaptive Cards**.

+ :::image type="content" source="../../assets/images/Cards/Herocarddetailsteams.PNG" alt-text="Screenshot shows an example of the configuration options for a hero card in the Adaptive Card editor in the Developer Portal.":::

+| title | Rich text | Title of the card. Maximum two lines.|

+Each connector card can display a maximum of 10 sections, and each section can contain a maximum of five images and five actions.

+The sign in 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 sign in card. For more information, see [Teams authentication flow for bots](~/bots/how-to/authentication/auth-flow-bot.md).

+### Support for login cards

+The following table provides the features that support sign-in cards:

+### Additional information on sign in cards

+| title | Rich text | Title of the card. Maximum two lines.|

+| subtitle | Rich text | Subtitle of the card. Maximum two lines.|

+A list can display a maximum of 10 cards per message.

+> Some combinations of list cards aren't yet supported on iOS and Android.

+* [Adaptive Cards overflow menu](~/task-modules-and-cards/cards/cards-format.md#adaptive-cards-overflow-menu)

+* [Form completion feedback](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback)

+description: In this module, learn what are cards and how they're used in bots, connectors, and message extensions.

+- Adaptive Card

+- Hero card

+- List card

+- Office 365 Connector card

+- Receipt card

+- Sign-in card

+- Thumbnail card

+- Card collections

+- Overflow menu on Adaptive Cards

+- Adaptive Card

+- Hero card

+- List card

+- Office 365 Connector card

+- Receipt card

+- Sign in card

+- Thumbnail card

+- Card collections

+- Connectors

+- Bots

+- Message extensions

+- Connector cards: Used as part of Office 365 Connectors.

+- Simple cards: Used from the Bot Framework, such as the thumbnail and hero cards.

+### Typeahead search in Adaptive Cards

+Typeahead search added as an input control in Adaptive Cards enable [dynamic search](~/task-modules-and-cards/cards/dynamic-search.md) experience from a dynamically loaded dataset. It also allows users to do a type-ahead static search within a list with limited number of choices. The mobile and desktop clients support type ahead dynamic search experience.

+> - All native Adaptive Card schema elements, except `Action.Submit`, are fully supported.

+> - The supported actions are [**Action.OpenURL**](https://adaptivecards.io/explorer/Action.OpenUrl.html), [**Action.ShowCard**](https://adaptivecards.io/explorer/Action.ShowCard.html), [**Action.ToggleVisibility**](https://adaptivecards.io/explorer/Action.ToggleVisibility.html), and [**Action.Execute**](/adaptive-cards/authoring-cards/universal-action-model#actionexecute).

+## Overflow menu on Adaptive Cards

+Adaptive Card in Teams supports overflow menu. You can populate an overflow menu for all the secondary actions in an Adaptive Card.

+* [Adaptive Cards overflow menu](~/task-modules-and-cards/cards/cards-format.md#adaptive-cards-overflow-menu)

+description: In this module, learn how to add modal pop-up experiences to collect or display information to your users from your Microsoft Teams apps.

+* [Cards](~/task-modules-and-cards/what-are-cards.md)

+* [Adaptive Cards overflow menu](~/task-modules-and-cards/cards/cards-format.md#adaptive-cards-overflow-menu)

+* ***November 16, 2022***: [Adaptive Cards overflow menu](task-modules-and-cards/cards/cards-format.md#adaptive-cards-overflow-menu).

+* ***November 14, 2022***: [Introducing single sign-on for Visual Studio](toolkit/add-single-sign-on.md).

+* ***November 02, 2022***: [Support global routing for bot APIs](bots/how-to/conversations/send-proactive-messages.md#create-the-conversation).

+|11/17/2021| Static and dynamic typeahead search for desktop and mobile users | ΓÇó Build cards and task modules > Build cards > [Typeahead search in Adaptive Cards](task-modules-and-cards/cards/dynamic-search.md) </br> ΓÇó Build cards and task modules > Build cards > Overview > [Typeahead search in Adaptive Cards](task-modules-and-cards/what-are-cards.md#typeahead search-in-adaptive-cards) </br> ΓÇó Build cards and task modules > Overview > [Cards and task modules](task-modules-and-cards/cards-and-task-modules.md)|

+***November 11, 2022***: [Enable bots to receive all chat messages without being @mentioned](bots/how-to/conversations/channel-messages-with-rsc.md).