133 Views
3 minute read
Categories
Microsoft Teams SharePoint

Part I : How to Create Microsoft Teams Personal Tab Using SPFx

Introduction:

Microsoft Teams is one of the most popular application for collaboration. To get separate content for each user, Microsoft Teams supports creation of a personal tab. SPFx applications are mostly created in  SharePoint online. However, an SPFx application can also be made available in Microsoft Teams. This does not require logging in to SharePoint, but can still work as intended. By following the steps below, we can create Microsoft Teams Personal Tab application using SPFx. 

Assumption

Let us assume that we are familiar with SharePoint SPFX application and the development environment is ready. 

To setup SharePoint SPFX development environment, visit the link below: 

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Also read: Part II : How to Create Microsoft Teams Personal Tab Using SPFx

Create an SPFX Solution 

Start with the basic step required to create any SPFX solution. 

Note: Make sure to enter “Y” for tenant wide deployment option 

Part I : How to Create Microsoft Teams Personal Tab Using SPFx

Fill in the details as shown in the image below- 

Part I : How to Create Microsoft Teams Personal Tab Using SPFx

Once the solution is created, open it in your preferred editor. 

Configuration 

  • We can build this solution and deploy it to tenant app catalog. 
  • There are two ways in which we can make this solution available to Microsoft Teams one is Auto-deployment and the other is manual deployment. 
  •  
  • Though Manual deployment is generally preferred, we will show you how we can auto-deploy this solution too. 
Auto deployment 
  • Open webpart.manifest.json file 
  • Under supported host add ‘TeamsPersonalApp’ as another option. 
Part I : How to Create Microsoft Teams Personal Tab Using SPFx
  • Now build the solution and deploy to tenant app catalog. 
    • Commands  
      • gulp bundle –ship 
      • gulp package-solution –ship  
  • During the deployment do not forget to check the checkbox for tenant wide deployment. 
Part I : How to Create Microsoft Teams Personal Tab Using SPFx
  • Once deployed, select the solution and expand the files ribbon where you can see ‘Sync to Teams’ option is enabled. This is because we have provided ‘TeamsPersonalApp’ option in webart.manifest.json file. 
Part I : How to Create Microsoft Teams Personal Tab Using SPFx
  • Click this ribbon button and the solution will be deployed to Microsoft Teams app catalog automatically if you have permission to deploy to Microsoft Teams app catalog.  
  • If you see an error ‘failed to deploy’ make sure you have opened https://teams.microsoft.com in another tab of the same browser. 

Now you have successfully deployed the solution automatically. In the next part of the series, ‘How to create Microsoft Teams Personal Tab Using SPFx- Part 2’, we will learn how to perform manual deployment of the SPFx solution. 

Saikat Ojha

About Saikat Ojha

Saikat Ojha is the Technical Architect and a Microsoft Certified Professional at Netwoven Inc., with 9.5 years of industry experience. His extensive knowledge in analysis, design, development, testing, and maintenance of object-oriented and client-server multi-tier web applications can steer clear any technical challenges. He also holds strong experience in Client-Side Object Model with CAML query, JavaScript and jQuery. Prior to Netwoven, he has worked with several IT companies as a skilled Web Developer.

He is a detailed oriented performer and holds a B. Tech Degree in Computer Science from WBUT. He is a core player and enthusiastically drives his team through any kind of task.

LinkedinTwitterFacebook

Leave a Reply

Your email address will not be published. Required fields are marked *




Enter Captcha Here :