Embed PowerApps in SharePoint modern page

In this PowerApps tutorial, We will discuss how to embed PowerApps in SharePoint modern page.

Also, we will check how to fix error That link didn’t work. Please check it and try again that comes in PowerApps.

Embed PowerApps in SharePoint modern page

To be more productive, it is possible to embed the PowerApps app into SharePoint Online Modern Pages. So that you can directly use your app from the SharePoint Page itself.

For that, you need to add an Embed Web part on your SharePoint Modern Page. And make sure, you will use only the iframe code in your Embed web part.

Another important thing you have to remember is, the SharePoint Site (where you are embedding the app), and the PowerApps both should be the part of the same Office 365 Tenancy.

You can embed the Powerapps app with a Tablet layout and as well as a Phone layout on the SharePoint Modern Page. But for better look and design, you can use the Tablet layout.

I have a PowerApps Canvas app named as “Access Registers“. I have both the Layouts as Tablet and as well as Phone Layout. I want to display both these app layouts on my SharePoint Modern Pages.

To embed the PowerApps app in SharePoint Modern page, you need to do these below things as:

• Get your PowerApps App ID (which one you are going to embed on the SharePoint Modern Page)
• Create a SharePoint Modern Page (where you want to embed the app)
• Add an Embed Web part and apply the iframe code
• Publish the SharePoint Modern Page

Get your PowerApps App ID:

At first, you need to get the PowerApps App ID that you want to embed on the SharePoint Modern Page. You can get your PowerApps App ID by using two different ways as:

1. By using the App Details pane:

• Open web.powerapps.com and go to the Apps (from the left navigation).
• Select the Powerapps app that you want to embed on the SharePoint Modern Page.
• Click on More Commands (…) option and click on Details as shown in the below screenshot:

• When you will click on the Details option, then you can get your App ID as shown below.

• Copy this App ID and paste it in one Notepad (Because this ID requires at the time of Embedding).

2. By using the PowerApps File tab:

• Similarly, you can get your PowerApps App ID by using the PowerApps File Tab.
• From the Powerapps app, Open the File menu -> Click on Share -> Go to the Details tab -> Get your App ID as shown in the below screenshot.

Create a SharePoint Modern Page:

• Go to your SharePoint Site and create a SharePoint Modern Site Page (Site contents -> Site Pages -> +New -> Site Page)
• Also, it is not necessary to create a new Site Page every time in your SharePoint Site. You can Embed the Powerapps app by using the existing Site Page also.

Add an Embed Web part and apply the iframe code:

• Open the SharePoint Modern Site Page and add an Embed Web Part.
• Edit the Embed web part and apply the below iframe code inside the Website address or embed code (with your App ID) 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>

• You can resize your width and height properties as per your need. Instead of “980” and “600”, you can set both the value as “98%”. That means you can not see any grey background area around your app.
• hideNavBar: It specifies whether the Powerapps header is visible or not by using a Boolean value.
• screenColor: While the app is loading, it controls the loading screen color.
• YourAppID: Copy and paste the App ID from your notepad.

Refer the below screenshot:

Publish the SharePoint Modern Page:

When you will provide the iframe Embed code, then the Powerapps app will display on the SharePoint Modern Page. Just Publish the page and then you can ready to use the app.

In the same way, you can embed the Powerapps Tablet Layout on the SharePoint Modern Page. See the below screenshot for your reference:

Read Power Apps Search Gallery

PowerApps Embed Error in SharePoint Modern Page: That link didn’t work

While I was passing the iframe code in the Embed Web part, it was showing an error on the SharePoint Modern Page as:

“That link didn’t work. Please check it and try again.”

In the Embed web part, I was passing this below iframe code (which was giving an error):

<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.Pow9ebee062-f17f-4cbe-876f-c67ccde6af8d]" />

You can see the below error screenshot:

That link didn’t work PowerApps

To resolve this Power Apps Embed issue, I have given the below iframe code in the Embed Web Part:

<iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&amp;screenColor=rgba%28165%2c55%2c1%29&amp;appId=/providers/Microsoft.PowerApps/apps/9ebee062-f17f-4cbe-876f-c67ccde6af8d"/>

The error was coming because only I was passing the Powerapps App ID with a “[ ]” which should not be.

While I was passing the App ID without a “[ ]“, then it was resolved and the Powerapps app was appearing on the SharePoint Modern Page. You can see the below screenshot:

Also, you may like these below PowerApps Tutorials:

• How to use date time picker in PowerApps
• How to use Power Apps Search Function
• The function Search has some invalid arguments in PowerApps
• How to use PowerApps notify function
• Create People Picker in Power Apps with Combo Box
• How to format number as currency in PowerApps
• Various PowerApps Validation Examples
• PowerApps toggle control + How to use with example
• Convert classic SharePoint site to modern communication site using PowerShell

In this Power Apps Tutorial, We discussed how to embed the PowerApps app on the SharePoint Modern Pages.

Also, we discussed how to fix error That link didn’t work. Please check it and try again that comes while embedding PowerApps in SharePoint Online modern page.