Skip to main content
InSource Solutions

TN - 1200 How to embed a Power BI report inside an iframe in j5

  1. Last updated
  2. Save as PDF

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 

clipboard_ebd4dbbf02069fb7bdff2343ffde5b8f3.png

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

clipboard_e5faf050bba16aaa87fbb30710c514389.png

  • module.yml:

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

clipboard_e9c0493ff5b505a60d4dd4d22e7b00c96.png

  • module-roles.csv:

clipboard_e268cf5ffefe2b4064e2f35df1058b777.png

  • PortalPage.py:

clipboard_ed1d61d71a8262916e98ff99ca505c6c8.png

  • PortalPages.css:

clipboard_ef6ba7175dbdaa94be0a6f3de87b25ba2.png

  • portalpage.js
  • PortalPage.genshi.html

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

clipboard_e5393748e9ffff33d0363d0e23d3ed730.png

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

clipboard_e74752d1aca18478f49986e5752036082.png

clipboard_e7856211d2e78452a1679c0eae628e254.png

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. 
 clipboard_e22dd20765f23ada83ff07219f656de78.png

 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  

clipboard_e5ea54b070e0ffae20afecb9b668c6e31.png