ZZZ ‐ [Archived] ‐ Create and debug a personal tab across Microsoft 365

Important

Content in this document has been moved to Teams platform documentation. Please do not refer to or update this document.

Personal tab across Microsoft 365

Personal tabs provide a great way to enhance the Microsoft Teams experience. Using personal tabs, you can provide a user access to their application right within Teams, without the user having to leave the experience or sign in again. Now, personal tabs can light up within other Microsoft 365 applications. You can build and run your personal tabs in Teams, both Outlook desktop and web experiences, and also Office on the web (office.com).

Prerequisites

• NodeJS
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Set up your dev environment for extending Teams apps across Microsoft 365

Please note that after you enrolled your developer tenant in Office 365 Target Release, it may take couple days for the enrollment to take effect.

• Teams Toolkit Visual Studio Code Extension or TeamsFx CLI

Getting Started

Create a personal tab

1. From Visual Studio Code, open the command palette (Ctrl+Shift+P), type Teams: Create a new Teams app
2. Select SSO-enabled personal tab

Follow below instructions to get started with this application template for local debugging.

Test your application with Visual Studio Code

1. Press F5 or use the Run and Debug Activity Panel in Visual Studio Code.
2. Select a target Microsoft 365 application where the personal tabs can run: Debug in Teams, Debug in Outlook or Debug in Office and click the Run and Debug green arrow button.
3. If you select Debug in Outlook or Debug in Office, follow the instructions in a Visual Studio Code pop-up dialog.
4. Click Install in Teams first and install the app in a Teams web client.
5. After installing the app in Teams, come back and click Continue to continue to debug the app in Outlook web client or office.com.

Test your application with TeamsFx CLI

1. Start debugging the project by executing the command teamsfx preview --local --m365-host <m365-host> in your project directory, where options for m365-host are teams, outlook or office.
2. If you select Debug in Outlook or Debug in Office, follow the instructions in the command dialog.
3. Select Install in Teams first and install the app in a Teams web client.
4. After installing the app in Teams, come back and select Continue to continue to debug the app in Outlook web client or office.com.

References

• Extend a Teams personal tabs across Microsoft 365
• Teams Toolkit Documentations
• Teams Toolkit CLI
• TeamsFx SDK
• Teams Toolkit Samples