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.

  1. Go to web.powerapps.com and then click on your already existing app, to open it.
  2. On the File menu, click Share.
  3. Go to the Details tab.
  4. Take a look at your App ID.  Copy it and put it over in Notepad, you’ll need it.
  5. Close PowerApps.
  6. Go to your SharePoint site where you’d like to embed this app.  Go to Site Settings.
  7. 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.
  8. In the box, Allow iframes from this domain, type this:
    click Add.  Click OK.
  9. 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.
  10. Insert the Embed web part.
  11. 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:
  12. 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?

    Liked by 1 person

  • 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 %


  • Allan González

    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.


  • 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……………”


  • Ross Woodward

    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


  • 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?


  • 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 has changed right? Now the iframe is src=https://apps.powerapps.com/play/[AppID] is it?


Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.