How to add PowerApps to SharePoint page

Adding PowerApps to pages has been a hot topic for a while. Embedding PowerApps to pages enables new scenarios for end-users. It was impossible just a week ago, but now you can embed an app to a SharePoint modern page. I will show you how to do that below.

One of use cases is a self-service desk form. This is how my form looks:

Ability to embed PowerApp to a page is a great improvement, but it still has disadvantages. An app is embedded as an IFrame. It means that the web part is not responsive at all. It may be critical in “Mobile first” world. Anyway, you still can install PowerApps mobile client and use your app there without visiting your SharePoint site.

This is how my app looks on small screen. The double scroll is not the best user experience. It may be painful to use a form like this for users with small screens or tablets.

If you want responsive form within SharePoint context, you may consider an option to use other third party solutions like Plumsail Forms.

Now let me explain how to add the app to a SharePoint page.
First of all, open list of your apps (https://web.powerapps.com) and navigate to app details:

Then copy your App ID:

Replace [AppID] in the snippet below:

<iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=powerbi&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/**\[AppID\]**"/>

You may notice that there is screenColor parameter in the snippet. I assume that it has to change the background color or the app, but it changes nothing.

Create a new SharePoint modern page and add “Embed” web part:

Paste the snippet into web part properties.

That is all! Now you can use your PowerApps on SharePoint page.

If this article was helpful to you, please do hit the 💚 button below. Thank you!