This is the beginning of a new tutorial series on developing for Microsoft 365 with OutSystems Developer Cloud. In this series, we will explore how to build Adaptive Card-based Loop components. Throughout this series, I will refer to parts of the ODC with Bots for Teams tutorial series. Although it's not necessary to have completed the ODC with Bots for Teams tutorials, you should at least read them since they use the same technology stack.
💡
Please note that the podcast episode above is automatically generated from this article and may not include a proper level of detail.
Loop Components Overview
Loop components are a feature in Microsoft 365 that allow users to create live, actionable content that can be embedded and updated across various Microsoft 365 apps, such as Teams and Outlook. These components enable users to make real-time updates without switching contexts between different apps.
Their key characteristics are
Live and Actionable - They allow users to interact with the content directly within the app, making updates and changes that are immediately reflected across all instances of the component.
Cross-App Functionality - These components can be used across multiple Microsoft 365 apps, ensuring a seamless experience whether you're in Teams, Outlook, or another supported app.
Contextual Updates - Users can make updates without leaving their current workflow, reducing the need for context switching and improving productivity.
💡
At the time of writing, Loop components are supported in Microsoft Teams, Microsoft Outlook, and Microsoft Whiteboard, with more apps expected to support them in the future.
Technically, Loop components are identified by a URL that, when pasted into a Microsoft 365 app, is transformed into an interactive element.
There are two types of Loop components you can use in Microsoft 365 apps.
Loop components created with Microsoft Loop
In Microsoft Loop, you can create a page in any of your workspaces and then share this page—a Loop component—in other Microsoft 365 apps. Simply copy the component using the Copy component button and paste it into another Microsoft 365 app.
Alternatively, Loop components using Microsoft Loop can also be created directly from various Microsoft 365 apps.
In Microsoft Teams, you can create and send a Loop component from the conversation action menu.
In Microsoft Outlook's message compose window, you can create a Loop component from the Ribbon menu.
Adaptive Card based Loop Components
The second type of Loop components is Adaptive Card-based Loop Components. While you can use Microsoft Loop components as provided by Microsoft, Adaptive Card-based Loop components are the ones that you can develop with OutSystems Developer Cloud, which is what we cover in this tutorial series.
Throughout this article and all the following tutorials, when I mention Loop components, we are referring to Adaptive Card-based Loop components.
Why you should care
As mentioned earlier, Loop components are live and actionable. "Live" means you can share and embed a single instance of a Loop component in multiple Teams conversations or Outlook messages, and it will always show the current state of the data linked to the adaptive card. In upcoming tutorials, we'll explore how this works technically. This means if that data changes, the Loop components will automatically update, so there's no need to send an updated version of it.
"Actionable" means a user can interact with a Loop component directly within a Teams conversation or Outlook message. This is beneficial because the user doesn't have to leave the current context, significantly reducing media-breaks between applications.
The combination of these features makes Loop components a great productivity booster. For example, consider the following scenario:
In your application, a user enters new product data that needs approval from someone in the Product Management role. You could send an Outlook message with a Loop component to all product management members. A product manager can then approve the new data directly in Outlook by clicking an Approve button in the Loop component. Once approved, all instances will update, and other product managers will immediately see that the data has already been approved by someone else. Additionally, the product manager who approved the data will see that they were the one who did it. There's no need to redirect users to an approval website anymore, and since the Loop component updates automatically, everyone will know whether an approval has already taken place or is still pending.
Building a Loop Component
Loop components are identified by a URL, such as a full URL to a screen with input parameters from your OutSystems application. Your implementation recognizes this URL and replaces it with an interactive element, known as an Adaptive Card. This process is called link unfurling and is a feature of Message Extensions for Microsoft 365. Developing the Message Extension is the most essential part of this series.
Building a Message Extension involves the following steps:
Register a Bot and associated Entra application registration - In our Azure tenant, we need to create an Azure Bot resource along with an Entra application. The Azure Bot resource acts as the gateway between Microsoft 365 apps and our OutSystems Developer Cloud environment.
Messaging Endpoint Implementation - This is an exposed REST API that processes requests from Microsoft 365 apps through the Azure Bot resource.
Microsoft App Manifest - This is a configuration file that, along with other resources, needs to be published within your Microsoft 365 tenant. It contains configuration options like which URLs should be unfurled and more.
User Experience with Loop Components
From a user's perspective, using Loop components might look like this:
A user copies the full URL from an OutSystems application into a Microsoft Teams conversation or Microsoft Outlook message.
If the URL matches the configuration in your Microsoft App Manifest file, a link unfurling request is sent to the messaging endpoint of the configured Azure Bot resource.
Your messaging endpoint processes the link unfurl request, determines the requested data, and responds with a Loop component based on an Adaptive Card.
The Loop component is then displayed in the Microsoft 365 app.
The Loop component can include interactive elements with input fields and buttons. If the user clicks a button:
The messaging endpoint is invoked again with a request specifying the card instance and the action.
The messaging endpoint processes the request and, if needed, returns an updated Adaptive Card based Loop component to the app.
Summary
This concludes the introduction to Adaptive Card-based Loop Components with OutSystems Developer Cloud. Please take a moment to review the provided links, as they contain important additional information.
In the first tutorial, we will set up the prerequisites and unfurl an OutSystems application link for a simple adaptive card in Microsoft Teams - in later articles we will extend this to other Microsoft 365 apps. We will also handle data modifications and Loop component refreshes. This tutorial series includes a full demo application that you can use throughout the tutorials and as a starting point for your own implementation.
I hope you enjoyed the introduction. Feel free to leave a comment with your questions or feedback.
