Upgrade Teams application to work with Outlook and Office.com

Note

Currently, this feature is available in developer preview only.

Teams Toolkit helps you to upgrade Teams applications to work with Outlook and Office.com. To extend your Teams applications in Outlook and Office.com, the migration commands in Teams are as follows:

Use the command Teams: Upgrade Teams manifest to support Outlook and Office apps to upgrade manifest to the latest version.
Use the command Teams: Upgrade Teams JS SDK references to support Outlook and Office apps to upgrade TeamsJS SDK to the latest version.

teams-extended-in-outlook-and-office

Note

To extend your Teams application in Outlook and Office.com, upgrading manifest file is required. However, it's optional for you to upgrade the TeamsJS SDK, as the old version continues to work. [!IMPORTANT] If you have both TeamsFx and TeamsJS SDK packages in your Teams application and you have upgraded TeamsJS SDK to 2.0.0-beta.1 or higher, you need to change TeamsFx version to 0.3.1-beta.0 or higher in your package.json file to avoid version conflicts.

Prerequisites

Install 2.10.0 or later version of Teams Toolkit from Visual Studio Code extension in Teams Toolkit (Preview) - Visual Studio Marketplace.
Set up your dev environment.

The following are the steps to upgrade manifest and TeamsJS client SDK:

Upgrade manifest

From Visual Studio Code, open command platte (Ctrl+Shift+P / ⌘⇧-P).
Type: Teams: Upgrade Teams manifest to support Outlook and Office apps in the search box.
Select Teams app manifest file.

This command will:

Update manifest version to use the latest m365DevPreview version.
Update manifest file to use the latest DevPreview schema.

For more information on required manifest schema and version, see Developer Preview manifest schema.

Upgrade Teams JavaScript Client SDK

From Visual Studio Code, open command platte (Ctrl+Shift+P / ⌘⇧-P).
Type: Teams: Upgrade Teams JS SDK references to support Outlook and Office apps in the search box.
Select Teams app project folder.

This command will:

package.json references to TeamsJS SDK Preview
Import statements for TeamsJS SDK Preview
Function references for TeamsJS SDK Preview
Enum and Interface references for TeamsJS SDK Preview
TODO comment reminders to review areas that might be impacted by Context interface changes
TODO comment reminders to ensure conversion to promises functions from callback style functions has gone well at every call site the tool found

Important

Ensure that you review any of the TODO items deposited by the tool.

Run your Teams application in Outlook and Office.com

After upgrading you can run Teams application in Outlook and Office.com.

Upload and run your application in Teams

The following are the steps to Test your application in Outlook and Office.com by uploading your application through Teams client:

Push code changes to the server to host your application.
Move application to a zip folder.
Go to Teams client and select Apps.
Select Upload a custom app and select your application's zip folder.
Select Add on app details to install the application.

Teams install and launch your app. You can find your app in More apps.

m365-app

Run Teams application in Outlook

Perform the following steps to preview personal tab apps in Outlook web app and desktop clients:

Outlook web application

Go to https://outlook.office.com.
Select the three dots on the bottom left bar.
Select the name of your app to preview in Outlook web application.

Outlook desktop client

Open Outlook desktop client.
Select the three dots on the bottom left bar.
Select the name of your app to preview it in Outlook Desktop Client.

Run Teams application in Office.com

Perform the following steps to preview your apps in Outlook web client:

Go to www.office.com.
Select the three dots on the bottom left bar.
Select the name of your app to preview it in office.com.

Create a sample application with Teams Toolkit and Run it in Outlook and Office.com

Perform the following steps to create a new tab app using Teams Toolkit and run it in Outlook and Office.com:

Create a new sample Teams app in Visual Studio Code with Teams Toolkit, use command palette and run Teams: Create a new Teams app and select Start from a sample.
Select Todo List (Works in Teams, Outlook and Office) or NPM Search Connector in the next window and click OK.

This step will create a sample application. Once the project has been successfully created:
Select Provision in the cloud.
Select Deploy to the cloud.
Select Teams:Zip Teams metadata package.
Follow the README file in the sample application project to run the application in Outlook and Office.com.