Custom tabs can be used with app to embed our own content in MS Teams. MS Teams supports 2 types of tabs.
- Channel/group tab: delivers content to channels and group chats.
- Personal tab: scoped to a single user.
In this article, we will explore web experiences with custom personal tabs in Microsoft Teams using
Personal Tabs overview
Tabs are Teams-aware webpages embedded in Microsoft Teams. Personal tabs can be used to bring an existing web-based resource inside Teams or provide webpage content to users.
Install below to get started:
- Node.js - v10.* (or higher)
- NPM (installed with Node.js) - v6.* (or higher)
- Gulp - v4.* (or higher)
- Yeoman - v3.* (or higher)
- Yeoman Generator for Microsoft Teams - v2.13.0 (or higher)
- Visual Studio Code
Install Yeoman, Gulp global command-line interface, and Typescript compiler globally using NPM.
npm install yo gulp-cli typescript --global
Install generator-teams globally using NPM.
npm install generator-teams --global
To install preview versions of the generator, run below command.
npm install generator-teams@preview --global
Implement Personal Tabs with Yo Teams
We will generate a solution using Yo Teams.
On the command prompt, type below command.
Follow the wizard to set up the solution.
- On the command prompt, type
code .to open the solution in visual studio code.
- If you want to test the personal app locally, on the command prompt type
gulp serveand the information will be displayed from the file “src\app\web\index.html”.
- When we are running the personal app from within MS Teams, the information will be rendered from “src\app\scripts\personalTab\PersonalTab.tsx”.
Test the solution
Follow the below steps to test the personal tab locally with ngrok.
On the command prompt, run below command.
- Inside .env file, update HOSTNAME=1348151f57c2.ngrok.io
- Open MS Teams.
Under Apps , click Upload a custom app.
Here is how it works.
Tabs are Teams-aware webpages embedded in Microsoft Teams. Personal tabs can be used to bring an existing web-based resource inside Teams or provide webpage content to users. Yo Teams helps to build personal apps with ease.
The code developed during this article can be found at: https://github.com/nanddeepn/code-samples/tree/master/MSTeams/yo-teams/personal-tab