Nanddeep Nachan

Nanddeep Nachan

Microsoft MVP (M365 and AI Platform) | MCT | TOGAF® 10 | Independent Consultant - Microsoft 365, AI, MS Azure, Power Platform | Speaker | Author | Blogger

Microsoft MVP

Implementing Configurable Tabs for MS Teams with Yo Teams

1 minute read

Implementing Configurable Tabs for MS Teams with Yo Teams

Overview

Custom tabs can be used with the 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 configurable tabs in Microsoft Teams using Yo Teams.

Configurable Tabs overview

Tabs are Teams-aware webpages embedded in Microsoft Teams. Configurable tabs give you the opportunity to allow the user to specify some configuration information before the tab is added.

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 Configurable 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 configurable 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 configurable app from within MS Teams, the information will be rendered from “src\app\scripts\configurableTab\ConfigurableTab.tsx”.

Test the solution

Follow the below steps to test the configurable tab locally with ngrok.

  1. On the command prompt, run below command.

     gulp ngrok-serve

  2. Open MS Teams.

  3. Under Apps, click Upload a custom app.

  4. Navigate to any Team.
  5. Click Add a tab.

  6. Search and add ConfigurableTab.

  7. Click Add.

  8. Specify the title, click Save.

  9. Once added, the configurable tab looks as below.

Summary

Tabs are Teams-aware webpages embedded in Microsoft Teams. Configurable tabs give you the opportunity to allow the user to specify some configuration information before the tab is added. Yo Teams helps to build configurable 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/configurable-tab

Leave a comment

You may also enjoy