Embed PowerApps in Power BI dashboards or your website

We think that PowerApps are most useful for our and your users when they can use the apps within the context of their work. To further along this vision, with the latest release, it is now possible to embed an app built with PowerApps within an iframe. In this blog post, I am going to talk how to embed an app in your Power BI dashboard but with the ability to embed within your websites, the possibilities are endless. 

• Embed apps in Power BI dashboard

In line with our vision of "Measure, Act & Automate", we think sometimes the best place to act is in context of the data you are measuring and the reports you are monitoring.

For today's example, I have created a Power BI dashboard where I am monitoring the sales of products for my company or my store. I want to be able to respond to the trends and order new hardware inventory within the context of the dashboard, so that I took the app we use for ordering new hardware, which is built using PoweApps and embedded it in the dashboard. Here is a screenshot of an app running in a Power BI dashboard:

To achieve this, we use the Add web content capability of Power BI dashboards and add the app as an iframe content. The iframe code I am using above is like following. Please refer to the end of this post where I talk about how to generate the src Uri for your app.

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

Note: Use the width & height to 98% options to avoid having scroll bars on your tile.

• Embed apps in your website

As we saw for Power BI, you can embed an PowerApps app in your websites as well using iframe code.

• If your website uses AAD based authentication, your users will be able to use the app seamlessly as with Power BI.
• If your website is using any other login mechanism or is not authenticated, your users will see a sign-in prompt on the iframe and once they sign-in, they will be able to run the app.

How to generate the embeddable Uri for your app

The simplest embed Uri for your app can be generated by substituting the [AppID] with your app id in the following Uri:

https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

To get your app's id, go to the app details page on powerapps.com and the app id will be listed as a GUID on the app's details page.

Let's look at the all the parameters available on the Uri:

• appID - It is of the format '/providers/Microsoft.PowerApps/apps/[AppID]' and provide the app id to run.
• hideNavBar - It is a Boolean which controls whether the PowerApps/Dynamics 365 header is visible or not. We think that you will not want this enabled for most embedding scenarios and should be set to false.
• screenColor - This can be used to provide a better loading experience for your users, it is of the format rgba(red value,green value, blue value, alpha) and controls the loading screen color while the app loads. It is best set to the same color as your app's icon color.
• source - This does not affect the app in any fashion, but help us get the right telemetry where the app is being used. I suggest putting a descriptive source to help us understand your usage and make better prioritization decisions.
• Lastly, you can add any custom parameters you want which can then be consumed by your app using the param function. These parameters are only read during launch of the app and if you are changing them, you will need to re-launch the app.

We want to hear your use cases and feedback

I would love to hear your use cases and feedback about embedding both here and on PowerApps community. This is just our first step for embedding of PowerApps and we will keep listening to your feedback to make it better.