[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.

3 comments

  1. Thank you for sharing this. Could you please let me know how we can embed a report in a particular form (in Power apps)?

    1. Hi Mary,
      Adding reports to a form is a bit more tricky as it typically requires filtering as well e.g. showing only the specific entity ID from the report data model. Adding the BI report to the Form however is sort of the same approach, simply add a webpage on the form when in “classic mode”. Ping me at pk@projectum.com for further assistance.

      /Peter

Leave a Reply