Nanddeep Nachan

Nanddeep Nachan

Microsoft MVP (M365 Apps and Services) | Consultant - M365, MS Azure, Power Platform | Speaker | Author | Blogger | Trainer | CSM

Microsoft MVP

Implementing Personal Tabs for MS Teams with Yo Teams

1 minute read

Implementing Personal Tabs for MS Teams with Yo Teams

Overview

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 Yo Teams.

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.

Prerequisites

Install below to get started:

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.

  1. On the command prompt, type below command.

     yo teams

  2. Follow the wizard to set up the solution.

  3. On the command prompt, type code . to open the solution in visual studio code.
  4. If you want to test the personal app locally, on the command prompt type gulp serve and the information will be displayed from the file “src\app\web\index.html”.
  5. 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.

  1. On the command prompt, run below command.

     gulp ngrok-serve

  2. Inside .env file, update HOSTNAME=1348151f57c2.ngrok.io
  3. Open MS Teams.

  4. Under Apps , click Upload a custom app.

  5. Click Add.

  6. Here is how it works.

Summary

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.

References

Code Download

The code developed during this article can be found at: https://github.com/nanddeepn/code-samples/tree/master/MSTeams/yo-teams/personal-tab

Leave a comment

You may also enjoy