Embedding PowerApps As A Web Part On SharePoint Page

It is now possible to embed PowerApps into SharePoint Online pages as web parts using iframes. The PowerApps and the SharePoint Site (where the app is to be embedded) need to be part of the same Office 365 Tenancy.

Although an app with mobile layout can be embedded on the SharePoint page, for better usability and look-feel, it is recommended to create an app with tab layout.

I have used the ‘Asset Checkout’ tab layout default template from PowerApps to create the app.

• To embed the app in a SharePoint Page, we will need to generate the embeddable URI for the app. For this, get the App id. Go to the app details page on web.powerapps.com and the app id will be listed as a GUID on the app's details page.
  
  
• The iframe code is as follows -

  <iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/[yourAppID]" />

  • The width and height properties are set to 98%, to ensure that there is no grey background area around your app.
  • hideNavBar - It is a Boolean which controls whether the PowerApps header is visible or not.
  • screenColor- controls the loading screen color while the app loads
• Create a page on your SharePoint Site and embed the above code using the "Edit" mode.
• You will be able to access PowerApps from your SharePoint Page.
  
  
  
  

This is not the final version of the capability and it is expected that the Microsoft team will bring in a better way to do this in future.