Overview

Deploy Multi-Tab Microsoft Teams personal Tab Using SharePoint Framework. Creating and distributing an app built on the Microsoft Teams Platform involves deciding what to build, building your web services, creating an app package, and distributing that package to your target end users. SharePoint Framework is spreading its wings and is now ready to go beyond SharePoint and develop solutions targeting the Office 365 platform. SPFx already supports hosting the SPFx web part as tabs in MS Teams and create personal tabs in MS Team. A personal app is an app with a personal scope. As an app developer, you have the option to provide a version of your app that is built for the individual user. This way, you’re able to create a one-on-one interaction with your users.

In this article, we will explore how can build and deploy multi-tab Microsoft Teams personal tab  with SharePoint Framework (SPFx).

I recently record the steps to showcasing ‘Build and Deploy multi-tab Microsoft Teams personal tab using SharePoint Framework(SPFx)’. You can watch the recording here:https://www.youtube.com/embed/FwbtljqWBSc?feature=oembed

Follow the below steps to develop the multi-tab Microsoft Teams personal tab  with SharePoint Framework solution:

Step 1: Create Create three Web Part’s under the same solution named:

1. Products
2. Services
3. Technology

Update the style as per your requirement

Update the package-solution.json file with “skipFeatureDeployment”: true to deploy the web parts in tenant level

Step 2: Create App Manifest using App Studio with three tab

Add App details

Capabilities –> Tab –> Add personal tabs

1. Name
2. Entity ID (Ex:10001)
3. Content Url – Add any https url later we change in manifest.json file
4. Website Url

Click Test and distribute and Download the package i.e zip file with manifest.json and two icons

Unzip the file and copy the three files and paste under teams folder

Step 3: Modify the manifest.json file

refer here https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

Open manifest.json file and replace the content url for all three tabs

"contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",

Then update the {SPFX_COMPONENT_ID} based on the Webpart ID from webpart.json file Ex: ProductsWebPart.manifest.json file

Then go to valid Domains section and update the domains

"*.login.microsoftonline.com", "*.sharepoint.com", "*.sharepoint-df.com", "spoppe-a.akamaihd.net", "spoprod-a.akamaihd.net", "resourceseng.blob.core.windows.net", "msft.spoppe.com"

Step 4: update the deployment option in all three webparts

“supportedHosts”: []

Save all and zip the manifest.json, color.png and ouline.png files

Step 5: Deploy the App

go to command line

gulp bundle --ship

It will convert the Typescript to java script and bundle it

gulp package-solution --ship

It will ship the bundle to office 365 tenant cdn

Open appcatlog site for your tennant and deploy the app

Select the ‘Make this solution available to all sites in the organization’ checkbox to deploy this app in tenant scoped

Step 6: Deploy teams app in Microsoft Teams

• Go to teams.microsoft.com
• upload a custom app

After upload go to left hand menu … and select your app and Add it

Now we got the solution with three tabs and all three webparts loaded in the tabs based on webpart ID

Summary

This post shows how to use Microsoft Teams App Studio to create a manifest for SharePoint Framework solution which can provide a multi-tab experience and potentially to include also a bot on the personal solution. This setup is aligning with the design guidance for the Microsoft Teams personal apps to have standard set of tabs for end users. Post demonstrates creation of the solution manifest file manually, rather than taking advantage of the standard “Sync to Teams” synchronisation for getting SharePoint Framework solutions also available in Microsoft Teams.

About the Author:

Jenkins NS Founder & Director of JPOWER4, is a MVP in Office Development and a Microsoft Certified Trainer(MCT) who has been working on SharePoint for more than 16 years, focusing on building custom solutions for Microsoft Teams, SharePoint Framework, Power Platform, Office 365, and SharePoint.

He is passionate about SharePoint, actively blogs, organizes events, speaks at events and international conferences, most recently on the topics of Microsoft Teams, SharePoint Framework (SPFx) and Power Platform. Jenkins blogs at http://jenkinsblogs.com and he is very active on social media, @jenkinsns

Reference:

Sundararaj, J. (2020). Build and Deploy multi-tab Microsoft Teams personal Tab Using SharePoint Framework (SPFx). Available at: http://jenkinsblogs.com/2020/04/24/build-and-deploy-multi-tab-microsoft-teams-personal-tab-using-sharepoint-frameworkspfx/ [Accessed: 24th November 2020].

Check out more great Microsoft Teams Content here or join our mailing list to stay up to date.