Adaptive Card-based Loop components

Note

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 Microsoft Teams message extensions 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 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.

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.

2. Add link unfurling support to the message extension.

3. Use Universal Actions for Adaptive Cards.

4. Extend your Teams message extension across Microsoft 365.

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 to build an actionable and coherent Adaptive Card-based experience for your end users.
2. To enable Loop component, add the URL that uniquely identifies the card in the metadata.webUrl property in the Adaptive Card schema. 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:

{
  "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 environments of Teams and Outlook for web.

Test in Microsoft Teams

To configure, distribute, and manage your application use the Developer Portal for Teams. 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 Microsoft 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.
2. Create a Microsoft 365 developer tenant or sign in with your test tenant credentials.

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

Code sample

Sample name	Description	Node.js	.NET	Manifest
Message extension with Adaptive Card-based Loop Component	This sample demonstrates how to create a message extension with Adaptive Card-based Loop component.	View	View	View

See also

Design your Loop component