I've blogged before on how the SharePoint News Connector is limited to publishing news from the SharePoint site associated to the Microsoft Teams team, and how to work around it. It seems the SharePoint app in Teams has a similar limitation: you can only show pages and lists from the associated SharePoint site.
Time for another workaround!
Options
Let's assume we want to show the page at the following URL: https://contoso.sharepoint.com/sites/TheLanding/SitePages/Awesome-Page.aspx
Use the Website app
Sometimes it's simple as Microsoft Teams comes with the Website app. You can use it to display any (literally any, not just SharePoint) URL as a tab in a Microsoft Teams team.
You put in the URL for the SharePoint page and that's it! This works very well in the browser, but in the desktop app you occasionally get hit with a login screen:
It might not be much of an issue, although it is inconvenient for your users. The login screen can be bypassed by using the SharePoint app: use the app to add a SharePoint list, open that tab first, return to the Website tab and now it loads without the login screen.
Use the Website app with an SSO-trick
This trick for Single Sign-On with SharePoint pages has been in my blog backlog for a while, but I never got around to writing it. Luckily, this week long-time MVP Tony Redmond did publish it.
Small recap:
- You still use the Website app
- You put the URL in a special format:
https://contoso.sharepoint.com/sites/TheLanding/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/TheLanding/SitePages/Awesome-Page.aspx
This URL format is also used for integrating custom SharePoint Framework web parts into Microsoft Teams, so it was a safe bet although it's not officially supported. After Tony published it, people reported that it doesn't work for them on the desktop client. All reports mentioned an endless spinner:
Seems like the behavior of the Website app or the SSO trick changed, I was also seeing the spinner in places it used to work before. Some more investigation showed that, just like with the normal URL (see previous option), this can be made to work by preloading the access token for SharePoint using a custom list in the SharePoint app.
Use a custom app
Unless you or your users like logging in multiple times, endless spinners or workarounds on workarounds, the above options aren't very interesting. If the SharePoint app can do it, there had to be a way for us too.
Combining the knowledge from here, here and some tests with a personal scoped app, I figured out the holy grail. Adding the following piece of code to your custom Microsoft Teams app manifest will make sure that it fetches an access token for your SharePoint environment.
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
This gave me the idea to create a SharePoint Page Embed app for Microsoft Teams! The app provides a configuration page for your tab to enter the relative path to the SharePoint page that needs to be shown:
You can find all the necessary code in my Github repository. The code is generated using the awesome Yeoman generator for Microsoft Teams, and contains both the code for the configuration page as the manifest for the Teams application.
For the configuration page, you are free to use the one I host for myself (on a static website on Azure Storage) or you can host it yourself.
If you want to host yourself, you download the code from my repository and you run gulp build. The result will be in the dist folder and you'll need to host it somewhere on the internet, publicly reachable.
As a next step, you need to update the .env file in the root of the repository. Most important is the SPHOSTNAME variable, it needs to be your SharePoint root site URL in the form of contoso.sharepoint.com. If you decided to self-host the config page, make sure you also update the HOSTNAME variable.
Now you run gulp manifest, and the resulting app package zip-file will be in the package folder. Upload this package to your Microsoft Teams environment: side load it just for you or distribute it for your whole organization.
It's now available for you to embed any of your SharePoint pages right inside Microsoft Teams, either as a tab in a team or as a tab in a group chat!
Update: I also put up a prebuilt app package on the GitHub Releases page, to even more simplify the process. You only tweak the manifest.json file inside the zip to have your tenant name instead of contoso.sharepoint.com, and you can use it in Microsoft Teams.
Result
The SharePoint Page Embed custom app makes sure that any SharePoint page will load without an issue inside a tab in a Microsoft Teams team, with SSO and without additional login requests:
