+ Title: Build Adaptive Card-based Loop component

+description: In this module, learn and build Adaptive Card Loop components.

+ms.localizationpriority: high

+# Adaptive Card-based Loop components

+> [!NOTE]

+>

+> * Adaptive Card-based Loop components are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md).

+> * Adaptive Card-based Loop components require Adaptive Cards version 1.6 or later.

+Adaptive Card-based Loop components enable you to build collaborative experiences within your Teams [message extensions](../messaging-extensions/what-are-messaging-extensions.md) that work across Microsoft 365. Adaptive Card-based Loop components have actionable content that enables users to make live updates without having to switch context between Microsoft 365 apps, such as Teams and Outlook.

+[Loop components](https://support.microsoft.com/office/first-things-to-know-about-loop-components-in-microsoft-teams-ee2a584b-5785-4dd6-8a2d-956131a29c81) were first released in Teams followed by other Microsoft 365 apps such as Outlook, Whiteboard, and Loop app. Loop components allow users to collaborate and share live content with others in the chat, email, meeting, Whiteboard or Loop app. Because Loop components stay in sync across different Microsoft 365 apps, they enable users to coauthor content and make real-time updates on their content. For more information, see [overview of Loop components in the Microsoft 365 ecosystem](/microsoft-365/loop/loop-components-teams).

+Following is an example of an Adaptive Card-based Loop component:

+This article provides an overview of how to build and test your Adaptive Card-based Loop components.

+## Prerequisites

+Before you build an Adaptive Card-based Loop component, ensure that you meet the following prerequisites:

+1. [Build a message extension with a search command](../messaging-extensions/what-are-messaging-extensions.md).

+1. Add [link unfurling](../messaging-extensions/how-to/link-unfurling.md) support to the message extension.

+1. Use [Universal Actions for Adaptive Cards](../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Work-with-Universal-Actions-for-Adaptive-Cards.md).

+1. [Extend your Teams message extension across Microsoft 365](extend-m365-teams-message-extension.md).

+## Build Adaptive Card-based Loop component

+To build the Adaptive Card-based Loop component, follow these steps:

+1. Ensure that the Adaptive Card adheres to the [design guidelines](design-loop-components.md) to build an actionable and coherent Adaptive Card-based experience for your end users.

+1. To enable Loop component, add the URL that uniquely identifies the card in the [metadata.webUrl](https://adaptivecards.io/explorer/Metadata.html) property in the [Adaptive Card schema](https://adaptivecards.io/explorer/). The `metadata.webUrl` property supports portability through the Copy button present in the Loop component header.

+### Example

+The following is a JSON example of an Adaptive Card-based Loop component with the `metadata` and `webUrl` properties:

+```json

+{

+ "type": "AdaptiveCard",

+ "version": "1.6",

+ "metadata": {

+ "webUrl": "https://contoso.com/tab"

+ },

+ "body": [

+ {

+ ....

+ },

+ ]

+ }

+```

+### Query parameters

+|Property|Type|Description|Required|

+|||||

+| `metadata`| Metadata | Defines various metadata properties typically not used for rendering the card. | No |

+| `webUrl` | String | URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.| No |

+## Test your Loop component

+You can test the Loop component in the developer preview environments of Microsoft Teams and Outlook for web.

+### Test in Microsoft Teams

+To configure, distribute, and manage your application use the [Developer Portal for Teams](../concepts/build-and-test/teams-developer-portal.md). You can test and debug your app in the Developer Portal using the following options:

+* **Overview page**: On the **Overview page**, under **Teams store validation**, you can see a snapshot of your app's configuration and check if your app package validates against Teams store test cases.

+* **Preview in Teams**: The **Preview in Teams** button launches your app quickly in the Teams client for debugging.

+### Test in Outlook for web

+To turn on the Adaptive Card-based Loop component in Outlook for web, follow these steps:

+1. Create a search-based message extension using [Teams App Camp](https://microsoft.github.io/app-camp/).

+1. [Create a Microsoft 365 developer tenant](https://developer.microsoft.com/microsoft-365/dev-program) or sign in with your test tenant credentials.

+1. [Enable Targeted Release for everyone](/microsoft-365/admin/manage/release-options-in-office-365?view=o365-worldwide&preserve-view=true).

+1. Send an email from the tenant admin account to [AC Loops Dev Preview Help](mailto:acloops-preview-help@microsoft.com). Microsoft will verify the admin user and enable support for Loop components for this tenant.

+ > [!NOTE]

+ > For any help in building Adaptive Card-based Loop components reach out to [AC Loops Dev Preview Help](mailto:acloops-preview-help@microsoft.com).

+The Adaptive Card generated by your app is rendered as a Loop component.

+## See also

+[Design your Loop component](design-loop-components.md)

+ Title: Loop component design guidelines

+description: In this article, learn how to design Adaptive Card-based Loop components.

+ms.localizationpriority: medium

+# Loop component design guidelines

+> [!NOTE]

+> Adaptive Card-based Loop components are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md).

+Microsoft Loop components are live, actionable units of productivity that stay in sync and move freely across Microsoft 365 apps. It includes the capability for you to create Loop components by evolving an existing Adaptive Card into a Loop component or creating a new Adaptive Card-based Loop component.

+## Loop component key features

+**Live**: Your Adaptive Card must be self-updating when the card is loaded, such as when opening an email or chat, to reflect the latest information.

+**Embedded**: Adaptive Cards are embedded, so there's nothing specific needed from you.

+**Actionable**: Loop components allow the user to take action to complete a flow within the component itself; beyond simply viewing information or opening a browser. If your Adaptive Card is a view-only experience, look for opportunities to make it actionable, as this is a core card element to delight users. Ensure that an Adaptive Card with view-only experience doesn't change to a Loop component, in this case, it must remain an Adaptive Card only.

+ > [!NOTE]

+ > Certain user permissions or modes of your component might not be actionable, but the common cases must be actionable.

+You can make your Adaptive Card actionable by including any of the following actions:

+* Approve an expense report

+* Add a comment

+* Update a date

+* Update price, such as dollar amount

+* Change an assignment or status value

+* Add or update data

+**Portable**: Adding the URL attribute as required in the developer guidance ensures that your component can be live-copied anywhere the Adaptive Card-based Loop component is supported.

+|Property|Function|

+|||

+|Live| The latest information is populated in the card. If there are multiple instances, they remain in sync as updates are made. |

+|Embedded | Cards can be placed into documents and conversations that are separate from the rest of the content. |

+| Actionable | Tasks can be completed inline. |

+| Portable | Components can work across the Microsoft 365 app that supports Loop components. |

+## Loop component elements

+An Adaptive Card-based Loop component comprises of the body, header, and border.

+|Loop component element |Developer provides |Platform provides |

+||||

+|**Body** | Contents fully controlled by you | Rendering and styling of controls based on your code. |

+| **Header** | Icon and name | Elements and layout are standard and provided by platform |

+|**Border** | NA | Standard border for all Loop components. |

+## Loop component body

+The Loop component body makes your component unique. You can give your users a positive experience and grow usage and retention by building a component that embodies the Loop component attributes and provides customer value.

+The details of the component body are determined by the specifics of your usersΓÇÖ needs and scenarios.

+The following are the best practices for a Loop component body:

+* Go to [Adaptive Cards Home](https://adaptivecards.io) and review the [Adaptive Cards overview](/adaptive-cards/) article to understand the basics and core design principles of Adaptive Cards.

+* Follow the [Adaptive Card design guidelines](../task-modules-and-cards/cards/design-effective-cards.md), which include tools, examples, notes about responsive design, and pixel density.

+* The following list provides the Loop component specific considerations:

+ * Ensure that your component is true to the Loop components attributes such as, live, actionable, embedded, and portable.

+ * [DonΓÇÖt add a separate button to open in browser.](#dont-add-a-separate-button-to-open-in-browser)

+ * [DonΓÇÖt add a duplicate header or border.](#dont-add-a-duplicate-header-or-border)

+### DonΓÇÖt add a separate button to open in browser

+The Loop component header provides a standard way to open a browser-based view of the component based on your URL. Thus, there's no need to add a separate button to your component for actions such as, **View Details** or **Open on Web**.

+You can add buttons or links for more specific views, for example, **View Related Items**. When possible, provide the required information and interaction within the card.

+### DonΓÇÖt add a duplicate header or border

+All Loop components have a standard header and border. Ensure that your Adaptive Card code must not duplicate the header and border. You can have an item-specific title for your component but ensure that the app name and icon isn't the same.

+## Loop component header

+The platform provides the component header and includes standard elements such as app logo, app name, shared location, and copy.

+|Counter |Description |

+|||

+|1 | App logo: Full color app logo of your app. |

+|2 | App name: Full name of your app. |

+|3 | Shared locations (Loop control) |

+|4 | Copy component |

+**App name** is drawn from the component contract. We recommend to use a concise name for your app.

+**App logo** is drawn from the component contract. Ensure that the logo provided works on both light and dark backgrounds since the same asset is used for light, dark, and high contrast themes in Teams.

+## Loop component border

+The component border separates your component from the content around it. It helps users understand that the Loop component is live and separate from the contents surrounding it such as, email or chat.

+The border appears automatically.

+## Next step

+> [!div class="nextstepaction"]

+> [Adaptive Card-based Loop components](cards-loop-component.md)

+| [**Adaptive Card Loop components**](./design-loop-components.md)|`composeExtensions.messageHandlers`|Web (preview), Desktop (preview) |Web (preview), Desktop (only for [new Outlook](https://support.microsoft.com/office/getting-started-with-the-new-outlook-for-windows-656bb8d9-5a60-49b2-a98b-ba7822bc7627) preview) |-| Viewable (not composable) in Teams/Outlook mobile preview (iOS, Android). See [notes](cards-loop-component.md).|

+| [**Stage View**](extend-m365-teams-message-extension.md#stage-view)|`composeExtensions.messageHandlers`|Web, Desktop, Mobile|Web (preview), Desktop (preview)|-| Viewable/actionable (not composable) in Outlook mobile preview (iOS, Android). See [notes](extend-m365-teams-message-extension.md#stage-view).|

+ Title: Microsoft Teams updates

+description: Learn about the latest updates to Microsoft Teams.

+ms.localizationpriority: medium

+# Microsoft Teams update

+[The new Microsoft Teams client](https://www.microsoft.com/en-us/microsoft-365/blog/2023/03/27/welcome-to-the-new-era-of-microsoft-teams/) is reimagined from the ground up with performance in mind. It's faster, simpler, smarter, and flexible to provide better experience for your apps and users. The new Teams client supports all the existing Teams app capabilities except Adaptive Card tabs. If you have an app that runs inside the Classic Teams, the app will most likely run in the new Teams client without any issues.

+The following are the advantages of the new Teams client:

+* The new Teams client uses the Evergreen version of Microsoft Edge WebView2 to ensure Teams client is always up to date with the latest fixes and improvements available in Microsoft Edge and Chromium.

+* The new Teams client has been rebuilt from the ground up with performance in mind and includes all the platform infrastructure responsible for bootstrapping your app and powering the SDK APIs that it uses.

+You can use the following property to identify your app usage in the new Teams or Classic Teams client:

+* For TeamsJS v1.x: [`hostName`](/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest#@microsoft-teams-js-context-hostname&preserve-view=true)

+* For TeamsJS v2.x: [`AppHostInfo`](/javascript/api/@microsoft/teams-js/app.appinfo?view=msteams-client-js-latest&preserve-view=true#@microsoft-teams-js-app-appinfo-host)

+> [!NOTE]

+> If hostName isn't defined, then assume that your app is running in the Classic Teams client.

+The new Teams or Classic Teams client are represented using the `teams` and `teamsModern` fields, respectively.

+## Timelines and rollout

+To ensure a smooth transition, a phased rollout of the new platform is planned as follows:

+* **Developer preview**: The new Teams client is available in [public developer preview](dev-preview/developer-preview-intro.md). You can access the new platform and test your apps. We encourage you to provide feedback to help refine the platform.

+* **Availability of all platform features from Classic Teams**: All apps are available in the new Teams Client. All platform features except the features listed under [known issues](#known-issues) are now available. Platform features under known issues will be available by September 2023.

+## Known issues

+> [!NOTE]

+>

+> * We recommend to test apps, tabs, messaging extensions, bots, and link unfurling after switching from the Classic Teams client to the new Teams client.

+> * Adaptive Card tabs aren't supported in the new Teams client. If your app is using Adaptive Card tabs, we recommend you rebuild the tab as a web-based tab. For more information, see [build tabs for Teams](../tabs/what-are-tabs.md).

+The following are the Teams features that will be supported soon:

+* [Share in Teams](../concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md).

+* [Sideloading of apps](../concepts/deploy-and-publish/apps-upload.md) isn't supported in the new Teams client. You can sideload an app in the Classic Teams client and use it in new Teams client.

+For more information on known issues and gaps in the new Teams client, see [new Microsoft Teams](/microsoftteams/new-teams-desktop-admin?tabs=teams-admin-center#known-issues).

+If your app is working fine in the Classic Teams client but has issues in the new Teams, then raise an issue on [this page](https://github.com/MicrosoftDocs/msteams-docs/issues/new?title=&body=%0A%0A%5BEnter%20feedback%20here%5D%0A%0A%0A%0A%23%23%23%23%20Document%20Details%0A%0A%E2%9A%A0%20*Do%20not%20edit%20this%20section.%20It%20is%20required%20for%20learn.microsoft.com%20%E2%9E%9F%20GitHub%20issue%20linking.*%0A%0A*%20ID%3A%2019ddf42e-0a47-7717-52d4-e549155480a2%0A*%20Version%20Independent%20ID%3A%204bbe9beb-233f-cfd5-097b-f280aab5fde8%0A*%20Content%3A%20%5BMicrosoft%20Teams%20developer%20community%20support%20and%20feedback%20-%20Teams%5D(https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ffeedback)%0A*%20Content%20Source%3A%20%5Bmsteams-platform%2Ffeedback.md%5D(https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Ffeedback.md)%0A*%20Service%3A%20**msteams**%0A*%20GitHub%20Login%3A%20%40surbhigupta%0A*%20Microsoft%20Alias%3A%20**lajanuar**). For any other issues, request you to raise an issue on [support and feedback](../feedback.md#developer-community-forums).

+## See also

+[Teams app that fits](../overview.md)

+> Adaptive Card tabs aren't supported in the new Teams client. If your app is using Adaptive Card tabs, we recommend to rebuild the tab as a web-based tab. For more information, see [Build tabs for Teams](../what-are-tabs.md).

+* [Microsoft Teams update](../../resources/teams-updates.md)

+* [Microsoft Teams update](../resources/teams-updates.md)

+* [Adaptive Card-based Loop component](../../m365-apps/cards-loop-component.md)

+<br/>

+| 11/12/2018 | Tabs in group chat are now available in the released version of Teams. The tabs section is updated for clarity.| [Configurable tabs](~/concepts/tabs/tabs-configurable.md) |

+***August 21, 2023***: [Introduced the new Microsoft Teams client to provide better experience for your apps and users](resources/teams-updates.md).

+***August 21, 2023***: [Use Adaptive Card-based Loop components to build collaborative experiences within Teams message extensions that work across Microsoft 365.](m365-apps/design-loop-components.md)