+> [!WARNING]

+> The Collaboration controls for model-driven applications are set to retire by May 2024. Retirement will be carried out in two phases to ensure a smooth transition. Following table details the timeline of the retirement process and its impacts:

+>

+> | Timeframe | Action | Impact |

+> ||||

+> | February 2024 |Collaboration controls will no longer be available to install from AppSource.|- New deployments of the collaboration controls in Power Apps environments aren't possible. </br> - Existing installations aren't affected.|

+> | May 2024 |The internal service that powers the controls will be retired.|- The controls will stop supporting integration with Microsoft 365 and will return errors to users. </br> Data generated and managed through the controls won't be impacted. For more information, see the table later in this article.|

+>

+> Artifacts created and managed through the controls will continue to exist after the service is retired.

+>

+> | Control | Impact |

+> |||

+> | **Approvals** |Approvals created in the Approvals control will remain in the Approvals app but will no longer be accessible in the Approvals control.|

+> | **Files** |Files managed in the Files control will remain in SharePoint but will no longer be accessible in the Files control.|

+> | **Meetings** |Meetings created in the Meeting control will remain in Outlook and Teams calendars but will no longer be accessible in the Meetings control.|

+> | **Notes** |Notes created in the Notes control will remain in the Dataverse notes table.|

+> | **Tasks** |Tasks created in the Task control will remain in Planner but will no longer be accessible in the Task control.|

+>

+> We recommend removing the Collaboration controls and Collaboration connector from all Power Apps solutions and prepare users for the upcoming Collaboration controls retirement.

+> [!WARNING]

+> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

+>

+> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

+>

+> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

+| **Microsoft 365 app host** | **frame-ancestor permission** |

+| Teams | `teams.microsoft.com`, `*.teams.microsoft.com`, `teams.cloud.microsoft` |

+| Microsoft 365 app | `*.microsoft365.com`, `*.office.com`, `m365.cloud.microsoft` |

+| Outlook | `outlook.live.com`, `outlook.office.com`, `outlook.office365.com`, `outlook-sdf.office.com`, `outlook-sdf.office365.com`, `outlook.cloud.microsoft` |

+| App type | TeamsJS version | App manifest version | Next steps|

+|||||

+|**Teams apps extended across Outlook and Microsoft 365**| TeamsJS v.2.19.0 or later | v.1.13 or later | [Extend a Teams app to run across Microsoft 365](../m365-apps/extend-m365-teams-personal-tab.md) or [Create a new Microsoft 365 app](../m365-apps/extend-m365-teams-personal-tab.md#quickstart) |

+|**Existing Teams-only apps**| Update to TeamsJS v.2.19.0 when possible (v.1.12 is still supported*) | 1.12 | [Understand TeamsJS backwards compatibility](../tabs/how-to/using-teams-client-library.md#backwards-compatibility) and [Update to TeamsJS v.2.0](../tabs/how-to/using-teams-client-library.md#updating-to-teamsjs-version-20)|

+|**New Teams-only apps**| TeamsJS v.2.19.0 or later | 1.12 | [Create a new Teams app using Teams Toolkit](../toolkit/create-new-project.md)|

+**Use the latest TeamsJS (v.2.19.0 or later) whenever possible, to take advantage of the latest improvements and new feature support including Teams-only apps. TeamsJS v.1.12 continues to be supported, however, no new features or improvements will be added. The 1.12 and 1.13 schemas are otherwise the same. For more information, see [TeamsJS library](../tabs/how-to/using-teams-client-library.md).*

+Use the Teams Toolkit extension for Visual Studio Code to start with a personal tab that's enabled to run in Teams, Outlook, and Microsoft 365.

+2. Select the Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.PNG" border="false"::: icon in the activity bar.

+3. Select **Create a New App**.

+4. Select **Tab**.

+5. Select **Basic Tab**.

+6. Select a preferred programming language.

+7. Select a location on your local machine for the workspace folder and enter your application name.

+8. Once your app is created, within the Teams Toolkit extension, make sure you're signed in to the appropriate Microsoft 365 Developer Program sandbox tenant and Azure account. These options are available in the **ACCOUNTS** section of the extension.

+9. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.

+10. Enter **Teams: Provision** to create the Teams app resources such as Azure App Service, App Service plan, Azure Bot, and Managed Identity in your Azure account. Alternatively, you can select **Provision** under **LIFECYCLE** section of the extension.

+11. Select a subscription and a resource group. If you choose to create a new resource group, you need to specify the location.

+12. Select **Provision**.

+13. Select **Command Palette...** under the View option or **Ctrl+Shift+P**.

+14. Enter **Teams: Deploy** to deploy the sample code to the provisioned resources in Azure and start the app. Alternatively, you can select **Deploy** under the **LIFECYCLE** section of the extension.

+From here, you can skip ahead to [upload your custom app in Teams](#upload-your-custom-app-in-teams) and preview your app in Outlook and the Microsoft 365 app. The app manifest and TeamsJS API calls are already updated for Microsoft 365 app.

+Your app must refer to the npm package `@microsoft/teams-js@2.5.0` (or later) to run in Outlook and Microsoft 365. Previous versions of TeamsJS are still functional in Outlook and Microsoft 365 apps, but deprecation warnings are logged. Support for the previous versions eventually gets discontinued in both Outlook and Microsoft 365. To determine the latest version of TeamsJS, see [TeamsJS GitHub repository](https://github.com/OfficeDev/microsoft-teams-library-js).

+1. Open **App registrations**.

+ :::image type="content" source="images/azure-app-registration-clients.png" alt-text="Screenshot shows the authorized client IDs from the app registrations on Azure portal.":::

+You can check for host support of a given capability at runtime by calling the `isSupported()` function on that capability (namespace), and adjusting app behavior as appropriate. This action allows your app to light up UI and functionality in hosts that support it and provide a graceful fallback experience in hosts that don't. For more information, see [Differentiate your app experience](../tabs/how-to/using-teams-client-library.md#differentiate-your-app-experience).

+You can debug your tab application running in Teams, Microsoft 365 app, and Outlook with Teams Toolkit in Visual Studio Code.

+Choose the desired debug method and select the **F5** key. Upon the first run of the local debug, Teams Toolkit prompts you to sign in to your Microsoft 365 tenant account.

+Teams Toolkit (`F5`) doesn't support debugging Android apps in Microsoft 365. Here's how to remotely debug your app running in Microsoft 365 for Android app:

+2. Launch the Microsoft 365 app From your Android device.

+3. Open your profile **Me > Settings > Allow debugging**, and toggle on the option for **Enable remote debugging**.

+4. Leave **Settings**.

+5. Leave your profile screen.

+6. Select **Apps** and launch your uploaded custom app to run within the Microsoft 365 app.

+7. Ensure your Android device is connected to your dev machine. From your dev machine, open your browser to its DevTools inspection page. For example, go to `edge://inspect/#devices` in Microsoft Edge to display a list of debug-enabled Android WebViews.

+8. Find the `Microsoft Teams Tab` with your tab URL and select **inspect** to start debugging your app with DevTools.

+9. Debug your tab app within the Android WebView in the same way that you [remotely debug](/microsoft-edge/devtools-guide-chromium/remote-debugging) a regular website on an Android device.

+We recommend that you build or upgrade your existing message extensions to maximize their usefulness and usability in Copilot for Microsoft 365. Message extensions should support one or more search commands, as Copilot for Microsoft 365 recognizes them as skills it can execute on behalf of the user. Additionally, your extensions must meet the standards for compliance, performance, security, and user experience outlined in this article.

+| :::image type="icon" source="../assets/images/publish-app/dont-icon.png" border="false"::: | Prompt injections: Ensure that the descriptions don't guide Copilot to take actions that bypass the normal functioning of the application. Additionally, the description mustn't contain symbols or text that indicate that it can be used as code for prompt injection. Avoid using phrases, functions, and code that call an app recurrently. |

+Long and short app descriptions must be clear and define the app's scope. To render an app as a plugin in Copilot for Microsoft 365, modify the app description to suit the following plugin requirements:

+Command description maps user intent and utterance to search command inside a plugin and must be built based on the analysis of the user intent and keywords. Search command descriptions must:

+|Microsoft 365 Channel| For users to interact with your message extension from Outlook, you need to add Microsoft 365 channel to your bot. For more information, see [Add Microsoft 365 channel](../m365-apps/extend-m365-teams-message-extension.md#add-microsoft-365-channel-for-your-app). [*Mandatory*]|

+> [!IMPORTANT]

+> If applicable, update your Content Security Policy headers and `X-Frame-Options` in accordance with [Configure Content Security Policy headers](../m365-apps/extend-m365-teams-personal-tab.md#configure-content-security-policy-headers).

+Collaboration controls are designed for [model-driven applications](/power-apps/maker/model-driven-apps/model-driven-app-overview). Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md). The following section covers how to create a model-driven app.

+ :::image type="content" source="../assets/images/collaboration-control/hide-label-properties.png" alt-text="Screenshot shows how to select the Hide Label option.":::

+ :::image type="content" source="../assets/images/collaboration-control/new-collab-approval.png" alt-text="Screenshot shows Controls form the designer are successfully added.":::

+Now youΓÇÖve successfully added the Collaboration controls to your application. You can now run your application in Power Apps and launch the controls. As settings aren't configured yet, you can't create entities such as Tasks, or Meetings until those are added.

+1. To use the Files control, you need to configure to an existing SharePoint site or create a new SharePoint site. To create a new site, see [create a site](/sharepoint/create-site-collection).

+To create meetings with users outside of your organization such as customers and use virtual visit features within your app you would need to provide a Bookings business. For more information, see [Microsoft Bookings](/microsoft-365/bookings/bookings-overview?view=o365-worldwide&preserve-view=true).

+1. The saved task appears in the tasks list.

+Following are the steps to add a shared calendar to your Outlook (optional):

+1. On the Home tab of the ribbon, in the **Manage Calendars** section, select **Open Calendar** > **Open Shared Calendar**.

+1. In the Open a Shared Calendar dialog, enter the person's name. Select the person you're looking for and then select **OK**.

+Developers can use the Collaboration controls and Settings REST API to manage settings, start, map, and retrieve collaboration activities with their own business model entities. Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

+Power Automate can be used to automate workflows around your Collaboration Manager application. For example, automatically create tasks when a new record is created.

+Collaboration control connector enables developers to access Collaboration control APIs by triggers or actions in automated workflows in Microsoft Power Automate, Microsoft Power Apps, and Azure Logic apps. Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

+The Collaboration controls enable applying Microsoft 365 and Microsoft Teams for Approvals, Files, Meetings, Notes, and Tasks to enable contextual collaboration around business processes. These controls allow you to build custom collaborative experiences that can be surfaced right in Teams. The solutions that make up Collaboration controls allow makers to build applications that integrate with Microsoft 365 services like Planner, Bookings, Outlook, and SharePoint in a low code manner. Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

+When the Tasks grid is populated by a low number of Tasks the grid context menu might appear cropped and require use of scrollbars.

+When navigating into the Archive folder after archiving files, users might experience duplicate archive folders. Navigating from the archive folder(s) to the files main view resolves the issue, and files that are archived aren't removed.

+ 1. It'sBrowser logging is supported when using a browser to run the Collaboration Manager app through Power Platform and Teams web.

+External tasks that can be assigned to users who aren't part of your organization or don't have access to your application such as assigning a task to a customer.

+To enable, you need an extra step of passing an XML string to each instance of Tasks PCF control attached to the sub grid component on desired MDA form. XML string is a parametrized query that allows the control to extract the required data from a table that contains customer information.

+ > The customer entity created is where the task control pulls the customer information from when assigning an external task. The Parent field ensures that the customer entity is linked to an Inspection record.

+ :::image type="content" source="~/assets/images/collaboration-control/tasks-property.png" alt-text="Sceenshot shows an example of the updated properties in the Tasks property settings.":::

+1. Go to the Controls tab and select :::image type="icon" source="~/assets/images/collaboration-control/edit-icon.png" alt-text="Screenshot shows how to edit the tasks."::: on Custom Tasks property to add the Fetch XML generated.

+Collaboration controls currently work best within Microsoft Teams. You can create a new app that can be embedded inside Teams app as both, a personal app and a tab app. Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

+ :::image type="content" source="../assets/images/collaboration-control/hide-the-nav-bar.png" alt-text="Screenshot shows the Hide the navbar option.":::

+1. Select **Publish all customizations**.

+As the settings are defined, you can now add the app to Microsoft Teams. To start with, browse to the **Apps** page in the Power Apps maker portal and find the app that you created and select ellipse **…**.

+ 1. Ensure that you note the team name. You'll need it later to assign this team as the owner of a record.

+Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md). To install the components into a Power Platform environment, the following roles are required:

+You install the Collaboration controls into your dataverse environment through [Microsoft AppSource.](https://appsource.microsoft.com/en-us/product/dynamics-365/mscm.collaboration-toolkit-preview?flightCodes=collaborationcontrols&signInModalType=2&ctaType=1)

+| Collaboration controls Settings Objects | Provides predefined settings values that are used by the Collaboration controls.|

+Before installation, you must be in a Power Platform environment or admin tenant. You need a dataverse environment with a database. If you don't have one, you need to [create a new one](/power-platform/admin/create-environment) to continue with the installation.

+1. You're directed to Power Platform Admin Center. Select an environment from the dropdown menu and agree to the terms and policy statements.

+1. Ensure that you're in the environment where the controls are installed. You can view the environment and can change the environment on the upper-right corner of the Power Apps portal if necessary.

+1. Select the **Solutions** tab to view all the solutions that you installed in the right environment.

+A new capability with this release is a set of Virtual tables. These enable developers to interact with Graph via OData APIs.

+The Collaboration controls core solution includes a set of [virtual tables](/power-apps/developer/data-platform/virtual-entities/get-started-ve), which can be used for programmatic access to the data created by the Collaboration controls. Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

+>

+> * [Virtual tables](/power-apps/developer/data-platform/virtual-entities/get-started-ve) also known as virtual entities, enable the integration of data residing in external systems by seamlessly representing that data as tables in Microsoft Dataverse, without replication of data and often without custom coding.

+> * For more information on the Dataverse REST API, see [use the Microsoft Dataverse Web API](/power-apps/developer/data-platform/webapi/overview).

+* `planId`: Identifies the plan this task is assigned to, use the value from the previous step

+* `@odata.etag`: Etag for the task, you must perform a read to retrieve the latest version.

+* `@details.etag`: Etag for the task details, you must perform a read using the query $select query parameter to include the `m365_details` column to retrieve the latest version. This value is included in the `m365_details` column of the response. This value isn't the same as the `@odata.etag` because in the Planner backend, the Task and its details are stored separately.

+Virtual tables allow you to execute requests, which return collections of virtual records. We saw this earlier in this document where we requested all the planner tasks associated with a specific collaboration session. It's also possible to request all the planner tasks associated with a specific planner plan by using a `$filter` system query like `$filter=m365_planid eq {{planId}}`. One issue that happens if you use such a query is that records are returned for planner tasks, which aren't associated with a collaboration session that is, planner tasks that were created by a means other than using a Collaboration control. If you attempt to read, update, or delete such a record, the request fails because the virtual table can't find the associated collaboration map.

+In Task 5, described how to Retrieve Associated Planner Tasks. This operation is supported for all of the virtual tables. When executing this request, you must include a `$filter` query, which specifies the Collaboration Root ID as follows:

+* Other filtering options can't be combined with this `$filter` query and if there they're ignored.

+When the Dataverse Web API is called to retrieve multiple records from the following virtual tables, a mandatory key attribute is required. Graph Booking Appointments requires a valid `m365_bookingbusinessid` is included in the query. If the key attribute isn't provided, then the request fails as follows:

+We recommend using delegated permissions for the signed-in user. If your application doesn't need a signed-in user, consider using application permissions, also known as the app-only access scenario. Only administrators can grant consent for application permissions. For more information, see [application permissions](/graph/permissions-overview#application-permissions).

+Depending on the platform or device where you want to target your app, additional configuration might require, such as redirect URIs, specific authentication settings, or details specific to the platform.

+> - Implicit grant isn't required if single sign-on (SSO) is enabled on a tab app.

+> - Two separate apps registered in Microsoft Entra ID will require individual tokens for each app. Use the [OBO flow](/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow) to enable communication between the apps.

+To implement SSO authentication in a personal tab, follow these steps:

+1. The token retrieved using `getAuthToken()` must be exchanged on the server-side using Microsoft Entra OBO flow to get access to those other Graph APIs. Ensure that you use the Microsoft Entra v2 endpoint for this exchange.

+1. When you try to execute the token exchange for a user for the first time, if Microsoft Entra refuses to exchange tokens it might be because the user hasn't consented to give your app permission to the user's data. In these cases, your exchange fails with either the `invalid_grant` or `interaction_required` error. Examples of *invalid_grant* errors include when consent is required or *auth_code*, assertion, or the refresh token is expired, revoked, malformed, or absent. Examples of *interaction_required* include when multifactor authentication or corporate device enrollment is required.

+1. After the app user has granted more permissions, retry the OBO flow to get access to additional Graph APIs. For more information, see

+[Teams Personal Tab SSO Authentication](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/tab-personal-sso-quickstart/js/src/components/Tab.js#L64-L101)

+sample code.

+If after three to five attempts the OBO flow still fails, the user might not have consented to all the required scopes, and you might have to prompt them to consent again.

+description: In this article, learn about the prerequisites and tools needed to build a Microsoft Teams personal, channel, or group tab.

+* Set Content Security Policy headers to allow Teams and any other [host applications](../../m365-apps/overview.md) of your app:

+* For Internet Explorer 11 compatibility, set `X-Content-Security-Policy`. Alternately, set header `X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/`. This header is deprecated but most browsers still accept it.

+* Sign-in pages don't render in iFrames as a safeguard against clickjacking. Your authentication logic needs to use a method other than redirect. For example, use token-based or cookie-based authentication.

+* Style your tabs based on the Teams client's theme, design, and intent. Tabs work best when built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location.

+* Within your content page, add a reference to [Microsoft Teams JavaScript client library](/javascript/api/overview/msteams-client) using script tags. After your page loads, make a call to `app.initialize()`, or else your page isn't displayed.

+| &nbsp; | [ngrok](https://ngrok.com/download) | Ngrok is a reverse proxy software tool. Ngrok creates a tunnel to your locally running web server's publicly available HTTPS endpoints. Your server's web endpoints are available during the current session on your computer. When you shut down or put your device to sleep, the service is no longer available. |

+* When users invoke Stage View from Adaptive Cards, Stage View opens in a new Teams window along with the originating chat or channel thread in the side panel. This new app canvas is called the [Collaborative Stage View](#collaborative-stage-view). The Collaborative Stage View allows users to multi-task and collaborate with each other.

+> [!WARNING]

+> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

+>

+> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

+>

+> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

+The following steps show how to invoke Collaborative Stage View:

+HTML or JavaScript-based dialogs have access to the entire area of the dialog below the header. While that offers a great deal of flexibility, if you want padding around the edges to align with the header elements and avoid unnecessary scroll bars, you must specify the CSS.

+> [!WARNING]

+> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

+>

+> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

+>

+> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

+Here are a few examples of common use cases.

+description: Learn how to use dialogs with Microsoft Teams bots, including Bot Framework cards, Adaptive Cards, and deep links.

+Invoke dialogs (referred as task modules in TeamsJS v1.x) from Microsoft Teams bots using buttons on Adaptive Cards and Bot Framework cards that are hero, thumbnail, and connector for Microsoft 365 Groups. Dialogs are often a better user experience than multiple conversation steps. Keep track of bot state and allow the user to interrupt or cancel the sequence.

+> [!WARNING]

+> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

+>

+> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

+>

+> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

+The following steps provide instructions on how to invoke a dialog (referred as task module in TeamsJS v1.x) using `task/fetch`:

+* HTML or JavaScript that is `TaskInfo.url`: Once you've validated what the user has entered, you call the `microsoftTeams.tasks.submitTask()` function referred to hereafter as `submitTask()` for readability purposes. You can call `submitTask()` without any parameters if you want Teams to close the dialog (referred as task module in TeamsJS v1.x), but you must pass an object or a string to your `submitHandler`. Pass it as the first parameter, `result`. Teams invokes `submitHandler`, `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 action allows Teams to validate that the app sending the result is the same one, which invoked the dialog. Your bot receives a `task/submit` message including `result`. For more information, see [payload of `task/fetch` and `task/submit` messages](#payload-of-taskfetch-and-tasksubmit-messages).

+ The following tabs provide `task/fetch` and `task/submit` invoke messages in Node.js and C#:

+|Dialog sample bots-V4 | This sample shows how to create dialogs using Bot Framework v4 and Teams tab. |[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)

+Add modal dialogs (referred as task modules in TeamsJS v1.x) to your tabs to simplify the user experience for any workflows that require data input. Dialogs allow you to gather user input in a Microsoft Teams-Aware modal window, such as editing Planner cards. You can use dialogs to create a similar experience.

+> [!WARNING]

+> Microsoft's cloud services, including web versions of Teams (*teams.microsoft.com*), Outlook (*outlook.com*), and Microsoft 365 (*microsoft365.com*) domains are migrating to the *cloud.microsoft* domain. Perform the following steps before June 2024 to ensure your app continues to render on the Teams web client:

+>

+> 1. Update TeamsJS SDK to v.2.19.0 or higher. For more information about the latest release of TeamsJS SDK, see [Microsoft Teams JavaScript client library](https://www.npmjs.com/package/@microsoft/teams-js).

+>

+> 2. Update your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers in your Teams app to allow your app to access the ***teams.cloud.microsoft*** domain. If your Teams app extends across Outlook and Microsoft 365, ensure you allow your app to access ***teams.cloud.microsoft***, ***outlook.cloud.microsoft***, and ***m365.cloud.microsoft*** domains.

+After validating user input, call `microsoftTeams.dialog.url.submit()`. You can call `submit()` without any parameters if you want Teams to close the dialog, or you can pass an object or string `result` back to your app as the first parameter, and an `appId` of the app that opened the dialog as the second parameter. If you call `submit()` with a `result` parameter, you must pass an `appId` (or an array of `appId` strings of apps authorized to receive the result of the dialog). This action enables Teams to validate that the app sending the result is the same as the invoked dialog.

+The following code is the example of payload:

+The following code is the example of Invoke request:

+There are five fields on this form but this example requires only three values, `name`, `email`, and `favoriteBook`.

+The following table provides the possible values of `err` that your `submitHandler` receives:

+| `TaskInfo.url` and `TaskInfo.card` specified. | You must specify a value for either card or URL. |

+Dialogs 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 dialog.

+You can invoke dialogs in three ways:

+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#dialoginfo-object), the padding is added for you. For more information, see [CSS for HTML or JavaScript dialogs](~/task-modules-and-cards/task-modules/invoking-task-modules.md#css-for-html-or-javascript-dialogs).

+2. Remove `TAB_DOMAIN` and `TAB_ENDPOINT` from the `teamsapp.local.yml` file.

+3. If you're using React, add the configuration `WDS_SOCKET_PORT=0` in `teamsapp.local.yml` file to activate hot reloading while debugging in React after utilizing the tunnel service.

+4. Run the deployed app

+ 1. Open the debug panel (**Ctrl+Shift+D** or **View > Run**) from Visual Studio Code.

+ 2. Select **Launch Remote in Teams (Edge)** from the launch configuration dropdown.

+ 3. Select the Start debugging (F5) button.

+ 4. You'll be prompted to upload a custom app into Teams. Select **Add**.

+ :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/remote-app-client.png" alt-text="Screenshot shows an app being installed.":::

+ The app opens as a personal tab.

+ :::image type="content" source="../assets/images/debug-mobile/login.PNG" alt-text="Screenshot shows the personal tab app page.":::

+1. Run the following commands in your project directory:

+ 1. `teamsfx provision --env local`

+ 1. `teamsfx deploy --env local`

+ 1. `teamsfx preview --env local`

+|18/12/2023|App caching in chat, channel, and meeting tab scopes is available for iOS.| Build tabs > [App caching for your tab app](tabs/how-to/app-caching.md) |

+| 06/04/2023 | Set up Microsoft license management for third-party SaaS apps in Partner Center as part of the offer publishing that allows easy management and tracking of licenses for third-party app subscriptions within Teams. | Monetize your app > [Set up Microsoft license management](~/concepts/deploy-and-publish/appsource/prepare/manage-third-party-apps-license.md) |

+|12/09/2021| Introduced step-by-step guide to create meeting side panel | Build apps for Teams meetings > Enable and configure apps for meetings > [Step-by-step guide to create meeting side panel in Teams](sbs-meetings-sidepanel.yml)|

+| 10/31/2019 | New documentation structure, and major article refactoring. Report any dead links or 404s by creating a GitHub Issue. | All of them! |

+| 08/08/2018 | Message extensions now support multiple commands. | [composeExtensions.commands](~/resources/schem#composeextensionscommands)|

+* ***February 02, 2024***: Teams, Outlook, and Microsoft 365 web domains are migrating to *cloud.microsoft* domain. [Configure your app](m365-apps/extend-m365-teams-personal-tab.md#configure-content-security-policy-headers) before June 2024 to ensure continued functionality.

+* ***February 02, 2024***: The Collaboration controls for model-driven applications **are** set to retire by May 2024. We recommend removing the Collaboration controls and Collaboration connector from all Power Apps solutions and prepare users for the upcoming [Collaboration controls](~/samples/collaboration-control.md) retirement.