How To Use SharePoint Framework (SPFx) In Teams To Build An App

Microsoft SharePoint platform is for collaboration and the evaluation taking into new dimensions. Its leading a new way of building applications. Yes, we can develop applications in SharePoint framework, and we can use in SharePoint and Teams. Teams now a key part of Microsoft's collaboration strategy, beginning its rollout out to enterprise Office 365 accounts, it's perhaps time to consider blending the two technologies using Teams' upcoming support for the SharePoint Framework (SPFx) development environment

Microsoft has started supporting the Teams Tab/Personal App from SharePoint framework version1.18. And we can convert any SharePoint Framework widget build using framework 1.8 and above into Microsoft teams by making  a few changes in the webpart.

 

The main steps are: 

• Open the webpart manifest file then add “Teams tab” (or) "Teams Personal APP" to the supportedHosts property
• Deploy the solution into app catalogue
• Choose the solution and click the “Sync to Teams” button.

Now the webpart will appear in teams.

 

Once the webpart is hosted in the Teams Tab, it will have access to the Teams SDK through the webpart context.

 

Starting with the SharePoint Framework v1.8, scaffolding will also include an additional /teams folder in the solution structure, with default configuration for your web parts, so that you can get started with Teams tab development as easily as possible.

 

Step 1

 

Add TeamsPersonal App (or) Teams Tab in Supportedhosts.

 

 

Step 2

 

Get the manifest file for teams from here and add the file into Teams folder.

 

Step 3

 

Update the ID (GUID)

 

Step 4

 

Deploy the app.

 

Go to command line

• gullp bundle --ship
• gulp package-solution –ship

Step 5

 

Upload the package to SharePoint app catalogue

 

 

 

Step 6

 

Sync that solutions to Teams

 

 

Step 7

 

Go to your Microsoft Team

 

Step 8

 

Click on + to add a new tab and search the app/webpart name

 

Step 9

 

SPfx app (webpart) is added into the teams tab.

 

 

Step 10

 

We can use the same webpart for SharePoint Online as well.

 

Happy Learning ! Happy Sharing !