PowerApps App On SharePoint Modern Page With Query String Param

In this blog, we will see how to pass parameters to a PowerApps app which is added on the SharePoint modern page.

Scenario

 

You have one PowerApps app and you want to add this app on 10 different SharePoint department sites, with different query string parameter values, as your app is going to show different data depending on the site it has been added.

 

Problem

 

Sometimes you need to pass dynamic metadata to your PowerApps to show the dynamic data from your data source. You can use the Param function to read the query string parameter value in the PowerApps app. This works well when you are directly accessing the app from the browser with URL something like below.

https://web.powerapps.com/webplayer/app?appId=/Providers/Microsoft.PowerApps/apps/<appid>

 

But what if you want to add PowerApps app on SharePoint modern page and still want to access the query string parameter? This doesn’t work with the out of box PowerApps web part.

 

Solution

 

We need to use Embed web part with iframe tag in a specific way to achieve the above requirement. If you generate iframe tag with PowerApps app URL and add it in Embed web part on a page, then the PowerApps app will appear with the top suite bar as well – which doesn’t look good when it's integrated inside a page.

 

So, you need to generate the iframe tag as shown below. Replace the APPID with your PowerApps id,

<iframe width="1024px" height="580px" src="https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&YourParameterName=ParameterValue&appId=/providers/Microsoft.PowerApps/apps/APPID"></iframe>

 

You need to adjust the width and height to ensure there is no grey background area around your app. Compare the screen above and the screen below with different height. The greyed part is removed below. Similarly, adjust the height width at your end

 

 

How to Get the PowerApps App ID?

 

Login to PowerApps service - https://web.powerapps.com

 

Click on Apps >> Select the App and click on More options icon (three dots/ellipsis) >> Click on Details.

 

 

You will find details about your app and app id as shown below. Copy this App ID and use it in Iframe tag above.

 

 

That’s it for this blog. Hope this helps.