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)

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:

• SharePoint Online modern experience tutorial
• How to move from classic to modern experience in SharePoint online list or document library?
• SharePoint Online Modern List: Explore 11 New Features
• Hero Web Part in SharePoint Online Modern Site
• How to set modern home page in classic SharePoint site in SharePoint Online Office 365?

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

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.

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:

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

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:

• PowerApps Send an Email on Submit Button
• Create a PowerApps App from PowerApps template
• How to Customize SharePoint Online List form using PowerApps
• Microsoft PowerApps: Get Current Logged In User Details like Email ID, UserName in SharePoint Online
• Microsoft PowerApps: Create Login Screen

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.