Embed PowerApps In SharePoint Modern Page

Embed Webpart

Embed Webpart can be utilized to add website content to your SharePoint page.

• Add an Embed Webpart on your SharePoint Modern Page and use only the iframe code in your Embed webpart.
• Both the Tablet layout and Phone layout can be embedded on SharePoint Modern Page.

Note
The SharePoint Site and the PowerApps both should be part of the same Office 365 Tenant to achieve this.

Below are the steps to embed the PowerApps app on the SharePoint Modern page,

1. Publish the PowerApps form 
2. Get PowerApps App ID 
3. Create a SharePoint Modern Page 
4. Add an Embed Web part
5. Apply the iframe code
6. Publish the SharePoint Modern Page

How to get PowerApps App ID

Clicking on the Details option, you can get your App ID as shown below,

Copy this App ID and paste it into one Notepad for future use.

How to Create a SharePoint Modern Page

1. Go to your SharePoint Online Site.
2. Create a SharePoint Modern Site Page.

Clicking on the "Page", opens a new page. Name the page and add embed webpart using the '+' icon.

Once the Embed webpart is added, edit the Embed web part and apply the below iframe code inside the Website address or embed code as,

<iframe width="980" height="600" src="https://web.powerapps.com/webplayer/iframeapp?
hideNavBar=true&amp;source=iframe&amp;screenColor=rgba(104,101,171,1)&amp;appId=/providers/Microsoft
.PowerApps/apps/YourAPPID"></iframe>

Replace YourAppID in the above code with the AppID pasted in notepad and Publish the SharePoint page.

Here you can see how my PowerApp is added to Modern SharePoint Page.

Note
You can resize your width and height properties as per your need in iform code.

OUTPUT

Summary

In this article, we learned how to embed the PowerApps app on the SharePoint Modern Pages.