Microsoft Loop Components and Collaborative Apps

Introduction: Microsoft Loop

The collaboration strategy of Microsoft has revolved around Teams for the past few years. Now, Microsoft has launched an app for collaboration among teams with much more productivity than before. Incidentally, Microsoft rebranded many of its Fluid Technologies as Loop at its latest IT Pro Conference. It made way to a new app of Microsoft named Microsoft Loop.

The Microsoft Loop builds and extends the Fluid Framework vision of Microsoft, which the company initially introduced in 2019. It got designed as a way to provide fast co-authoring and compound documents, which include elements synced in near real-time. The Microsoft Loop app looks and works much like the Notion Project Management and Collaboration Tool. It provides a canvas with various portable components, which stay in the sync process apps while users create the teams. Loop can be used as a standalone app and also with other apps in the form of embeddable components. The Loop components get built into other Microsoft applications like Teams, Outlook, OneNote, and Whiteboard. From November 2021, Microsoft Loop components will be built into existing Microsoft Office apps across Microsoft 365 Commercial Licenses as mentioned above.

Basically, Microsoft Loop components are the updated and renamed Fluid Components like the tables, notes, tasks, and customer-sales records in Dynamics 365. These get embedded in services like chats, emails, meetings, documents, and pages. The information that gets stored in Loop components automatically and rapidly syncs. So, the users will have access to the latest version. As per Microsoft, Loop pages are flexible canvases where users get to organize project components like files, links, and data. The Loop workspaces are shared spaces where teams can track all project aspects while collaborating with individuals asynchronously or synchronously.

Building collaborative apps using Microsoft Loop Components

With the recent updates, adaptive card-based Loop components are live and portable chunks of functional elements. These can be embedded in Teams, Outlook, business apps, and any code as per the project requirements. Microsoft Loop, an intriguing tool, promises a lot but has yet to deliver more than a framework for running collaborative applications.

Here, the intent is to have a common data framework for collaboration much like a flexible canvas with content in sync wherever the developers view it. These can be viewed in the dedicated Loop app, the Loop clients for Android and iOS, Teams, and Word for the web among others. Microsoft Loop is designed to be a consistent source of shared data. Nowadays, business apps are hubs for delivering long-term sources of organizational truth. It includes customer and product info, and sales and production figures among others. These data get observed from a business perspective while much of the organization’s knowledge gets held informally.

Microsoft Loop provides ways to capture and share informal information as data. The knowledge surrounds around processes and workflows. It sits in collaboration with productivity tools used by the organization to get the work done effectively. Loop provides tools to Teams for sharing high-quality information and ideas. These can be refined and used in real-time to improve the productivity of business teams and organizations. Also, Microsoft Loop gets treated as a way to share actions wherein a team workflow requires inputs from multiple users. Users and developers often use the interactions as asynchronous wherein the information gets added and approved step by step. The Loop provides ways to compress these steps into one shared interaction that allows Teams to work on their shared-inputs before submitting the results as a service. These get shared through text-based conversations like a Microsoft Teams chat.

Introduction of custom Microsoft Loop components

To build the custom Microsoft Loop components one can use the existing and familiar collaboration tool, the Adaptive Cards of Microsoft 365. The Adaptive Cards provide an easily embeddable minimal user interface. These can be easily included in Microsoft 365 enterprise applications like Teams and Outlook, and in one’s own bespoke code along with popular third-party business tools. The Adaptive cards are flexible and powerful tools that deliver an in-context user experience for host applications. It causes a card rendering in Outlook and reduces the risk of a user losing context for interactions. A project planning Loop component gets rendered in various parts of the workspace of users, which can be completed in whatever application that is currently in use. As mentioned before, regardless of the workspace of the user, Loop will be up-to-date across the entire team. Here, the custom loop components that get used are productivity tools. These are best suited for occasions where multiple users collaborate on small tasks and track their tasks. Desk environment is a good option with the use of tracking tickets that allow service engineers to pick up active tickets from inside Microsoft Teams after a discussion in the chat sessions. Here, the assigning of tickets happens inside the chat sessions as everyone involved can see that a ticket got assigned at the same time as the back-end-services get updated. The overall result is less context-switching for teams that reduce the risk of users losing their place in a stack of applications.

Building of Microsoft Loop components

The Microsoft Loop components are quite simple enough to build as they require only minor changes to the host application. These changes get done using search-based message extensions to each user story that you develop into a Loop component. Here, there is a requirement to use a new technique known as the link unfurling. The link unfurling process brings the components into the Adaptive Cards. As link unfurling does not work in mobile apps, Loop components get best considered as a desktop tool.

Through link unfurling, one can dynamically add content to Adaptive Cards by pasting a URL into them. One should ensure that the latest or up-to-date version of the card framework is used for the application as it requires a minimum of version 1.6. When link unfurling gets used with Adaptive Cards in Loop, one can preload content by including a URL in the card’s Metadata as part of JSON schema. It is an HTTP link to the necessary content in the application. This can be dynamically created or generated as part of the card creation process. Thus, the content stays unique to Loop interactions. Also, the process allows having multiple Adaptive Cards in Loop at the same time with each linked to specific interactions with Microsoft Loop framework and applications.

Creation of Adaptive Cards for Microsoft Loop

Microsoft provides proper design guidelines for Adaptive Card content. It comes with a requirement that Microsoft Loop components be self-updating and actionable. The Adaptive Cards require more than just viewing content as the Cards have ways for users to respond to the task embedded in them. So, it is important to remember that Loop components are live and the data in the Cards get updated with Adaptive Cards in sync.

The Loop cards have a header, a border, and a body. The interactions take place in the body as one chooses the control and content used in the body. Here, the underlying platform renders appropriate controls for the current host applications. The Loop components always stay independent of other application views and they should not contain links to the source application. Clicking on the header of a Loop component opens a browser view and the actions are based on the existing Adaptive Card action schema.

Scaffolding the first Loop application

Upon creation, the Adaptive Card links to the application message extension. Thus, it renders when the card gets delivered to Microsoft Teams or Microsoft Outlook. One can find the sample applications on GitHub, which provides useful scaffolding to design and build both ends of the Loop component, the Adaptive Card, and the messaging extension. Here, the samples run locally using Node.js, with a tunnel through ngrok or Microsoft 365 and Microsoft Teams. One can test the sample using the Teams toolkit in Visual Studio Code, which gives an end-to-end development and test environment that works well. To avoid any issues and conflicts with live Microsoft 365 services, it is best to use a free developer tenant to host the test Loop components. Pasting the URL from ngrok will facilitate the process of link unfurling to the Loop components in Teams.

Here, one can use Microsoft Loops to share small chunks of functionality between team members as part of collaboration. Also, the collaboration is about more than the shared documents. If a team working environment gets built, it revolves around services like Teams. Tools like Microsoft Loop will become a necessary requirement in these cases; especially, if one wants to support a remote collaborative working process.

Conclusion

With Microsoft Loops, Microsoft Loop components, and the Adaptive Cards, one can build collaborative apps through such an environment. In a way, Microsoft Loop combines the fluid components of Microsoft services and creates collaborative environments compatible with Microsoft Teams and Microsoft Outlook. Thus, here, Microsoft has simplified the process of collaborative working through Microsoft Loop and its components.