TN 1200 How to Embed a Power BI Report Inside an iframe in j5

Description

This article from InSource shows how to embed a Power BI report inside an iframe in j5

• Author: Ron Tanner
• Published: 12/14/2021
• Applies to: j5

Details

Steps:

1. Set up custom page in j5 IDE 
   

Edit the following files based on your custom page requirements:

• pages.yml:

Please Note: 

- Replace 'type' with the path to your custom class in the PortalPage.py

- Change the 'title' from Overview Page to something relevant to your implementation. Only if desired,

- Change the 'title' under CustomPages > Portal to something relevant to your implementation. Only if desired

• module.yml:

NOTE: replace 'issdemo' in menu > identifier with the name of your j5 site

• module-roles.csv:

• PortalPage.py:

• PortalPages.css:

• portalpage.js
• PortalPage.genshi.html

2. Publish PBI report from PBI Desktop to PBI Service workspace 

3. Get iframe html from PBI Service for the relevant report

4. Copy and paste the iframe into the custom page’s genshi.html template i.e. PortalPage.genshi.html (if the report URL is going to be static)

You will need to escape the relevant characters for html e.g. replace ‘&’ with ‘&’. Change width and height of the iframe to 100%.

5. Improve the layout of the iframe 

To improve layout with padding etc., you can place the iframe in a ContentPane with styling. Or define a class for the iframe in the custom page .css, with the desired layout characteristics. e.g. 

6. The user will need to sign in to the PBI report upon navigation to the custom page. For this they will need access to the PBI Service workspace