Getting started with the Teams JavaScript SDK v2.0

The pandemic may have shone a spotlight on video conferencing and online meeting tools, but Microsoft Teams is a lot more than just another communications platform. With deep integration into the Microsoft 365 platform, it’s perhaps better thought of as a hub for your work, providing a place to manage tasks and collaborate with other team members.

Up to now, much of its integration has been bringing tools into Teams, using it to manage applications like the Bookings scheduling tool or providing a canvas where applications and services can render content. That has allowed it to be a place where we can carry out pieces of “microwork,” tasks that don’t need an intensive interaction, and responses are simple clicks or approvals. This has allowed it to become another UI for your apps, using technologies like Adaptive Cards and the Microsoft Graph.

Teams is only one of the applications that lives on the enterprise desktop. That rendering surface can be extended into other productivity tools, still building on Teams, but now bringing its features into familiar applications. The logical starting point is, of course, Outlook. It’s where we manage much of our collaboration, with email providing a useful audit trail for meetings and comments.

Breaking out of Teams

Microsoft recently unveiled a preview of the second generation of its Teams JavaScript SDK, which aims to start bringing Teams apps out of their sandbox and into the rest of our collaboration tools. That way you can continue to work in your choice of tools while still taking advantage of Teams’ microwork capabilities. You can think of it as a way of multitasking without breaking flow by switching between applications. Having a Teams interaction in an Office application toolbar or pane lets you use it asynchronously while continuing with your main task.

It’s an approach that’s suitable for task workers as well as information workers, where you may have only rolled out a subset of Office to virtual desktops but still want those workers to be part of the overall workflow for tasks. That way a shared PC running Outlook at a work site can be used to collect email and at the same time participate in timesheet collection or interact with HR Teams applications.

The initial preview of the Teams JavaScript SDK v2.0 allows you to run apps designed for Teams personal tabs in both desktop and web Outlook and in the Office.com web portal. It brings search-based messaging apps into Outlook, adding them to the message composition pane so you can access relevant information while you’re writing an email.

Building a Teams development environment

One useful tool for this new SDK is the Office 365 Developer Program. This creates and pre-populates an Office 365 tenant that lets you test Microsoft Graph applications without affecting any production tenants. Once you’ve built a new Teams application, deploy it through the Developer tenant to test in both web and desktop applications. The Developer Program provides a set of sample data packs that can simplify getting started, not only pre-populating users and graph data, but also setting up the Teams App Studio and Developer Portal so you can start building code as soon as your environment is up and running.

To experiment with the new SDK, you should ensure that your developer tenant is using the preview releases of Outlook and Teams. This will require first using the tenant’s admin center to offer targeted releases to its dummy users. You can then use the Office Deployment Tool to install the beta channel Office releases on your development PC or in any developer virtual machine. Once they’re installed in Teams, you’ll be able to access personal tabs using the ellipsis menu on the left side of the Outlook window.

Upgrading existing Teams apps

With your development environment ready to go, it’s a good idea to add the Teams Toolkit to Visual Studio Code to speed up manifest and application scaffolding creation. This adds commands to Visual Studio that can upgrade existing code to the new manifest formats, with validation features that make sure that your code will load correctly. Other commands update the JavaScript references, adding support for the preview SDK.

It’s important to note that the upgrade tool only works with JavaScript and TypeScript files. If you’re using inline calls to the SDK from HTML content, this won’t be updated, so you’ll need to do it manually. At the same time, you must edit any content security policy headers to account for the sources of the frames used to host Teams content.

Microsoft hasn’t changed how you build Teams apps with the new SDK. Instead, it has added the Teams rendering canvas to other platforms, so you can write code once and know that it will run in Outlook with no changes and with the same user experience. The personal tab in Teams and the personal tab in Outlook look the same, so you only need to train users once.

New features and changes in the v2.0 SDK

That’s not to say there aren’t any architectural changes in the new SDK. If you use the upgrade tools, old calls will be marked as deprecated, giving you the opportunity to update to newer APIs. Other changes take advantage of modern JavaScript tools, for example, migrating APIs that used callbacks to using promises. Using promises takes advantage of asynchronous operations, moving control logic out of your code into the JavaScript engine.

Other changes move API calls into groups of capabilities, using namespaces, which control how hosting apps work with API calls. If a capability isn’t supported, code will throw an exception, allowing you to tune experiences for different platforms. You can then use an isSupported() call to check for capabilities in advance, which will allow you to enable specific features in different host applications. This approach suggests that Microsoft is planning to bring these features to other Office applications as well as to other platforms

Extending Teams this way makes a lot of sense, even if it does seem that Office is becoming more and more like a late 1990s Lotus Notes. We need to think of productivity tools as a canvas for work, where we can help people stay in familiar user experiences while at the same time extending those applications’ capabilities. The Office add-on model is widely used, so using it and the Microsoft Graph APIs to link into Teams gives you a ready-made workflow engine that’s optimized for microwork and asynchronous operations.