Teams Real Simple with Pictures: Bringing Power Pages into Microsoft Teams

Written: 19/06/2022 | Updated: N/A

It’s been an uber busy week. A lot of delivery including a two day hands on SCI Fundamentals which was awesome – and getting together with Raphael and Jennifer Köllner to speak at GSCC on E2EE encryption which was also awesome. There’s been lots of programmatic changes. There’s been building multiple Power BI dashboards. Spinning up Flows. Lists. Video. You name it. But I also got some time to go to the circus and despite my life being – too all extents – a circus, it was a few hours of some well needed respite to sit back with the family, load up on the nachos, candy floss, coke – and whatever else was bad for the cardiovascular system and take in the spectacle. Now, there may very well have been multiple changes in Microsoft Teams this week. I haven’t monitored the roadmap, nor cast an eye over the demo tenants as I usually do. But I have been meaning for a few weeks to get around to looking at Power Pages since the announcement at Build. Power Pages – previously Power Apps Portals – are now a product in themselves having split out from Power Apps. Up until this blog I haven’t touched Power Pages, so this is going to be an exploratory just to see if I can deploy one via a 90 day trial and then see if I can surface them in Teams. Over the past few weeks I’ve been talking about Stream Portals so this seems to fit in flush. Moreso, I think there will be a lot of discussion moving forward generally regarding portals in the broadest sense. Viva Connections. Stream Portals. Power Pages. I can foresee a session at some community event on Portals: what to use when and some plucky MVP getting up to compare.

Let’s go

This blog will cover

  • Deploying Power Pages via a trial
  • Surfacing into Teams via a Web Tab
  • Surfacing into Teams via a Personal App
  • What if the Power Page doesn’t render?
  • The outstanding issue of authentication

NOTE: This blog may have abridged steps and will assume some familiarity with Microsoft 365 and Teams

Prerequisites

  • Teams Licence (Within Microsoft 365 Licence) for testing
  • Teams Permissions to add web tabs
  • Teams Administrator for the creation of a personal app
  • Tenant Permissions to sign up for trials of Power Pages

DEPLOYING POWER PAGES VIA A TRIAL

1.) Go to https://powerpages.microsoft.com/en-us/ and select Try it for Free

2.) Enter your email address and accept the terms and then select Start Your Free Trial

3.) The site will take you to https://make.powerpages.microsoft.com/ and if you are already logged into your Microsoft 365 Tenant, it will welcome you. Select Get Started

4.) Select whether you have experience creating websites. This example uses No, I’ve never built one before

5.) Choose a template. This example uses the Default Design Template

6.) Select Choose Template

7.) Give your site a

  • Name: the name for the site. This example uses I am Megan Bowen
  • Address: choose the site address in format address.powerappsportals.com. This example uses iammeganbowen.powerappsportals.com
  • Environment: Unless you have deployed before select Trial
  • Site Language: Choose the right language for you

Once complete select Done at the bottom of the page

8.) The site is now set up which takes a minute or two

9.) The Power Page is live and is working at https://iammeganbowen.powerappsportals.com

SURFACING INTO TEAMS VIA A WEB TAB

Now that the Power Page is deployed, the first place we could surface this in Teams is a channel via a web tab. This will be in the Desktop client.

1.) In the Teams Desktop Client, select Teams from the left app rail, then the Team, then the Channel. At the top of the channel select Add (+) to add a new tab

2.) Search for and select Website

3.) Provide a Tab Name and enter the URL of the Power Page and then select Save

4.) The Power Page is viewable in a Channel

NOTE: this worked for, and was tested against, the Teams Desktop App in Windows. In the Teams mobile experience on IoS it redirects via a link to Safari. Inside the Teams Web App? This may not work. If not, see the second to last section – What if the Power Page doesn’t render? I got it to work

SURFACING INTO TEAMS VIA A PERSONAL APP

Ok so all good with the web tab, let’s see if we can use the Power Page in the context of a personal app

1.) In Teams select More Options (…) from the left app rail and then search for and select Developer Portal

2.) Select App Studio

3.) Select Create a New App

4.) Add the details as follows within App Details

  • Short Name: Short Name for the App (Here will be called ‘Power Page’
  • Full Name: Full Name for the App (Here will be called ‘Power Page App’
  • Identification: Select Generate and generate an ID for the app
  • Package Name: As required (Here will be called ‘package.powerpage.app’)
  • Version: App Version (Here 1.0.0)
  • Short Description: Description of the App (Add as required)
  • Full Description: Description of the App (Add as required)
  • Developer Name: Name of App Developer (Here ‘Contoso’)
  • Website: Website of Developer (Here ‘https://www.microsoft365pro.co.uk’)
  • Partner Information: Optional
  • Privacy Statement: URL (Here ‘https://www.microsoft365pro.co.uk’)
  • Terms of Use: URL (Here ‘https://www.microsoft365pro.co.uk’)

The logos and branding for the app are optional. I haven’t used them this time around

5.) Under Tabs select Add a Personal Tab

6.) Add the following

Name: Playlists
Entity: Unique Entity of the Tab. Example 100005 used here

Content URL: The content URL is the URL of the Power Page

https://iammeganbowen.powerappsportals.com/

Website URL: Leave Blank, unless you want to a click out to the browser in the top right of the tab. If so, then use the URL of the SharePoint Site

7.) Ensure the domain of the Power Page is added under Domains and Permissions. You can also complete the AAD App ID and the SSO if required

8.) Once done select Test and Distribute and then Download

9.) The app package downloads

10.) Go to the Teams Admin Centre and under Teams Apps select Manage Apps and then Upload

11.) Select Upload

12.) Select the app package and then open. The new app has been added. Check the Teams Admin Centre that the app appears in the app list

13.) Go back into the Teams Client and from the left hand app rail select Apps

14.) Select Built for your Org

15.) Select The App

16.) Select Add

17.) But what is going on here? Like the web app experience doesn’t appear to render

WHAT IF THE POWER PAGE DOESN’T RENDER?

Ok, so we got the Power Page to surface correctly in a channel in the Desktop Client. It didn’t in the web app, and it didn’t in the personal app. How do we correct this? I did a lot of reading up and spent about 3 hours navigating my way to a solution

1.) Go to https://make.powerapps.com and select Apps

2.) Setting More Options (…) on the portal and select Settings

3.) Select Site Settings

4.) Under Site Settings navigate to the items 3 HTTP/X-Frame Options entities

5.) Select New

6.) Add 2 items as shown in the code below and remove the HTTP/X-Frame item referring to the Power Page you just deployed (here Default Portal Template). There should now be 4 HTTP entities with the 2 new ones. No action needs to be taken on the HTTP/X-Frame entities.

HTTP/Content-Security-Policy
Default Portal Template
frame-ancestors 'self' https://teams.microsoft.com

HTTP/Content-Security-Policy
Default Portal Template
frame-ancestors 'self' https://login.microsoftonline.com

7.) Now return to Teams and try to access the personal app again (may require a restart and logout/login of the Teams desktop client and a close/refresh cache on the web app/browser). This should now work as expected

It also shows in the web app

We have achieved what we need, we have surfaced the power page via

  • A web tab in a channel
  • A personal app in the app rail

THE OUTSTANDING ISSUE OF AUTHENTICATION

The Power Page works really well – like for like as it does in a browser. All of the site can be navigated and every page renders. There is one outstanding issue from testing (which I will take to Microsoft) and this is Azure AD authentication (logging into the Power Page via the sign in at the top right) when it’s in the personal app in the desktop client. Following the steps above

  • Azure AD Authentication via a web tab in a channel in the desktop works
  • Azure AD Authentication via a web tab in a channel in the web app works
  • Azure AD Authentication via a personal app in the web app works
  • However Azure AD authentication via a personal app in the desktop does not work, it hangs

However, there are several workarounds to this

  • Authenticate with Azure AD in a web tab in the desktop and then navigate back to the personal app and the user is authenticated and it works. However, it you log out of Teams and back in you’ll need to repeat this process
  • Enable another authentication method and use that
  • You could use local logins but I personally wouldn’t for security and SSO reasons
  • Disable all authentication and simply have the Power Page to consume without web roles