How to add a SharePoint content as a tab in Teams channel using Graph API

With European Collaboration Summit 2021 closing in, I am focusing this time on more Graph API since my session at the event is about Microsoft Teams Graph API. Adding a SharePoint page to the team is just one of examples I do during my session. I will be also adding a Power App, Whiteboard, OneNote and do a lot more with Graph API on a team context.

Adding a SharePoint page to a team during provisioning is something people ask me about. I did write about this couple of years ago in my blog but I think it is time to highlight the information up again.

Officially adding a SharePoint page as a team channel tab with configuration is not supported. We can add a page anyway! 😎

It does state that it is the configuration is not supported, but also tries to make us adding it via Website tab. That would create issues with authentication, so we don’t want to go to that direction. Instead we use SharePoint app to add the pag to team channel as a tab.

Steps needed

1. Get URL to the page
2. Have URL to the team site
3. Format the content URL from site and page URL
4. Create JSON payload
5. Call Graph API to add the tab
6. Done!

I assume you have the URL for the page you are going to add already. And also the URL for the team site. This covers steps 1 and 2 and we can focus on the formatting of content URL. We need also to add encoding to the site address and page file name. Content URL is formatted like this:

https://{siteaddress}/_layouts/15/teamslogon.aspx?spfx=true&dest={encodedsiteaddress}%2FSitePages%2FHome.aspx

It is important to create the Content URL in this format, to take advantage of authentication.

How I do this in my demo PowerShell is the following:

$spcontentURL = $targetsiteURL + '/_layouts/15/teamslogon.aspx?spfx=true&dest='
$spencodedURL = $targetsiteURL
$spencodedURL = $spencodedURL.Replace("/", "%2F")
$spencodedURL = $spencodedURL.Replace(":", "%3A")
$spcontentURL = $spcontentURL + $spencodedURL
$spcontentURL = $spcontentURL + '%2FSitePages%2FHome.aspx'

I assume (and know) that the only thing I need to care about are spaces and / characters. You need to also have a Website URL to the page there, so it can be opened easily in the web by pressing the globe button.

$spWebsiteUrl = $targetsiteURL + '/SitePages/Home.aspx'

Building the payload is not complicated. You are using the TeamsAppID there to identify SharePoint application. The ID is given in the Docs page.

$spJSON = '
{
"teamsAppId": "2a527703-1f6f-4559-a332-d8a7d288cd88",
"name": "SharePoint tab",
"displayName": "SharePoint Home page",	
"sortOrderIndex": "10000",	
"configuration": {
        "contentUrl": "'+ $spcontentURL + '",
        "websiteUrl": "' + $spWebsiteUrl + '",          	
}}
'

Graph API is the same as adding any other tab to the channel.

https://graph.microsoft.com/beta/teams/{teamID}/channels/{ChannelID}/tabs

In my demo I just place the tab to the General channel.

$piTabsURI = "https://graph.microsoft.com/beta/teams/" + $teamID + "/channels/" + $PrimaryChannelID + "/tabs"
$graphResponse = Invoke-RestMethod -Method Post -Uri $piTabsURI -Headers @{"Authorization" = "Bearer $accessToken" } -Body $spJSON -ContentType "application/json"

Testing it out

After running the script we can see SharePoint Home page added to the team channel tabs

And we also see it has been connected to the the SharePoint application – just like we intended to. We can change the tab target normally from there if we want to.

And it works on mobile Teams also without requiring any extra authentication

It is not just for SharePoint pages

You can use the new SharePoint application to attach also Document Libraries and Lists to the team as a channel tab.

Document Libraries and Lists: pay attention to the contentURL format. Use the earlier stated format:

https://{siteaddress}/_layouts/15/teamslogon.aspx?spfx=true&dest={encodedurl}%2F_layouts%2F15%2Flistallitems.aspx%3Fapp%3DteamsPage%26listUrl%3D%2Fsites%2F{sitename}%2F{encodeddoclibname}

The same applies for Lists for most parts. Remember to encode URL and use teamslogon.aspx format for contentUrl .

https://{siteaddress}/_layouts/15/teamslogon.aspx?spfx=true&dest={encodedURL}%2FLists%2F{encodedlistName}%2FAllItems.aspx%3Fp%3D11

WebsiteUrl is just encoded URL (.webUrl) to Doclib or List.

💡The easiest way to get familiar with these is to add a tab to a team and use Graph Explorer to fetch channel tabs to see details and formats.

Using Graph API to add a SharePoint Home page – or other SharePoint resources – to the team during provisioning will it easier for the team to start utilizing and adding relevant content there.