Embed PowerApps on SharePoint Pages
It is now possible to embed PowerApps on SharePoint Pages. This is extremely useful because users don’t need to go outside of SharePoint to access PowerApps.
As an example, I’d like to customise the NewForm.aspx page of my SharePoint list to add visual instructions of how to complete a Risk Identification form to the users.
Usually, the task could be done by inserting a Content Editor web part to the NewForm.aspx page. However, we are no longer able to edit SharePoint form pages from the web browsers with the new UI of SharePoint.
An alternative option is to use SharePoint Designer to edit the source code of the page but again, the form itself is an out-of-the-box web part and I couldn’t do much to change the form to the way I wanted. I could add or change things around the form, but not the form itself.
With PowerApps, we have way more controls on how to design our forms. I quickly created the Risk Identification form using PowerApps as follow:
Before embedding the app to a SharePoint page, I needed to configure SharePoint to allow embedded content from PowerApps. From the SharePoint site collection, I clicked on Settings > Site Settings > Site Collection Administration > HTML Field Security and added web.powerapps.com to the list.
Next, I created an empty SharePoint Site Pages and added an Embed web part to the page.
From PowerApps, I noted down the App ID from the Details section of the app.
I constructed the iframe code with the above App ID as follow:
<iframe width=”1024px” height=”768px” src=”https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/3fcad222-a6df-4b42-bc2e-72e457ef5340" />
The above iframe code was then copied and pasted into the Embed web part.
The end result looks like this:
With the ability to embed PowerApps into SharePoint, the possibilities for using PowerApps with SharePoint are endless. Microsoft is still working on improving this neat feature so that there will be no need to manually create iframe, src Uri or using web parts in the near future. Watch this space!
That’s it for now.
