Embed PowerApps on SharePoint Modern Pages
** 11/2019 update: Note that this post was originally written in 2017. In the meantime, a new PowerApps web part has been introduced to the product. So, the embed code method in this post only needs to be used if the PowerApps web part is not available to you.
PowerApps can be embedded on pages, using an embed code.
- Go to web.powerapps.com and then click on your already existing app, to open it.
- On the File menu, click Share.
- Go to the Details tab.
- Take a look at your App ID. Copy it and put it over in Notepad, you’ll need it.
- Close PowerApps.
- Go to your SharePoint site where you’d like to embed this app. Go to Site Settings.
- You need to be a site collection administrator for this part. In Site Settings at the top level of your site collection, in the Site Collection Administration section, click HTML Field Security.
Note that if you don’t see this setting in site collection admin, go to the SharePoint Admin Center –> Settings –> Custom Script, and you have to allow custom scripts. This is a tenant level setting. - In the box, Allow iframes from this domain, type this:
web.powerapps.com
click Add. Click OK. - Now, go to your homepage or whatever page you’d like to embed this. It doesn’t even *have* to be a modern page. At the top right of the page, click Edit.
- Insert the Embed web part.
- In the web part properties on the right, use this code as your embed code, with your own App ID in there where it says AppID:
- You’ll see your app on the page now, and you can Publish the page.
There’s even a parameter function that lets you pass parameters to your PowerApp. https://powerapps.microsoft.com/en-us/tutorials/function-param/
You can even embed PowerApps in Power BI now as well: https://powerapps.microsoft.com/en-us/blog/embed-an-app/
Hi Laura, Very nice Trick! Thanks ! Have one question though. In which Security Context the Webpart will run? Current User?
Doesn’t seem to work in Chrome. I get the following error: “Chrome detected unusual code on this page and blocked it to protect your personal information (for example, passwords, phone numbers, and credit cards).” ERR_BLOCKED_BY_XSS_AUDITOR
Any suggestions?
Now it seems to work some of the time in Chrome but it is super tiny!
Consider defining the iframe size as px rather than % as when the iframe is displayed it will be scaled to fit by a transform function if the size is defined in %
Thanks for the trick, I got it to work on IE, without this advice I havent had accomplished it, all the time throwing errors and not showing at all, but now my problem is for some reason Im not getting the list items and apparently because of authentication or who knows, all of the datasources are failing, the list is not being populated and the sql queries are not being pulled either, BUT THIS ONLY IN IE, IN CHROME WORKS FINE, any comment?
Pingback: New Modern Web Parts – Full List | @WonderLaura
Pingback: PowerApps – Where should you stick your PowerApps? – SharePains
Hi, is there a way to embed only a portion of a PowerApp screen on to a page? i havent been able to figure out how, i can embed the whole app and then it resizes dependent on the iFrame height i give it, there is also no way (currently) to change the height of an app in PowerApps.
I don’t know of a way to do that, no, sorry.
Thank you for the pointer. Tried the iframe embed with the form’s AppID. However, did anyone else get the “We can’t show this embedded content because the code seems to be incomplete. Make sure that the embed code includes width, height and a valid address for the src attribute.” error? Can a PowerApps ‘Form’ be embedded (vs. PowerApss App)?
The source code for the PowerApps form looks a bit different, begins with: “https://web.powerapps.com/webplayer/embedapp?&source=SPOListFormBackground&locale=en-US&enableOnBehalfOf=true&appId=%2Fproviders%2FMicrosoft.PowerApps%2Fapps%2F3157566d-7abd-4034-9393-dd285c7d862d&embed=true&hideNavBar=true&hideAppSplash=true&packageProperties=%7B%22cdnUrl%22%3A%22https%3A%2F%2Fpaplayercdn.azureedge.net%2Fappresources%22%2C%22preLoadIdx%22%3A%22https%3A%2F%2Fpaplayercdn.azureedge.net%2Fappresources……………”
How does that parameter function work with the embed code? I am a newbie and wanted to include a Sharepoint List based web part in a page but with the corect item already selected. Can this be done using the parameter function and embed?
Hi everyone. I was not able to embed an app using the code in the example however I was able to successfully embed with this one, found in the MS site, hope it is useful for those having problems setting this up.
Specify values for the iframe width and height, and substitute the ID of your app for [AppID].
Include allow=”geolocation; microphone; camera” in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.
Does anybody know how to pass parameters out of Powerapps
If you want send data to excample flow -> Use collection then .Run(JSON(tmpCollection))
Hi Laura
I’m quite new to PowerApps and Sharepoint this article helped me out so much. I managed to get my PowerApp on my Sharepoint site however it just get the loading screen on my site and it just continues endlessly. Has anyone else experienced this problem that could possibly help? Thanks in advance.
This has been super helpful. Just wondering if there’s an option to change the background color from gray to another color?
In the app’s settings, there’s a way to make it transparent. It’s under advanced settings, and it’s called “Optimize embedding experience”.
Love your posts. I have learned so much from you. Thanks. Have you had an success passing a parameter to PowerApps form that is embedded on SharePoint page? With Infopath is was possible to pass url parameters to a form embedded on a SharePoint page using the query string filter webpart. I am struggling to pass parameters to a PowerApps form that is embedded in a modern page on a SharePoint site. The Param function doesn’t seem to work when the form is embedded using the PowerApps webpart. I tried embedding using the ’embed’ webpart (as an iframe – the original technique in this post) and was able to pass a parameter, however I was only able to pass a static variable. Ideally, I’d like to pass a dynamic parameter without having to use any jquery/javascript. Any suggestions?
I’ve tried it, but there doesn’t seem to be a way to do that, with modern web parts, unfortunately.
I has changed right? Now the iframe is src=https://apps.powerapps.com/play/[AppID] is it?
Hey Laura, I am trying to embed a power apps form as a SharePoint web part in order to pull into Teams. I am using a GCC version of Teams and it doesn’t have Project Oakdale installed yet so I am sure this is super simple with teams now. I can use the web part successfully but I want to show a specific screen. It doesn’t take adding parameters to the add even though MS (https://support.microsoft.com/en-us/office/use-the-power-apps-web-part-6285f05e-e441-408a-99d7-aa688195cd1c) says that it does support it. I tried to use the old version above with an iframe on SP but it keeps telling me to sign in with power apps when I add the SharePoint link to a team’s channel tab. Any ideas?
Hi Marie, no since the government tenant is so far behind, I’m not sure off the top of my head what the workaround would need to be.
I’d recommend making sure you add the additional `tenantid` parameter which is described as “an optional parameter to support guest access and determines which tenant to open the app from.” See https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/embed-apps-dev#set-uri-parameters-for-your-app
To get your tenant ID, follow WonderLaura’s instructions to share the app, but instead of just copying the App ID, look at the `Web link` provided. That should include both the App ID and the Tenant ID. Hopefully that is enough to make it work. If access is restricted with the PIV badges etc, it might still need you to jump through some additional authentication hoops. :/
Hi Laura. I used the new Powerapps webpart for Site Pages for a customised Sharepoint list Form but can’t get the form o show as new. If I change its default to new then I can’t edit existing ones. Should I be using this option instead? (We use Chrome as a default at work)
Looks like the URL format has changed: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/embed-apps-dev#set-uri-parameters-for-your-app
Pingback: How to Embed PowerApps in SharePoint with parameters
Why would you put the EMBED code in as an Image?
because that’s the way you used to have to do it. This blog post is from 2017.