- * **Loading indicator**: Displays an indicator to let users know your hosted app content (for example, Tabs and Task modules) is loading.

-* Tabs must provide value beyond hosting an existing website. [*Mandatory Fix*]

- :::image type="content" source="../../../../assets/images/submission/validation-usability-app-provides-workflows.png" alt-text="Graphic shows an example of an app with a workflow valuable to channel members within a team.":::

- :::image type="content" source="../../../../assets/images/submission/validation-usability-website-i-framed.png" alt-text="Graphic shows an example of an app with entire website in an I-frame without any back option.":::

-A notification provides value in Teams if:

-1. Posted card or text provides adequate details requiring no further user action.

-1. Posted card or text provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams.

-Apps that provide only notifications with content such as, **You have a new notification**, **click to view** and require the user to navigate outside Teams for everything else don't provide significant value within Teams.

- :::image type="content" source="../../../../assets/images/submission/validation-bot-notification-only-inadequete-info.png" alt-text="Screenshot shows an example of a notification only bit with inadequate information in the preview.":::

-</details>

-</br>

-<details><summary>Action commands for Search based message extension</summary>

-[*Mandatory Fix*]

-Apps that consist of search-based message extension provide user value by sharing cards that allow for contextual conversations without context switching.

-To pass validation for a search-based message extension only app, the following are required as baseline to ensure that the user experience isn't broken. A card shared via a message extension provides value in Teams if:

-1. Posted card provides adequate details requiring no further user action.

-1. Posted card provides adequate preview information for a user to take action or decide to view further details in a link opening outside Teams.

- :::image type="content" source="../../../../assets/images/submission/validation-search-based-messaging-ext-adequete-info.png" alt-text="validation-search-base-messaging-ext-adequete-info":::

- :::image type="content" source="../../../../assets/images/submission/validation-search-based-messaging-ext-inadequete-info.png" alt-text="validation-search-base-messaging-ext-inadequete-info":::

-Link unfurling only apps don't provide significant value within Teams. Consider building additional workflows in your app, if your app only supports link unfurling and has no other functionality.

-| [Conversational bot](../bots/how-to/conversations/conversation-messages.md) | It lets a user interact with your web service using text, interactive cards, and dialogs. <br>**See also** [Chat bot](#c) |

-|[Stage View](../sbs-meetings-stage-view.yml)|A user interface component that lets you render the content that is opened in full screen in Teams and pinned as a tab. It's invoked to surface web content within Teams. It *isn't*the same as meeting stage. <br>**See also**: [Meeting stage](#m); [Collaborative Stage View](#c); [stageView](../m365-apps/teamsjs-support-m365.md#stageview)|

-| [Standalone app](../samples/integrating-web-apps.md) | A single-page or large, and complex app. The user can use some aspects of it in Teams. <br>**See also**: [Collaboration app](#c) |

-| Standalone bot | A type of bot app. It's a single bot app or not part of a larger application. <br> **See also**: [Chat bot](#c); [Conversational bot](#c) |

-| [Teams Store validation guidelines](../concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md) | A set of standards and principles for validating an app before submitting the app to Teams store. The guidelines are applicable for apps that work across Teams, Outlook, and M365. <br>**See also**: [Teams store](#t) |

-| [Subdomain ID](../tabs/how-to/authentication/tab-sso-register-aad.md) | It's the application ID URI that you registered when configuring scope for your app in Microsoft Entra ID. <br> **See also**: [SSO](#s); [Application ID URI](#a); [Application ID](#a) |

-* [Task modules (Dialogs)](../../task-modules-and-cards/what-are-task-modules.md)

-| `tasks.startTask` | `dialog.open` (renamed) |

-| `tasks.submitTasks` | `dialog.submit` (renamed) |

-| `tasks.updateTasks` | `dialog.update.resize` (renamed) |

-Additionally, this capability is split into a main capability (`dialog`) for supporting HTML-based dialogs, and a subcapability for bot-based dialogs, `dialog.bot`.

-description: Learn about types of cards supported in bots for Teams, such as, Adaptive, Hero and Thumbnail card, and its actions.

-# Cards and task modules

-With task modules, you can create modal pop-up experiences in Microsoft Teams. They're useful for starting and completing the tasks, or displaying rich information like videos or Power business intelligence (BI) dashboards.

-You can provide [dynamic search](~/task-modules-and-cards/cards/dynamic-search.md) experience within a large dataset using typeahead control in Adaptive Cards and perform typeahead static search within limited number of choices. Invoke the task modules in channel or personal tabs, bots, or deep links. Your user's experience for any workflows that requires data input can be improved by adding a task module to the user's tab. You can invoke task modules from Teams bots using buttons on Adaptive Cards and Bot Framework cards.

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

-* [Cards and task modules](../../cards-and-task-modules.md)

-* [Cards and task modules](../../cards-and-task-modules.md)

-* [Cards and task modules](../../cards-and-task-modules.md)

-* [Cards and task modules](../../cards-and-task-modules.md)

-* [Cards and task modules](../../cards-and-task-modules.md)

-The `invoke` action is used for invoking [task modules](~/task-modules-and-cards/task-modules/task-modules-bots.md).

->* Adding `msteams` to data with a Bot Framework action doesn't work with an Adaptive Card task module.

-* [Use task modules from bots](~/task-modules-and-cards/task-modules/task-modules-bots.md)

-* [Cards and task modules](../cards-and-task-modules.md)

-* [Use task modules from bots](~/task-modules-and-cards/task-modules/task-modules-bots.md)

-| Card type | Bots | Message extension previews | Message extension results | Task modules | Outgoing Webhooks | Incoming Webhooks | Connectors for Microsoft 365 Groups|

-> * Teams platform supports v1.5 or earlier of Adaptive Card features for other capabilities, such as cards sent by user (search based message extensions and link unfurling), tabs, and task modules.

-* [Cards and task modules](../cards-and-task-modules.md)

-* [Cards and task modules](../cards-and-task-modules.md)

-People Picker helps users to search and select users in Adaptive Card. You can add People Picker as input control to Adaptive Card, which works across chats, channels, task modules, and tabs. People Picker supports the following features:

-When the user is finished with the dialog, submitting the result back to the bot is similar to the way it works with tabs. For more information, see [example of submitting the result of a dialog](~/task-modules-and-cards/task-modules/task-modules-tabs.md#example-of-submitting-the-result-of-a-task-module). There are a few differences as follows:

-description: Learn how to invoke task modules from Teams tabs and submitting its result using the Microsoft Teams JavaScript client library (TeamsJS). It includes code samples.

-# Use task modules in tabs

-Add a task module to your tab to simplify your user's experience for any workflows that require data input. Task modules allow you to gather their input in a Microsoft Teams-Aware pop-up. A good example of this is editing Planner cards. You can use task modules to create a similar experience.

-To support the task module feature, two new functions are added to the [Teams JavaScript client library](/javascript/api/overview/msteams-client). The following code shows an example of these two functions:

-# [TeamsJs v2](#tab/teamsjs)

-```typescript

- microsoftTeams.dialog.open(

- urlDialogInfo: UrlDialogInfo,

- submitHandler?: DialogSubmitHandler,

- messageFromChildHandler?: PostMessageChannel

-): void])

- microsoftTeams.dialog.submit(

- result?: string | any,

- appIds?: string | string[]

-): void;

-```

-> [!NOTE]

-> The `dialog.submit` property can only be called within a dialog.

-You can see how invoking a task module from a tab and submitting the result of a task module works.

-## Invoke a task module from a tab

-To invoke a task module from a tab use `microsoftTeams.tasks.startTask()` passing a [TaskInfo object](~/task-modules-and-cards/task-modules/invoking-task-modules.md#the-taskinfo-object) and an optional `submitHandler` callback function. There are two cases to consider:

-* The value of `TaskInfo.url` is set to a URL. The task module window appears and `TaskModule.url` is loaded as an `<iframe>` inside it. JavaScript on that page calls `microsoftTeams.initialize()`. If there's a `submitHandler` function on the page and there's an error when invoking `microsoftTeams.tasks.startTask()`, then `submitHandler` is invoked with `err` set to the error string indicating the same. For more information, see [task module invocation errors](#task-module-invocation-errors).

-* The value of `taskInfo.card` is the [JSON for an Adaptive Card](~/task-modules-and-cards/task-modules/invoking-task-modules.md#adaptive-card-or-adaptive-card-bot-card-attachment). There's no JavaScript `submitHandler` function to call when the user closes or presses a button on the Adaptive Card. The only way to receive what the user entered is by passing the result to a bot. To use an Adaptive Card task module from a tab, your app must include a bot to get any response from the user.

-The next section gives an example of invoking a task module.

-## Example of invoking a task module

-The following image displays the task module:

-The following code is adapted from [the task module sample](~/task-modules-and-cards/task-modules/invoking-task-modules.md#code-sample):

-# [TeamsJs v1](#tab/teamsjs2)

-let taskInfo = {

- card: null,

- completionBotId: null,

-taskInfo.url = "https://contoso.com/teamsapp/customform";

-taskInfo.title = "Custom Form";

-taskInfo.height = 510;

-taskInfo.width = 430;

-submitHandler = (err, result) => {

- console.log(`Submit handler - err: ${err}`);

- console.log(`Submit handler - result\rName: ${result.name}\rEmail: ${result.email}\rFavorite book: ${result.favoriteBook}`);

-};

-microsoftTeams.tasks.startTask(taskInfo, submitHandler);

-# [TeamsJs v2](#tab/teamsjs3)

-dialogResponse = (dialogResponse) => {

- console.log(`Submit handler - err: ${dialogResponse.err}`);

- alert("Result = " + JSON.stringify(dialogResponse.result) + "\nError = " + JSON.stringify(dialogResponse.err));

- };

- microsoftTeams.dialog.open(taskInfo, dialogResponse);

-The `submitHandler` is simple and it echoes the value of `err` or `result` to the console.

-## Submit the result of a task module

-The `submitHandler` function resides in the `TaskInfo.url` web page and is used with `TaskInfo.url`. If there's an error when invoking the task module, your `submitHandler` function is immediately invoked with an `err` string indicating what [error occurred](#task-module-invocation-errors). The `submitHandler` function is also called with an `err` string when the user selects X at the upper right of the task module to close it.

-If there's no invocation error and the user doesn't select X to dismiss it, the user chooses a button when finished. Depending on whether it's a URL or an Adaptive Card in the task module, the next sections provide details on what occurs.

-### HTML or JavaScript `TaskInfo.url`

-After validating the user's inputs, call the `microsoftTeams.tasks.submitTask()` function referred to as `submitTask()`. Call `submitTask()` without any parameters if you just want Teams to close the task module. You can pass an object or a string to your `submitHandler`.

-Pass your result as the first parameter. Teams invokes `submitHandler` where `err` is `null` and `result` is the object or string you passed to `submitTask()`. If you call `submitTask()` with a `result` parameter, you must pass an `appId` or an array of `appId` strings. This permits Teams to validate that the app sending the result is same as the invoked task module.

-### Adaptive Card `TaskInfo.card`

-When you invoke the task module with a `submitHandler` and the user selects an `Action.Submit` button, the values in the card are returned as the value of `result`. If the user selects the Esc key or X at the top right, `err` is returned instead. If your app contains a bot in addition to a tab, you can include the `appId` of the bot as the value of `completionBotId` in the `TaskInfo` object. The Adaptive Card body as filled in by the user is sent to the bot using a `task/submit invoke` message when the user selects an `Action.Submit` button. The schema for the object you receive is similar to [the schema you receive for task/fetch and task/submit messages](~/task-modules-and-cards/task-modules/task-modules-bots.md#payload-of-taskfetch-and-tasksubmit-messages). The only difference is that the schema of the JSON object is an Adaptive Card object as opposed to an object containing an Adaptive Card object as [when Adaptive cards are used with bots](~/task-modules-and-cards/task-modules/task-modules-bots.md#payload-of-taskfetch-and-tasksubmit-messages).

-let taskInfo = {

- Title: "Task Module Demo",

-taskInfo.card = {

- "version": "1.4",

- "text": "This is sample adaptive card.",

-microsoftTeams.tasks.startTask(taskInfo, submitHandler);

-The next section gives an example of submitting the result of a task module.

-## Example of submitting the result of a task module

-For more information, see the [HTML form in the task module](#example-of-invoking-a-task-module). The following code gives an example of where the form is defined:

-The following code gives an example of the `validateForm()` function that calls `submitTask()`:

- microsoftTeams.tasks.submitTask(customerInfo, "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");

-The next section provides task module invocation problems and their error messages.

-## Task module invocation errors

-| User selected X button, closing it. | User canceled or closed the task module. |

-|Task module sample bots-V4 | This sample shows how to create task modules using bot framework v4 and teams tabs. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-task-module/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-task-module/nodejs)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-task-module/csharp/demo-manifest/bot-task-module.zip)

-* [Cards and task modules](../cards-and-task-modules.md)

-* [Invoke and dismiss task modules](~/task-modules-and-cards/task-modules/invoking-task-modules.md)

-[People Picker](cards/people-picker.md#people-picker-in-adaptive-cards) added as an input control in Adaptive Cards enable search and selection of people. You can use it in chats, channels, task modules, and tabs. The mobile and desktop clients support People Picker, which provides an inline typing experience.

-# Task modules

-Task modules permit you to create modal pop-up experiences in your Teams application. In the pop-up, you can:

-Task modules are useful for initiating and completing tasks or displaying rich information, such as videos or Power Business Intelligence (BI) dashboards. A pop-up experience is often more natural for users initiating and completing tasks compared to a tab or a conversation-based bot experience.

-Task modules build on the foundation of Microsoft Teams tabs. They're essentially a tab inside a pop-up window. They use the same Microsoft Teams JavaScript client library (TeamsJS), so if you have built a tab you're already familiar with creating a task module.

-Task modules can be invoked in three ways:

-* Channel or personal tabs: Using the TeamsJS library, you can invoke task modules from buttons, links, or menus on your tab. For more information, see [using task modules in tabs](~/task-modules-and-cards/task-modules/task-modules-tabs.md).

-* Bots: Using buttons on [cards](~/task-modules-and-cards/cards/cards-reference.md) sent from your bot. This is useful when you don't require everyone in a channel to see what you are doing with a bot. For example, when having users respond to a poll in a channel it isn't useful to see a record of that poll being created. For more information, see [using task modules from Teams bots](~/task-modules-and-cards/task-modules/task-modules-bots.md).

-* Outside of Teams from a deep link: You can also create URLs to invoke a task module from anywhere. For more information, see [task module deep link syntax](~/concepts/build-and-test/deep-link-application.md#deep-link-to-open-a-dialog).

-## Components of a task module

-Here's what a task module looks like when invoked from a bot:

-A task module includes the following as shown in the previous image:

-3. The task module's title specified in the `title` property of the [TaskInfo object](~/task-modules-and-cards/task-modules/invoking-task-modules.md#the-taskinfo-object).

-4. The task module's close or cancel button. If the user selects this button, your app receives an `err` event. For more information, see [example for submitting the result of a task module](~/task-modules-and-cards/task-modules/task-modules-tabs.md#example-of-submitting-the-result-of-a-task-module).

- > It is currently not possible to detect the `err` event when a task module is invoked from a bot.

-5. The blue rectangle is where your web page appears if you're loading your own web page using the `url` property of the [TaskInfo object](~/task-modules-and-cards/task-modules/invoking-task-modules.md#the-taskinfo-object). For more information, see [task module sizing](~/task-modules-and-cards/task-modules/invoking-task-modules.md#dialog-sizing).

-6. If you're displaying an Adaptive Card using the `card` property of the [TaskInfo object](~/task-modules-and-cards/task-modules/invoking-task-modules.md#the-taskinfo-object) the padding is added for you. For more information, see [task module CSS for HTML or JavaScript task modules](~/task-modules-and-cards/task-modules/invoking-task-modules.md#dialog-css-for-html-or-javascript-dialogs).

-> [Invoke and dismiss task modules](~/task-modules-and-cards/task-modules/invoking-task-modules.md)

-* [Cards and task modules](cards-and-task-modules.md)

- | Tab, Messaging Extension, Task Module, Single sign-on (SSO), and non-Adaptive Cards | Not Available | Available |