Teams Devs: Your Microsoft Teams personal tabs and messaging extensions can now be used in Outlook!

Exciting news for developers of Microsoft Teams tabs and extensions, but also for users who are looking for a more integrated experience across different Microsoft 365 applications.

Personal tabs and messaging extensions created for Microsoft Teams can now be extended to Outlook for desktop and web, as well as Microsoft Office Home (the experience you see at office.com)

This functionality is in early developer preview right now, but anyone can try it out.

Where does my app show up in Outlook?

Personal tabs are shown within the ellipses on the side bar, alongside any existing Outlook apps:

Messaging extensions are shown in both the Outlook desktop client (on Windows only) and in Outlook on the web. They are shown when composing a new email message, on the More apps flyout (top ribbon in desktop, bottom of the composition window in web).

What do I need to know before I start?

This extensibility to Outlook isn’t enabled by default and doesn’t apply to any existing Teams tabs without modification. Developers need to use the new TeamsJS client SDK v2 Preview, which might give you some re-work. The SDK has been refactored and there are some significant changes.

Firstly, callback functions have been replaced with Promise objects. This should hopefully result in cleaner code but not before you have to do some refactoring. Affected calls include (but might not be limited to):

app.getContext, app.initialize, appInstallDialog.openAppInstallDialog, authentication.authenticate, authentication.getAuthToken, authentication.getUser, authentication.registerAuthenticationHandlers (removed), calendar.openCalendarItem, calendar.composeMeeting, call.startCall, core.executeDeepLink, location.getLocation, location.showLocation, mail.openMailItem, mail.composeMail, media.captureImage, media.getMedia, media.selectMedia, media.viewImages, media.scanBarCode, meeting.getAppContentStageSharingCapabilities, meeting.getAuthenticationTokenForAnonymousUser, meeting.getIncomingClientAudioState, meeting.getLiveStreamState, meeting.getMeetingDetails, meeting.requestStartLiveStreaming, meeting.requestStopLiveStreaming, meeting.shareAppContentToStage, meeting.stopSharingAppContentToStage, meeting.toggleIncomingClientAudio, meeting.getAppContentStageSharingState, pages.backStack.navigateBack, pages.navigateCrossDomain, pages.navigateToTab, pages.tabs.getMruTabInstances, pages.tabs.getTabInstances, pages.config.setConfig, pages.config.getConfig, people.selectPeople, ChildAppWindow.postMessage, ParentAppWindow.postMessage.

Anywhere you are using callback parameters to work with the result of the function, like this:

microsoftTeams.getContext((context) => { /* ... */ });

will need to change to use promises, like this:

app.getContext().then((context: Context) => {
    /*...*/
});

Alternatively, you could also use the async/await pattern (my personal favourite):

app.getContext().then((context: Context) => {
    /*...*/
});

Secondly, API calls are now grouped into capabilities, which is really just a logical grouping of related APIs. That has resulted in some interfaces moving namespaces, to match up with their capabilities. Example: the Context interface is now in the app namespace. There have also been API changes to several of the meeting APIs. For all the details see the Changelog, and also this page: Teams JavaScipt Client SDK v2 Preview.

How should I upgrade to TeamsJS SDK v2

The best way to upgrade to SDK v2 is to use the Team Toolkit extension. If you do this, not only will the Toolkit walk you through all the steps, but it will also go through your code and add //TODO entries against all the callback functions that need changing! To get the Teams Toolkit if you’re not already using it go to https://aka.ms/teams-toolkit.

Once I’ve upgraded to TeamsJS SDK v2, how do I extend to Outlook?

There are a few steps to jump through, and a new preview app manifest version to use. Again though, the easiest thing to do is to use the Teams Toolkit and run the command: Teams: Upgrade Teams manifest to support Outlook and Office apps from the Command Palette (Ctrl + Shift + P).

Full instructions for enabling a Teams personal tab to work with Outlook and Office are on Microsoft Docs here.

Full instructions for enabling a Teams messaging extension for Outlook are on Microsoft Docs here.

Where can I find out more information?

There’s a lot in this blog post, and a lot of detail I haven’t covered, as it’s already laid out in a few existing Microsoft Docs pages. If you’re planning on going down this route, I would suggest reading through these pages first:

Extend Teams apps across Microsoft 365

Microsoft Teams JavaScript client SDK v2 Preview

Microsoft Teams JavaScript client SDK v2 Changelog

Extend a Teams personal tab across Microsoft 365

Extend a Teams message extension across Microsoft 365