Building collaborative apps with Microsoft Loop components

Microsoft Loop is an intriguing tool, one that promises a lot but has yet to deliver more than a framework for running collaborative applications. The intent is to have a common data framework for collaboration, exposed as a canvas, with content in sync wherever you view it, be it in the dedicated Loop app, the Loop clients for iOS and Android, or in Outlook, Teams, Word for the web, and more.

The key to Loop is thinking of it as a way to build a consistent source of shared ephemeral truth. We’ve grown used to having line-of-business apps as a way of delivering long-term sources of organizational truth: customer info, product info, sales and production figures, and more. But that’s only part of what matters to a business. Much of an organization’s knowledge is held informally, outside of these systems of record.

Loop is a way to capture and share that informal knowledge, the knowledge that surrounds processes and workflows and sits in the collaboration and productivity tools we use to get work done. Loop provides tools that allow teams to share information and ideas and refine them on the fly and in real time. But it’s perhaps best treated as a way to share actions, where a team workflow needs input from multiple users.

We often treat these interactions as asynchronous, where information is added and approved, step by step by step. Loop provides a way of compressing those steps into one shared interaction, letting teams work on their shared inputs before submitting the results to a service, as well as sharing and displaying results in context within a conversation, such as in a Teams chat.

Introducing custom Loop components

The new ability to build your own Loop components takes advantage of an existing, familiar, collaboration tool: Microsoft 365’s Adaptive Cards. Adaptive Cards provide an easily embeddable minimal user interface, one that can be included in various Microsoft 365 enterprise applications including Teams and Outlook, as well as in your own bespoke code and in popular third-party business tools.

Adaptive Cards are a powerful and flexible tool that can deliver an in-context user experience for the host application. That ensures a card rendering in Outlook has an Outlook look-and-feel for its various controls, reducing the risk of a user losing context for an interaction. A project planning Loop component will be rendered in various parts of a user’s workspace and can be completed in whatever application is currently in use, updating everywhere it’s been delivered. It doesn’t matter where the user works with the card, Loop ensures it will be up-to-date across the entire team.

Microsoft initially announced its developer tooling for Loop at Build 2022, with a closed beta program for selected partners. More than a year later that program is now open to everyone, though the service remains in beta as Microsoft scales up the Loop infrastructure.

Custom Loop components are productivity tools, best suited for occasions where multiple users are collaborating on small tasks or where they need to see what’s happening with a task. One option could be to use them in a service desk environment, tracking tickets and allowing service engineers to pick up an active ticket from inside Teams, maybe after a discussion in a chat session. The ticket assignment happens inside the chat, and everyone involved can see that a ticket has been assigned at the same time as the back-end services are updated. The result should be much less context switching for teams, reducing the risk of users losing their place in a stack of applications.

Building Loop components

Loop components are simple enough to build, requiring minor changes to host applications, using search-based message extensions for each user story you are building into a Loop component. There’s a requirement to use a relatively new technique, link unfurling, to bring content into your Adaptive Cards. It’s important to note that for now link unfurling won’t work in your mobile apps, so Loop components are best considered a desktop tool for the time being.

Link unfurling is a way of dynamically adding content to Adaptive Cards by pasting a URL into them. It was originally designed as part of the Microsoft Bot Framework but is being repurposed by Loop. You will also need to ensure you are using an up-to-date version of the card framework for your application, as it requires a minimum of version 1.6.

If you’re using link unfurling with the Microsoft Bot Framework, it’s used to display thumbnail content for users. When you’re using link unfurling with Adaptive Cards in Loop, you can preload content by including a URL in your card’s metadata, as part of its JSON schema. This is simply a HTTPS link to the necessary content in your application. This can be dynamically generated as part of the card creation process, so that the content is unique to the Loop interaction. That allows you to have multiple Adaptive Cards in Loop at the same time, each linked to a specific interaction with both the Loop framework and your application.

Creating Adaptive Cards for Loop

Microsoft provides design guidelines for Adaptive Card content, with a requirement that Loop components be both self-updating and actionable. That means that cards require more than just viewing content; cards also must have a way for a user to respond to the task embedded in the card. It’s important to remember that Loop components are live, so the data in cards update with all Adaptive Cards in sync.

Loop cards have three areas: a header, a border, and a body. Your interactions will take place in the body. You’ll choose the content and the control used in the body; the underlying platform then renders appropriate controls for the current host application. One thing to note is that, because Loop components are independent of other application views, they shouldn’t contain links to the source application. Instead, clicking on the header should open a browser view for you. Actions are based on the existing Adaptive Card action schema, so Loop components work just like other cards.

Scaffolding your first Loop application

Once created, the Adaptive Card links to your application message extension, rendering it when the card is delivered to Teams or Outlook. You can find a sample application on GitHub that provides useful scaffolding for building both ends of a Loop component, the Adaptive Card and the messaging extension.

The sample runs locally using Node.js, with a tunnel via ngrok or similar to Microsoft 365 and Teams. You can test the sample using the Teams toolkit in Visual Studio Code, giving you an end-to-end development and test environment that will work well. To avoid conflicts with live Microsoft 365 services, it’s best to use a free developer tenant to host your test Loop components. Pasting a URL from ngrok will unfurl the component in Teams, or you can add it from Teams’ search tools.

Using Loop to share small chunks of functionality between team members makes sense. Collaboration is about more than shared documents, and if we’re to build a team working environment around services like Teams, then tools like Loop will become essential, especially if we want to support remote collaborative working.