This PowerApps tutorial, I will explain how to embed PowerApps on modern SharePoint Site Pages in SharePoint Online Office 365. Here I have an existing PowerApps form, and I will embed that existing PowerApps form to SharePoint Online.

If you are new to PowerApps, then read an article on: Create your First form using Microsoft PowerApps in SharePoint Online

Table of Contents

Embed PowerApps in modern SharePoint online site page

Open SharePoint Online site where we want to embed the PowerApps form. Go to the “Site Settings” of the site. Click on “HTML Field Security” which comes under the “Site Collection Administration” section of SharePoint online.

Check Out Microsoft PowerApps and Flow Training Course (Lifetime Access)

The “HTML Field Security” page will open in the SharePoint site online, enable the “Allow contributors to insert iframes only from the following domains” option. In the “Allow iframes from this domain” box type “www.PowerApps.com“. Click on Ok.

Now we will create a modern site page in SharePoint Online Office 365. If you are new to SharePoint Online modern experience, read below SharePoint Online modern tutorials:

To Open the SharePoint Online “Site Pages”. Go to “Site contents” then Click on “New”. Under the New click on “Page” of SharePoint site.

Embed PowerApps on SharePoint Modern Pages

Now our Site Pages of SharePoint Site will open. Go for the add symbol.
Click on “Embed” option.

On the right hand side of the Site Pages, we will see the text box for the Embed code. Here we need to write the embed code with the PowerApps App Id.

embed powerapps form in sharepoint online

Our Embed code will look like below. Type the below code, in place of “Give your PowerApps App ID here” give the PowerApps App ID which you want to embed here.

<iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&screenColor=rgba%28165%2c34%2c55%2c1%29&appId=/providers/Microsoft.PowerApps/apps/Give your PowerApps App ID here"></iframe>

How to get App ID of PowerApps form?

Now we will see how to get our PowerApps App ID of a PowerApps form.

To get the PowerApps App ID, at first login to PowerApps.com. Go for “Apps” in the Home Page. Here we will see all the Apps which you have created before.

Click on particular Apps which we want to embed to SharePoint site. Left Click on it, and click on “Details”.

In the Details option, all the details information of the Particular Apps should be available like below:

embed powerapps in modern sharepoint online site page

In the Apps Details page copy the App Id and paste the App ID in the embed code in the SharePoint site page.

embed PowerApps SharePoint online — embed PowerApps SharePoint Online

Now we will see the PowerApps form is added to the SharePoint Site Pages. If you want to resize the Apps to fit the page then enable it. To Save the Page give a name for Site pages and Save the pages to SharePoint site.

You may like following PowerApps tutorial:

In the above PowerApps blog, we saw how to get the PowerApps App ID. Using the ID how we will embed the PowerApps form to the SharePoint online modern Site pages in Office 365.

Bijay Kumar

I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com