Overview
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:
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:
- Products
- Services
- 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
- Name
- Entity ID (Ex:10001)
- Content Url – Add any https url later we change in manifest.json file
- 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
Select all three files and compress it to create zip file and give proper name for the zip file
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.
Comment here if you have any queries and clarification