Microsoft Team Extendability With Custom App Using SPFx

Manoj Mittal
Apr 08, 2021

8.5k
0
3
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Microsoft introduced the possibility to create custom Tab in Microsoft Teams using SharePoint Framework. With the version of SharePoint Framework 1.8, developer can implement Microsoft Teams cusotm Tab using SharePoint Framework.

Its significantly simplifies the development and automatically hosted the custom tab within sharepoint without any need of external services.

In this article, I am going to take an already developed web part and see what it takes to get it into Microsoft Teams with upload custom app i.e. SPFx using manifest file.

Project SetUp

As mentioned you will need to setup your development environment with at least version of the SharePoint Framework atleast 1.8 is required.SetUp M365 TenantSetUp SPFx development environment

Development Process

Microsoft Teams cusotm tabs created simply by using the SharePoint Framework 1.8 or later packages.

The high-level steps to get started are as follows,

Create a SharePoint Framework solution with a client-side web part
Add "TeamsTab" to the supportedHosts property of the web part manifest to use it as a tab in a channel: "supportedHosts": ["SharePointWebPart", "TeamsTab"]
Add "TeamsPersonalApp" to the SupportedHost property of the web part manifest to use it as a personal app: "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"]
Deply the SPFx webpart using tenant scoped deployment option to your sharepoint app catalog.
Activate the SPFx solution, which you deployed and Sync to Teams button in the app catalog.

Project Structure look like this ( as i am using SPFx V1.9 for this demo, as it doesn't add manifest file automatically here)

Add Team Tab to WebPart Name manifest.json file

"supportedHosts": ["SharePointWebPart","TeamsTab"]

Assumption here, you have finally deployed the SPFx webpart and Sync to Team successfully.

Teams Manifest File

This is the place where actual magic happen, The teams manifest file with in the teams package describe how to load the SPFx webpart into teams.

There are five important section, which i need to call out here

The manifest file with 5 important parts,

Part 1

This section holds the package name and the id of the web part. This id is the same as the id in your web part manifest file. So that’s the connection to the web part to load.

Part 2

This section holds the name, description and icons as it will appear in Teams. So in order to make your app appear differently in the App catalog, this is the place to edit. The icons match to the icons in your ‘teams’ folder.

Part 3

This section holds the url to your Site collection connected to your team. Not only the Site collection, but a _layouts page ‘TeamsLogon.aspx’ is called with a ‘dest’ query string parameter holding a _layouts page called ‘teamshostedapp.aspx’. Next to this there are some other parameters. Let’s look into the actual url,

"configurableTabs": [
{
"configurationUrl": "https://mittal1201.sharepoint.com/sites/Incident/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=https://mittal1201.sharepoint.com/sites/Incident/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=cf3de6a0-3b30-4dfc-a19b-c9f72432239d%26forceLocale=%7Blocale%7D",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
]

Note

mittal1201.sharepoint.com -> team site domian.
/sites/incident -> team site path
Encoded character format is very important, it will keep failing, if you missed any like %26 should not be replace with & , %7B should not replace with { , %7D should not replace with }

The TeamsLogon.aspx is used to authenticate and with the current user to the SharePoint Online site. The TeamshostedApp.aspx page will render the actual web part using the componentId query string parameter, which point to the web part id in the manifest. Further more you can see there is a scopes property, which for now is only available for team

Part 4

This section hold all valid domain connected to your teams.

"validDomains": [
"mittal1201.sharepoint.com"
]

Part 5

This section used for SPFx webpart SSO iuntegeration with Cusotm Teams Tab.

"webApplicationInfo": {
"id": "00000003-0000-0ff1-ce00-000000000000",
"resource": "https://mittal1201.sharepoint.com"
}

"id": "00000003-0000-0ff1-ce00-000000000000" . This is dummy resource id Or you can create an Azure AD APP within same tenant directory. Use Client ID from there.

Now, we are set with final configuraiton i.e. Manifest and SPfx component . Let's start with Configuration steps

Step 1 - Create Teams and Navigate to Manage Teams Setting

Create a new teams example "MSTeams-Tab" into Microsoft Teams
Select "..." and Manage Teams

Step 2: Navigate to Selected Teams App Setting

Select Apps Tab
Right Bottom click to Upload Custom App to upload the manifest file.

Step 3 - Upload Created Manifest Zip File

Create Zip file by selecting all three files i.e. manifest.json, color.png, outline.png
Upload via custom app options
Click to add button to add into selected Ms Teams

At this stage, you have added SPFx control configuration to MS Teams. Now you can add SPFx as a tab.

Step 4 - Add and Configure Cusotm Tab

Select the MSTeams and Navigate to General Channel or desired Channel within Teams
Click to "+" i.e. available next to tab.
Search your app name from avaialble created app name
Select the created app name and App addition popup will appear.