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.

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:

About the Author:

Yannick started his career right after the launch of SharePoint 2010, inheriting some leftover projects on 2007 and 2003. He continued his journey as a technical consultant, doing development on all versions of SharePoint with all possible development models. The future is cloud, so he moved on to cloud work broadening view with knowledge of the whole Office 365 (and more recently Microsoft 365) platform. His solutions are mostly aimed at improving the collaboration experience, using the best tools available within Microsoft 365, the Power Platform and Azure.

Reference:

Reekmans, Y. (2019). Show any SharePoint page as a tab in a Microsoft Teams team. Available at: https://blog.yannickreekmans.be/show-sharepoint-page-in-microsoft-teams/ [Accessed: 14th February 2020].

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