How to Embed Power Apps in SharePoint?

Have you ever embedded Power Apps in a website? Yes, now it’s possible in SharePoint as well.

This Power Apps tutorial explains what it means to embed PowerApps in SharePoint, its advantages, and how to embed Power Apps in SharePoint modern page using the PowerApps Web part.

Also, we will see how we can embed Power Apps in SharePoint using the Embed web part with some examples.

Embed PowerApps in SharePoint

“Embedding Power Apps in SharePoint” refers to immediately embedding a Power Apps application into a SharePoint page. This integration enables users to engage with the Power App without leaving the SharePoint environment, resulting in a more seamless user experience.

This is all about embedding Power Apps in SharePoint.

Advantages of Embedding Power Apps in SharePoint

The table below represents all the advantages of embedding Power Apps in SharePoint:

Advantages	Description
Streamlined Workflows	Embedding Power Apps in SharePoint centralizes various workflows, allowing users to access and interact with different applications within a single platform. This integration reduces the need for switching between apps, thereby enhancing efficiency.
Improved User Experience	Users benefit from a seamless experience as they don’t have to navigate away from SharePoint to use the embedded Power Apps. This convenience improves user engagement and satisfaction.
Customization	Power Apps allows for creating tailored applications that meet specific business needs. When these custom apps are embedded in SharePoint, they enhance the site’s functionality and relevance to users.
Enhanced Data Integration	Embedding Power Apps in SharePoint allows for better integration with SharePoint data, making it easier to display, modify, and work with data stored on SharePoint sites.

Let’s discuss how we can embed the Power Apps app in SharePoint.

How to Embed Power Apps in SharePoint

We can embed Power Apps in SharePoint using two web parts. Such as:

• Using SharePoint Microsoft PowerApps (Preview) Web part
• Using SharePoint Embed Web part

Embed Power Apps in SharePoint [Using PowerApps Web Part]

Below are the steps to embed the Power Apps app in the SharePoint Modern page:

1. Save and Publish the Power Apps app.
2. Get the specific Power Apps App ID.
3. Create a new SharePoint Modern Page or open an existing SharePoint Modern Page.
4. Add a Microsoft PowerApps Web part.
5. Apply the App ID.
6. Publish the SharePoint Modern Page.

Let’s do it step by step:

1. Once the Power Apps application is ready, save and publish the app.

2. To get the App ID, go to Apps -> Select the specific app -> Click on vertical ellipses -> Select Details -> Click Details as shown below.

Copy the complete ID under the App ID field from the App Details page. And paste it in a notepad.

3. Go to your SharePoint Site and create a SharePoint modern site page (Site contents -> Site Pages -> +New -> Site Page). Also, creating a new Site Page every time on your SharePoint Site is unnecessary. You can Embed the Power Apps app by using the existing Site Page.

4. Choose a section in the SharePoint modern page and hover any section you want to add to the PowerApps web part. Click on the Cross icon -> Search PowerApps -> Select Microsoft PowerApps (Preview) as below.

5. Under the App web link or ID, paste the App ID you copied. Also, you can toggle on the Show border field.

6. After a while, the particular Power Apps application will be visible on the SharePoint modern page, as shown below. Finally, Publish or Republish the SharePoint modern page to view the application to everyone.

Once the page is published, the app will be displayed as shown below.

This way, we can embed Power Apps in the SharePoint modern page using the PowerApps web part.

Embed Power Apps in SharePoint [Using Embed Web Part]

Below are the steps to embed the Power Apps in the SharePoint Modern page:

1. Save and Publish the Power Apps app.
2. Get the specific Power Apps App ID.
3. Create a new SharePoint Modern Page or open an existing SharePoint Modern Page.
4. Add an Embed web part.
5. Apply the iframe code.
6. Publish the SharePoint Modern Page.

You can follow the steps above from Step 1 to Step 3.

4. Hover over any section of the SharePoint modern page that you want to add to the Embed web part. Click on the Cross icon -> Search Embed -> Select Embed web part as below.

Once you add the embed web part, it will look like the below image. This web part allows the user to provide the iframe code.

5. 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 helps to hide the top purple navigation bar from the Power Apps app.
• screenColor: While the app is loading, it controls the loading screen color.
• YourAppID: Copy and paste the App ID from your notepad.

6. When you enter the iframe Embed code, the Power Apps app appears on the SharePoint Modern Page. Publish the page, and you are ready to utilize the app.

This way, we can embed Power Apps in SharePoint using the Embed web part.

Conclusion

I hope this Power Apps tutorial teaches you about PowerApps and SharePoint, its advantages, and how to embed PowerApps in SharePoint using the Power Apps web part.

Also, we discussed how to embed Power Apps in the SharePoint modern page using Embed web part with various scenarios.

Moreover, you may like some more Power Apps tutorials:

• How to Submit Form to SharePoint List in Power Apps
• Customize SharePoint List Forms with Power Apps
• How to remove Power Apps form from SharePoint list