Link: https://askwictor.com/spfxinteams
Demo solution for Microsoft Ignite 2018 that shows how a SharePoint Framework Web Part can be added as a Microsoft Teams tab.
NOTE ALL CODE AND SETUP AND CONFIGURATION ARE SUBJECT TO CHANGE AND ARE SHARED ONLY FOR DEMONSTRATIONAL PURPOSES AT MICROSOFT IGNITE 2018. IT MIGHT NOT EVEN WORK IN YOUR TENANT SINCE IT ALSO HAS DEPENDENCIES ON TENANT PRE-RELEASE FEATURES.
Follow these instructions to install and configure the solution
- Upload the .sppkg (SPFx package) into the SharePoint App Catalog and allow it to be installed in all site collections
- Go to the new SharePoint Tenant Admin page and approve the API permission request (Group.ReadWrite.All)
- Create a new Microsoft Teams team
- Wait a minute until the SharePoint team site is provisioned
- In the associated SharePoint team site create a list called
HostedAppConfigList
- Add a single line of text column to the list called
HostType
- Add a multi line of text column to the list called
HostData
- Create a new App in the site of the type Calendar
- Add a few events to the calendar you just create
- Add a new page to the site
- Add the
Calendar
web part to the new page - Configure it to use the calendar app you created and verify that the Web Part works in SharePoint
- In your Microsoft Teams team, go to settings and apps
- Choose to upload a custom app, and select the
spfxinteams-teams.zip
file - Add a new Tab to the Team and choose the SPFx in Teams app
- When configuring the Tab choose the calendar you created in the SharePoint site.
- Wait a few seconds before you save the changes (if you get a message that says you need to configure the web part, remove the tab and try again, and this time wait an additional few seconds)
- Verify that the Tab shows the events from the calendar
To build and package the solutions, you need to run npm install
in the spfx and teams folders respectively.
The spfx folder contains the SharePoint Framework solution and you build that as you normally do.
The teams folder contains a Microsoft Teams project and to package the solution you run gulp zip
which creates the app package in the package folder. (Note; the gulp manifest
task does not work with this demo as it validates the schema).
(C) Copyright Wictor Wilén, 2018