Redigera

Dela via

Adaptive Card-based Loop components

  • Artikel

Note

Adaptive Card-based Loop components aren't available in Microsoft Teams and Microsoft Outlook on macOS and mobile clients.

Adaptive Card-based Loop components enable you to build collaborative experiences within your 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 contexts between Microsoft 365 apps, such as Teams and Outlook.

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

Screenshot shows an Adaptive Card-based Loop component.

Build an Adaptive Card-based Loop component

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

  1. Build a message extension with a search command.

  2. Add link unfurling to the message extension.

  3. Use Universal Actions for Adaptive Cards and define the refresh property to ensure that the card is always up to date. For more information, see up-to-date cards.

  4. Extend your message extension across Microsoft 365. This step includes the following actions:

    1. Update your app manifest to version 1.13 or later.
    2. Add the Microsoft 365 channel for your bot.
    3. Update the Microsoft Entra app registration for single sign-on (SSO).

  5. Add the URL that uniquely identifies the card in the metadata.webUrl property. The metadata.webUrl property supports portability through the Copy component button present in the Loop component header.

  6. Add your message extension to Teams and preview your message extension in Outlook. Alternatively, you can also debug your app in Developer Portal for Teams using the Preview in Teams button on the Overview page.

    A screenshot of Developer Portal's overview page with the Preview in Teams button highlighted in red.

Note

Ensure that the Adaptive Card-based Loop component adheres to the design guidelines to build an actionable and coherent Adaptive Card-based experience for your users.

Example

The following JSON payload is an 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"
  },
  "refresh": {
    "action": {
      "type": "Action.Execute",
      "title": "Submit",
      "verb": "personalDetailsCardRefresh"
    },
    "userIds": []
  },
  "body": [
    {
      ....
    },
  ]
  }

Schema

Property Type Description
metadata Metadata Defines various metadata properties typically not used for rendering the card.
webUrl String URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.

Note

  • When you copy an Adaptive Card-based Loop component, the URL of the Loop component is copied. When you paste the URL in a Teams chat or the Loop app, the link unfurls into the Adaptive Card-based Loop component.
  • Adaptive Card-based Loop components use the same refresh mechanism as regular Adaptive Cards. The content in an Adaptive Card-based Loop component is refreshed only when a user opens the 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 an Adaptive Card-based Loop component. View View View

See also