Part II : How to Create Microsoft Teams Personal Tab Using SPFx - Netwoven
Blog

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

By Saikat Ojha  |  Published on September 14, 2021

How to Create Microsoft Teams Personal Tab Using SPFx

Introduction:

Microsoft Teams, the most popular collaboration application, supports creation of a personal tab to get separate content for each user. SPFx applications can be made available in SharePoint online as well as Microsoft Teams (without having to log in to SharePoint).

In the first blog in this series, ‘How to create Microsoft Teams Personal Tab Using SPFx- Part 1’ we learnt how to successfully create Microsoft Teams Personal Tab application using SPFx automatically. In this part, we will look at how to manually create Microsoft Teams Personal Tab Using SPFx.

Manual Deployment

This is the better option between Automatic and Manual deployment, as we have more control on Teams App. To do this, we need more configuration.

  • Open Microsoft Teams and add an app called App Studio.
  • Click on Manifest Editor tab.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Click on ‘Create a New App’.
  • Provide a short name. (This name will appear when user pins the app in the side bar)
  • Provide a full name
  • For Identification column, click on generate so that we have place holder for ID and later in the process, we will be changing it
How to Create Microsoft Teams Personal Tab Using SPFx
How to Create Microsoft Teams Personal Tab Using SPFx
How to Create Microsoft Teams Personal Tab Using SPFx
  • Now select Tabs from left panel
  • Click on add button available under personal tab
How to Create Microsoft Teams Personal Tab Using SPFx
  • This will open a popup.
  • For time being, fill it with dummy data and later in process, we can change it.
  • Save this tab information.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Click on Domains and Permission tab from left panel (this is very important)
  • Under AAD App ID, please provide below ID. The same ID has to be provided in your solution too as described in Microsoft Documentations.
    • 00000003-0000-0ff1-ce00-000000000000
  • Under single sign provide the SharePoint site URL
  • If your app needs any other resource specific consent, you can add them under ‘Resource Specific Consent’. Our app does not need any, so we will keep it blank.
  • The above configuration is needed otherwise our app will only work in Microsoft Teams Browser version not in Microsoft Teams App (Desktop and Mobile)
How to Create Microsoft Teams Personal Tab Using SPFx
  • Click on App Manifest (Preview) link in left panel to view the manifest file, if you want to see it.
  • Click on Test and Distribute link and click on Download button. It will be downloaded as a .zip file to local folder.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Open the downloaded folder and extract the .zip file.
  • Copy the extracted folder to our SPFX solution under teams folder.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Expand the folder ad open the manifest.json file.
  • We will do some modifications here-
    • Under staticTabs, we will change contentUrl and websiteUrl
    • For content URL, copy and paste below
    • https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
    • Change “{SPFX_COMPONENT_ID}” with our webpart unique ID that we can find under webpart.menifest.json file
How to Create Microsoft Teams Personal Tab Using SPFx
  • For “websiteUrl” change it to the SharePoint site URL ,if you want to.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Under validDomains copy and paste below URL’s.
"*.login.microsoftonline.com",
"*.sharepoint.com",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net"
How to Create Microsoft Teams Personal Tab Using SPFx
  • Now open the Teams manifest folder in explorer view and create a zip file along with two image files and manifest.json file.
  • Make sure under zip folder all the above three files are in root level. There is no folder available under zip file.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Rename the .zip file accordingly.
  • Go to Microsoft Teams and click on Apps, then click on Upload a custom app
How to Create Microsoft Teams Personal Tab Using SPFx
  • Select the appropriate upload option according to your requirement. We selected ‘Upload for Tenant’.
How to Create Microsoft Teams Personal Tab Using SPFx
  • Now upload the .zip file. Wait for few seconds and the app will be available to Microsoft Teams
How to Create Microsoft Teams Personal Tab Using SPFx
  • Click on the app and add it.
How to Create Microsoft Teams Personal Tab Using SPFx

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

Conclusion:

In this blog, we learnt how to manually create Microsoft Teams Personal Tab application using SPFx. In the third and final blog in the series, we will look at how to view the Microsoft Teams Personal Tab manually deployed using SPFx in Microsoft Teams Browser.

Leave a comment

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

Unravel The Complex
Stay Connected

Subscribe and receive the latest insights

Netwoven Inc. - Microsoft Solutions Partner

Get involved by tagging Netwoven experiences using our official hashtag #UnravelTheComplex