How to embed PowerApps in modern SharePoint Online page

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

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)

embed PowerApps form in SharePoint page
embed PowerApps form in SharePoint page

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.

PowerApps embed code
PowerApps embed code

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
Embed PowerApps on SharePoint Modern Pages

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

embed powerapps in sharepoint online
embed powerapps in sharepoint online

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
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
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.

Embed PowerApps on SharePoint Modern Pages
Embed PowerApps on SharePoint Modern Pages

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.

>