The latest version of SharePoint Framework (1.7) brought up a greatly anticipated feature to use a solution made with SharePoint Framework on a tab on Microsoft Teams channel. Also solution created on Microsoft Teams tabs can be displayed as webparts on SharePoint pages.

What does this mean?

  • Double the benefit: Same solution can be utilized added a tab on Teams and on a page on SharePoint.
  • SharePoint Framework development skills can be now utilized to create Teams apps and update current solutions to support Teams
  • Surface your web part directly as a Team’s tab without creating a page to contain it

I finally had time to try how to do this kind of solution and what it requires. As demo I selected simple app for displaying urgent announcements.

Demo

Demo is just a simple web part, which fetches urgent announcements from a defined SharePoint site. Announcement is created as a modern SharePoint news article and urgency metadata is set on properties pane. Announcements are fetched and organized based on metadata and displayed to the end-user.

sharepoint.png

teams.png

Demo web part is added with few easy steps: just add web part package to SharePoint’s App Catalog and choose that it’s available on all site collections.

Teams need a little more tweaking, which acceptable because this feature is currently on Developer Preview state.

  • Sideloading of apps needs to be activated, which means that any user can upload custom solution to Teams.
  • App package for Teams needs to created, which is just packaging /Teams folder contents as zip-package on your solution.
  • Then you just add your solution to Teams with sideloading. You can add an app on Apps tab on Manage Team view and just click “Upload a custom app” from bottom right corner and upload your zip-package.
  • And then just add your app as a tab to a channel.

Afterword

Even though this feature is currently on Developer Preview and not yet production ready, it’s possibilities should be taken into account when planning new solutions. Especially in applications where information is consumed by frontline users. Their user interface for work might be Teams, and with one customization you can solve needs for frontline and office workers.

So, why customize twice while you can succeed just doing it once?