We need a better layout for Power BI in WordPress. If you’ve tried to publish Power BI to blogs you know what I’m talking about. After extensive research, trial and error I found a way. Then, I just had to make a video explaining how I did it.
Introduction
We need a better layout for Power BI in WordPress. If we use the iFrame code provided by Microsoft we end up with layout that doesn’t look good in either a browser or on a phone. iFrame doesn’t support a mobile view so we’re stuck displaying the 16:9 browser view in a 9:16 mobile screen (which is terrible). Instead of displaying our reports to their best effect we’re stuck making some ugly compromises between mobile and browser views.
I have experimented with custom canvas sizes that can compromise between a browser and a mobile. I recommend a 900 x 900 pixel custom canvas if you intend to display a report in a blog post within an iFrame. The size is sufficient you can rearrange your 16:9 canvas without losing information in your views and the shape will reduce into a mobile view without too much grey area inside the iFrame.
But, I have a much better solution than a custom canvas size for your Power BI report. I recommend using an enhanced Power BI embed code instead of iFrame. So, where you can get this enhanced code?
Lukasz Pawlowski’s website ‘Optimize Your Power BI Embed Code’
The first part of the solution is found at Optimize Your Power BI Embed Code (lukaszpawlowski-ms.github.io). You can enter your report url on this site and it will create alternate html and JavaScript that will improve the way your report will display. The code does a good job of ridding your layout of the grey, wasted space inside the iFrame. The report view size will be optimized within the available space. You can add a loading screen to your report. Most important, there is a workaround so that you can switch between a browser and mobile view of your report for users!
Use ‘Simple Custom CSS and JS’ Plug-in to add your Javascript to WordPress
I recommend using the ‘Simple Custom CSS and JS’ plug-in to add the JavaScript to your website, versus pasting the JavaScript directly in your Header.php. The JavaScript will not work in the HTML block inside the Post Editor. Once you have the script published and activated, it will work for all HTML code generated off Lukasz’s website. You will simply add the new html to an HTML block inside your blog posts and pages…wherever you want a report to display.
You can check out my Seattle Housing Price Predictor if you’re curious what the enhanced code can do.,
Watch the video
I would go into greater detail how to use Optimize Your Power BI Embed Code (lukaszpawlowski-ms.github.io) and ‘Simple Custom CSS and JS’ plug-in to create tight, visually appealing layouts for your Power bi reports in WordPress. I would have diagrams, pictures and a detailed explaination.
Instead, I made a video over the weekend to explain everything to you. Talk about a personal journey! Growth through Pain. You’ll practically track my learning curve from the first four minutes to the last four minutes. If the special effects in each section header looks sophomoric- that’s the learning curve. If you think the special effects are awesome- I KNOW, right?
Conclusion
Please, watch my video above and I’ll try to demonstrate everything you need to know. If you have any further questions feel free to contact me.