How to build Adaptive Card-based Loop components
Nov 15, 2023 6:00 AM

How to build Adaptive Card-based Loop components

by HubSite 365 about Microsoft

Software Development Redmond, Washington

Pro UserDeveloperLoopLearning Selection

Boost your business with Adaptive Card-based Loop components, now in public preview, for improved productivity across Microsoft 365 apps.

Shubham Chauhan from Microsoft presents a 16-minute video that is centered on Adaptive Card-based Loop components and is aimed at developers. These components are interactive blocks that maintain synchronization and can be transferred across Microsoft 365 applications such as Teams and Outlook. During Build ‘22, developers were invited to a private preview to build these components with partners like SAP and Zoho engaging in creating them.

Now, these Adaptive Card-based Loop components are accessible in a public preview, and this video provides an introduction to constructing a set of these interactive elements. These components are designed to couple live business data with chats and emails. The components foster enhanced collaboration across Microsoft 365 platforms by allowing users to interact with business content in a live and dynamic fashion.

The video outlines a three-stage process for developing Adaptive Card-based Loop components, addressing necessary prerequisites, a special component, and crafting the final user experience. Initially, developers should identify use-case scenarios where productivity can be significantly elevated. Developers should also enable link unfurling for seamless integration of relevant information within chats and emails, extending the functionality across Microsoft 365 apps.


Efficiently integrating Loop components with existing message extension applications can offer significant productivity enhancements. For instance, Zoho Corp.'s ManageEngine ServiceDesk Plus utilizes these Loop components for incident and ticket management, aiming to improve response times and user experience across multiple applications. This approach signifies substantial returns on investment for developers, with the added benefit of customer satisfaction.

Integrating a unique identifier URL into the metadata.webUrl property of the Adaptive Card payload is the next crucial step. This addition effectively transforms Adaptive Card into Loop component, enabling portability. The video stresses that the practical application of these components should adhere to best practices to ensure users receive an optimal interactive experience.

Pablo Diaz-Gutierrez of Priority Matrix discusses reducing cognitive load by enabling users to engage with tasks within their current application context through Loop components. This capability allows for live updating, embeddable content functionality, actionable steps for users, and the portability of tasks across various applications while maintaining synchronization.

The advice to developers is to launch Loop components with fundamental features and refine them based on user input, ensuring ease of understanding and validation. Listening and incorporating feedback from the application submission review process is emphasized to align with guidelines for an improved customer experience. Moreover, the Loop components are portrayed as not only user-empowering but also easy to create.

Loop components streamline teamwork by minimizing app switching and enabling immediate content sharing and responses in Teams chat and Outlook messages. The building process for these components includes setting up a Microsoft 365 developer tenant, activating Targeted Release, and reaching out to Microsoft to enable support for Loop components. Detailed technical and design guidelines are available for developers seeking more information.

For more comprehensive guidance on creating these dynamic components, developers can find detailed information by following this link to Loop.

Understanding Loop Components

Loop components are revolutionizing collaborative work by enabling real-time interaction within familiar office applications. These components eliminate the need to switch contexts, allowing for a more cohesive workflow. They present a step forward in how data and tasks are handled within a digital workspace.

Adaptive Card-based Loop components are customizable blocks that offer live, updated information within the apps where teams spend most of their time. Empowering users to act on data without leaving the app enhances efficiency and focus. This integration represents a combination of productivity, flexibility, and convenience.

The key to Loop components' success lies in their integration with popular Microsoft 365 apps. Developers can create components tailored to specific business needs, ensuring a natural and intuitive user experience. The adoption of these components signifies a marked improvement in handling business tasks across different platforms.

As the digital workspace continues to evolve, Loop components offer an adaptable solution that meets both current and future needs of organizations. With the availability of public previews, developers now have the opportunity to innovate within their applications. By embracing these components, businesses can leap toward a more dynamic and collaborative future.

Read the full article Getting started with Adaptive Card-based Loop components

Loop - Beginners Guide to Adaptive Card-Based Loop Components

Learn about Getting started with Adaptive Card-based Loop components


The YouTube video discussed is centered on educating developers about the functionalities of Adaptive Card-based Loop components in Microsoft 365 applications, with a focus on Microsoft Teams and Outlook. It offers an in-depth tutorial on how to set them up and use them efficiently to promote productivity.

These Loop elements are interactive units of productivity that stay in sync and can freely move across multiple Microsoft 365 applications. They allow for seamless experiences, for example, by enabling live business data to be integrated into chats and emails. Partnerships with organizations like SAP, Zoho, and Priority Matrix have already been established to leverage these components.

It's important to note that these components are now publicly available for preview. In the presentation, we learn how users can create their personal sets of live, actionable, and portable Adaptive Card-based Loop components, and integrate their business content directly into Teams, Outlook, and other Microsoft 365 apps.

Partners interested in developing Loop Components using Adaptive Cards will need to follow three major stages: The prerequisites, the special ingredient, and the application.

  • Pre-requisites: Identify suitable use cases to enhance user productivity and build a Search-based message extension to support these scenarios. This component should be extended to Microsoft 365. Additionally, link unfurling is essential to enable relevant information to be embedded into chats and emails conveniently.

  • Special ingredient: After completing the prerequisites, the next step is to add the special ingredient that transforms your Adaptive Cards into portable Loop units. This involves including the URL that uniquely identifies the unfurled content in the metadata.webUrl property of your Adaptive Card payload.

  • Experience: The final stage involves adhering to best practices to ensure users get the optimum experience possible through the Loop unit. Live components should show updated information, be embeddable, actionable, and portable.

The video discusses the success stories of Zoho and Priority Matrix in using Loop components to make workflow smoother and more efficient.

Loop components simplify team collaborations, especially for distributed teams with varied schedules. They make sharing and editing content across apps and platforms easy, without the need for constant transition across apps.

Interested developers can build Loop components for their applications by creating a Microsoft 365 developer tenant, enabling Targeted Release, and sending an email from the tenant admin account to AC loops Dev Preview Help. Microsoft will then verify the admin user and enable support for Loop components.

For more technical and design guidelines, developers are urged to refer to the official Microsoft documentation and materials. Remember to keep user feedback at the core of developing and enhancing your Loop component!


More links on about Getting started with Adaptive Card-based Loop components

Adaptive Card-based Loop components
Aug 22, 2023 — Adaptive Card-based Loop components are live and actionable units of productivity that stay in sync and can move freely across Microsoft 365 ...
Build Adaptive Card-based Loop component - Teams
Aug 22, 2023 — Adaptive Card-based Loop components have actionable content that enables users to make live updates without having to switch context between ...


Adaptive Card, Loop Components, Getting Started, Card-based Loop, Adaptive Components, Component Tutorial, Adaptive Card Guide, Loop Component Basics, Adaptive Card Introduction, Start with Loop Components