Skip to content

Latest commit

 

History

History
45 lines (32 loc) · 4.07 KB

teams-toolkit-overview.md

File metadata and controls

45 lines (32 loc) · 4.07 KB
title description ms.date ms.localizationpriority
Create Office Add-in projects using Teams Toolkit
Learn how to create Office Add-in projects using Teams Toolkit.
07/27/2023
high

Create Office Add-in projects with Teams Toolkit (preview)

Extensions to the Microsoft 365 Platform are now included under "Teams Apps", even if the extension is fully outside of the Teams application itself. A primary tool for developing Teams Apps is Teams Toolkit. You can create Office Add-ins with Teams Toolkit, with the following restrictions:

  • Only Outlook Add-ins can be created at this time and only for Outlook on Windows. We're working hard to enable support in Teams Toolkit for add-ins to other Office applications and platforms.
  • Add-ins created with Teams Toolkit use the unified manifest for Microsoft 365 which is currently in preview. We encourage you to experiment with creating add-ins using the toolkit but don't use the unified manifest for production add-ins.

Install the latest version of Teams Toolkit into Visual Studio Code as described in Install Teams Toolkit.

Create an Outlook Add-in project

  1. Open Visual Studio Code and select Teams Toolkit icon in the Activity Bar.

    :::image type="content" source="../images/teams-toolkit-icon.png" alt-text="Teams Toolkit icon.":::

  2. Select Create a new app.

  3. In the New Project drop down, select Outlook add-in.

    :::image type="content" source="../images/teams-toolkit-create-outlook-add-in.png" alt-text="Screenshot showing four options in New Project drop down. The fourth option is called 'Outlook add-in'.":::

  4. In the App Features Using an Outlook Add-in drop down, select Taskpane.

    :::image type="content" source="../images/teams-toolkit-create-outlook-task-pane-capability.png" alt-text="Screenshot showing two options in the App Features Using an Outlook Add-in drop down. The first option 'Taskpane' is selected.":::

  5. In the Workspace folder dialog that opens, select the folder where you want to create the project.

  6. Give a name to the project (with no spaces) when prompted. Teams Toolkit will create the project with basic files and scaffolding. It will then open the project in a second Visual Studio Code window. Close the original Visual Studio Code window.

  7. In the Visual Studio Code TERMINAL navigate to the root of the project and run npm install.

  8. Before you make changes to the project, verify that you can sideload your Outlook add-in from Visual Studio Code. Use the following steps:

    1. Ensure that your account in your Microsoft 365 developer tenancy is also an email account in desktop Outlook. If it isn't, follow the guidance in Add an email account to Outlook.
    2. Close Outlook desktop.
    3. In Visual Studio Code, open Teams Toolkit.
    4. In the ACCOUNTS section, verify that you're signed into Microsoft 365.
    5. Select View | Run in Visual Studio Code. In the RUN AND DEBUG drop down menu, select the option, Outlook Desktop (Edge Chromium), and then press F5. The project builds and a Node dev-server window opens. This process may take a couple of minutes. Eventually, Outlook desktop will open.
    6. Open the Inbox of your Microsoft 365 account identity and open any message. A Contoso Add-in tab with two buttons will appear on the Home ribbon (or the Message ribbon, if you have opened the message in its own window).
    7. Click the Show Taskpane button and a task pane opens. Click the Perform an action button and a small notification appears near the top of the message.
    8. To stop debugging and uninstall the add-in, select Run | Stop Debugging in Visual Studio Code.

Now you can change and develop the project. In places where the guidance in the Office Add-ins documentation branches depending on what type of manifest is being used, be sure to follow the guidance for the unified manifest.