[GUIDE] EMBEDDING POWER BI IN MODEL DRIVEN APPS

From having deployed several Model-Driven Power Apps, one thing that seems to always impress users is the ability to embed secure Power BI Reports. There are several ways to show reports in a Power App, but in my opinion, embedding a full secure Power BI report, is the most professional and useful of them all. As a bonus, it can be deployed together with your solution/app.

Follow the steps in this guide to learn how to embed your Power BI Reports into your Power App.

Step 1: Prepare your Power App (Model-Driven)
Most likely you already have a Power App and an environment to play within. If not, that is where you should start and in my case I have prepared a blank model-driven app, where I want to later embed my Power BI report in.

Step 2: Navigate to your report
Go to PowerBI.com and find your report. Click on the … and then “embed->website or portal”

Step 3: Copy the report URL and ID
Click on the html content starting with <iframe…. and copy it for your clipboard

Step 4: Prepare your iframe code
Use the below example code and simply change the yellow parts to your URL from Power BI. I have changed the pixel sizing to percentages for a responsive web experience

Step 5: Create a web resource
Once you have the code in place, navigate to “Solutions” in your environment and click on “New->Other->Web resource”

Step 6: Add the iframe code
Give your web resource (report) a name you can remember, select “type=Webpage” and hit the “Text Editor” button

Step 7: Adding the code
Click on source and paste the iframe code with the changes

Step 8: Validate your iframe works
Click on “Rich Text” to get a preview of your iframe content. It should load the report inside the window, and when it does, you know you are good to go

Step 9: Publish your web resource
Every time you do changes to your solutions in an environment, always remember to publish the customization(s) afterwards

Step 10: Edit your Power App
Go to “Apps” and edit your Power App

Step 11: Configure the App Site Map
Click on the edit button next to site map. This is where we can add content to the menu-bar/launcher in our app

Step 12: Configure your navigation pane
Add the web resource to your site map and find the URL by simply searching for the name you gave the web resource during step 6

Step 13: Try and enjoy
Once done with all the steps, simply save and publish your model-driven app and launch it. You should now find a new link in your sidebar and be able to open up the report. If not logged on to PowerBI.com it will always prompt users for a login and password = its secure!

I hope you enjoyed this guide and approach to wrapping/embedding your Power BI reports into model-driven Power Apps.