Embedding a SharePoint modern page or list as a Teams personal app

SharePoint communication sites are the Intranet solution within Microsoft 365 suite. They provide an amazing front-end for your users, and a very easy to use back-office for your communication team.

On the other hand, Microsoft Teams is becoming the entry point for Microsoft 365 services, and end-users are spending more and more time within Teams clients. They almost don’t go anymore on SharePoint Team sites for collaboration as most of the collaborative features provided by SharePoint are now integrated in Teams.

From a communication point of view, Teams clients can be a great opportunity to reach out most of the company  users.

In this article you’ll learn how to integrate SharePoint pages (and/or lists) in Teams clients, as a Personal App.

Personals Apps are Teams applications that are executed outside of teams context, that can be pinned on the left vertical menu of Team clients.

Personal Apps work as Tabs displaying content in an “iframe”, meaning that it “just” shows the content of another website. That being said, it could appears very easy to incorporate a SharePoint site within a personal tab, but you have actually one thing that “complicates” a bit the configuration : The user authentication.

Create a new personal app using App Studio

To create our app we are going to use Microsoft App Studio (that is actually a Personal App)

  • Install App Studio Teams application
  • Create a new app in the “Manifest editor” tab
  • Fill in all the app details :
    • Use the Generate button to create your App ID
    • The app version will need to be incremented each time you redeploy the app
    • The Full Color icon is used within the app, on the app details, and in the app store
    • The Transparent outline is used in the left vertical navigation menu, when the app is pinned

Configure the tabs

This is where we are going to configure what is displayed in your Personal App. In this example, I’ll configure 2 Tabs :

  • The SharePoint Intranet Home Page
  • The SharePoint App landing Page “My SharePoint”, that is integrated to my Intranet communication site as I’ve defined it as a Home Site for my tenant
 

In the “Capabilities / tabs” step in App Studio, you’ll have to create personal tabs. A Teams tab requires 4 informations:

  • Name: the tab name displayed in the app for the end-users
  • Entity ID:  a unique technical name
  • Content URL: The URL of the content that will be shown within the Teams tab
  • Website URL: The redirect URL to the resource accessible when the end-users choose to open the tab in their browser
  •  

For the first tab of my app, I will not directly use as content URL the address of my SharePoint Page. I will need to use an authentication URL that is included on all SharePoint sites, and having it redirect to my Home Page :

https://<tenant_name>.sharepoint.com/sites/<site_alias>/_layouts/15/teamslogon.aspx?spfx=true&dest=<encoded_sharepoint_page_url>

 

You can use this kind of online tools to encode your URL

https://mytenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=https%3A%2F%2Fmytenant.sharepoint.com

or (if you don’t use the root site of your tenant)

https://mytenant.sharepoint.com/sites/intranet/_layouts/15/teamslogon.aspx?spfx=true&dest=https%3A%2F%2Fmytenant.sharepoint.com%2Fsites%2Fintranet

It looks like the second tab doesn’t need this authentication URL, as it is working for me using the direct URL to the SharePoint Page. But If you encounter problems with your second tab (for example a white screen with no content), you can definitely use the same redirection URL technique.

Configure your app for SSO

This last part is very important for user experience. If you don’t configure your app for SSO, your users will have to authenticate themselves within the app against your SharePoint site, if they are using it in Windows Teams Client.

On Web clients, the browser already has the authentication token, so the iframe container in your app displaying your SharePoint page content will be aware of the user authentication. But in the Windows client, the app doesn’t get the authentication token from the client, so the iframe is requesting one by prompting the user for authentication.

On the “Domains and permissions” step in App Studio, you’ll have to specify the “AAD App ID”, and the “Single-Sign-on” URL.

The AAD App ID is the Application ID of the SharePoint Online App that you can find in your Azure Active Directory portal, in the Enterprise Applications section. It is actually always the same GUID, for all tenants : 

00000003-0000-0ff1-ce00-000000000000

The Single-Sign-On URL, is your tenant SharePoint root site

https://mytenant.sharepoint.com

Make sure you have your tenant SharePoint domain (mytenant.sharepoint.com) specified in the Valid Domain section. This should be done automatically based on the URL specified in your app tabs settings.

Deploy your app

The last part is in the Test and distribute step in App Studio.

You can use the “Install” button, to install the app only for yourself to test it.

Or you can use the “Download” button to download the .zip file of your app, that you’ll be able to upload in your company teams app catalog (with the Teams Administor or the Global admin role on your tenant), so the application is usable for all of your users. You will also be able to “side-load” this .zip file if side-loading is enabled on your Teams policies.

Making the app available in the company Teams app catalog make it usable in Teams Apps Setup policies, so everyone in your organization could have the Intranet App pinned by default on their Teams clients.

To upload the app in your company Teams App Catalog you’ll have to login in the Teams Admin center, and upload the .zip file in Manage Apps page.

Then on the Setup policies page, select your default policy (Org-wide default), and add your Intranet app to the list of apps.

Functional considerations

As you can see, on every embedded SharePoint Page in a Teams tab (in a personal app like we just did, or in a teams tab), we “just” see the content of the page, we don’t have access to the navigation or to the search bar for example. You have to consider this when building your intranet to be “Teams tab compatible”. You might want to use a Quick links webpart inside the content of the embedded page to allow the navigation, and/or consider using differents tabs for navigation across your intranet main topics.

Leave a Reply

Your email address will not be published. Required fields are marked *