Microsoft Teams offers more for developers

Microsoft is, at heart, a platform company. Once a product gets big enough (millions of users across thousands of businesses), it becomes a place where we can build applications. We’ve seen it with Microsoft Office, Visual Studio, Dynamics, and more. Probably the fastest transition from product to platform was Teams, quickly becoming a host for workflow endpoints and quick interactions with line-of-business systems before gaining its own developer tools.

Since then, Teams has quickly added new extension points, allowing a mix of different application types and services, including Microsoft’s own extensions like its Bookings service. Developers can use Teams along with Microsoft 365’s Graph services to integrate with other parts of its productivity suite, using Teams as an additional user interface.

Building Teams into your user-facing applications allows those applications to work alongside ongoing collaboration. The intent is to avoid users having to context-shift; simple tasks can be triggered from chat, or applications can expose functionality in tabs. Build 2024 saw Microsoft launch a collection of new developer-focused features in Teams, giving you new ways to build applications into and on the platform. One key area was improving the user interface options and adding new ways to expose applications to users.

Adding apps to Teams Stageviews

Teams gives you several different ways to link to your code. You can build chatbots, add interactive features to messages, use adaptive cards to deliver information, or use webhooks to use Teams as an asynchronous UI to your services. Perhaps one of the more useful options is tabs.

Tabs provide a way to quickly embed web content inside Teams, with the ability to interact with the underlying platform as well as with your own or third-party servers. At heart, they’re just an HTML iframe, with support for individuals, small groups, and larger teams. Some work with chats, others with more formal channels. They can be static, for example, embedding a corporate or project website into Teams, much like the familiar intranet. Or they can be dynamic, offering configurable content around a channel.

Microsoft recently introduced a new way of delivering more complex applications as tabs: the Stageview. This lets you use multiple windows, opening a new window with its own dedicated chat view. This technique takes users out of their Teams workspace, isolating the task from the noise of chats and dashboards.

A Stageview can open from a link in a chat or as a Teams app. The standard Collaborative Stageview gives you a pane for content and a sidebar chat. It’s a tool for working with project plans, Kanban boards, Power BI reports, and more. The application pane contains content and the chat is to one side, allowing us to focus on what we’re talking about.

If you don’t need the chat option, you can launch a Stageview Multi-Window, which simply opens a separate window for your content. The final option is Stageview Modal, which works inside the Teams application. This is the default for clients that don’t support multiple windows, such as Teams on the web.

Stageviews can be invoked from Adaptive Cards or from deep links inside content and chats, using the Stageview API. If you’re using the desktop Teams client, these all default to a Collaborative Stageview.

Using an adaptive card is the preferred way to launch a Stageview-hosted application, as it can be done without interrupting the flow of a chat. More complex interactions require the Stageview API. This includes the ability to use a threadId to bring a conversation into the Stageview chat so you can continue to work in the context of the conversation that triggered the app.

Configuring a Stageview link is well documented, with most of the necessary structure in a JSON payload. The necessary parameters build on familiar Threads constructs; the main change is a new openMode option that defines the type of Stageview experience you’re delivering. Those same parameters are used in a URL when you’re launching an app through a deep link. You need to encode the URL before adding it to a link, as unencoded URLs will be rejected.

Stageviews are an interesting extension to the Teams app model, letting you treat apps as separate from the Teams collaboration platform while keeping flow. This approach should reduce distraction and help avoid time-wasting context switches.

Simplifying sharing through Teams

One useful new feature is a “share to Teams” control that can be added to existing web apps. Say you’ve built a tool that helps manage an e-commerce catalog, and you know that users will want to have ad hoc meetings around catalog content. You can embed the share control into your application. Start by loading the Share script, and then add a share by adding an HTML element that’s linked to the control class, with a link to the ID of the Teams app that will host the content, and a URI for the content being shared. This allows you to quickly add support for Teams in any internal web application. There’s very little overhead, and content can be shared without stepping out of a workflow. Users can share content and then come back to it later in a Teams meeting, opening a Teams app as part of a conversation.

Much of the new developer functionality comes from an updated JavaScript library: TeamsJS 2.0. As it offers a lot of backwards compatibility, older applications can be quickly ported to the latest release, adding support for Outlook as well as Teams. Some changes will need to be made, for example, updating code to support more modern JavaScript asynchronous capabilities. At the same time, there’s been a reorganization of the library’s APIs, grouping them by capability.

Microsoft has updated its Visual Studio Code Teams Toolkit to help with application migrations. This automates the process of updating dependencies and app manifests, providing notifications of where you need to update interfaces and callbacks. It’s not completely automatic, but it does help you start making necessary changes. Another tool updates your app’s manifest, validating its contents before publication. You can download it from the Visual Studio Code Marketplace.

Using Teams to develop and document code

Teams is also a tool for developers, providing a place to collaborate around code. Up till now, one key feature was missing. Despite Markdown-based formatting, there was no way to use Teams as a place to share code. That gap has now been filled, and it’s possible to paste formatted code blocks into Teams, complete with syntax highlighting. Code blocks can be converted into Loop components, so you can collaborate in real time on a section of code. It should work well for reviews or debugging. Once the code has been agreed on, simply copy it back into your IDE or code editor.

Another interesting developer feature is support for Mermaid, a JavaScript-based language that allows you to quickly add charts and diagrams. Again, this can be used collaboratively, enabling architects and other development team members to dynamically document code snippets, showing how they interact and what functionality they offer. Mermaid is a good match for Teams’ existing Markdown support as it uses a similar formatting language to create visual content.

Mermaid is an interesting open source tool that offers a quick way to add diagrams to a primarily text-based tool. You can use it to create many different types of software engineering diagrams, allowing you to use your Teams environment to collaboratively build documentation alongside code, quickly generating flowcharts, class diagrams, user journeys, and even entity diagrams. All you need to do is write a description of the diagram you’re creating, helping other members of your team understand the code you’re working on.

Having Mermaid alongside Markdown in Teams, along with code block support, is surprisingly useful. Instead of writing documentation when a project ends, when you’re satisfied with content it can be copied and pasted into your choice of document management platform.

Microsoft has learned its own lessons during lockdowns about how people work remotely or from home. It’s critical to keep context switches to a minimum and offer easier ways to share information. Microsoft is a company composed mainly of developers, and Teams is at the heart of its developer processes, so it’s not surprising to see support for tools like Mermaid and improvements to how we share code. If Teams is to be our work hub, then these updates are essential—and we need to see more in future releases and SDK updates.