Select Page

Microsoft Teams is part of the Office 365 collaboration portfolio and combines many of the Office 365 services in a chat based workspace. Microsoft Teams also has many extensibility points and this series will explore them. We’ll use a fictional example and build it up in stages throughout the articles. At the end of the series you’ll be left with a prototype you can explore and build upon.

Series index:

Tabs

Tabs in Microsoft Teams allow you to display rich interactive web content. You can build a Microsoft Teams tab from scratch or by adapting your existing web app experience.

Microsoft Teams supports tabs in two different scopes:

  • Team scope: Tabs in channels allow teams to interact with your shared experience. Currently, all tabs in channels are “configurable tabs” where a user configures the content of your tab experience when the tab is first added to a channel.
  • Personal scope: Personal tabs allow users to interact with your experience privately, via the app bar. Currently, all personal tabs are “static tabs” that are always present and cannot be added or removed.

Yo Teams

Wictor Wilen has written a Yeoman Generator to help scaffold Microsoft Teams extensions. I used it to add the Tab logic into the existing project.

npm install generator-teams –global

Will install the generator, then you can run it wherever you like. I chose to run mine into a folder called ‘Tabs’ which means I had a little bit of file mods and moves to make to re-hook everything Wictor has given you via the template.

Fixing up gulefile.js

Due to the Tabs folder being used there were some small mods needed to the gulpfile.js to merge the YoTeams version with my existing copy. I simply brought across the tasks and made some changes to the relative file paths.

TabsFixGulpfile

Fixing up webpack.config.js

Due to the Tabs folder being used there were some small amendments to the webpack config file paths.

TabsFixWebpack

Updating manifest

Final task to perform is to add the configurable tab to the existing manifest. Not that YoTeams current uses the older schema, so make sure you use the latest schema version.

TabsUpdateManifest

Side loading the app

Now we have updated and redeployed, lets side load again.

TabsSideloading

Next step

We’ve just added our Microsoft Teams tab which we can use to chat about events around the circuit. Next lets see a summary.