Customizing PowerBI report in Power Apps Portal
Embedding PowerBI reports into the dashboard is a powerful feature. It allows sharing stunning PowerBI visuals without the hustle and complex configuration. However, there still commons issues like how to style report on the portal, etc. Below you will find answers on some common problems and issues that I faced. I will not go into details on how to configure Power BI visualization and how to embed report to the page - you can find answers for those questions here in the official documentation.
Height and width of Power BI report
One of the most common questions is how to change the default height and width of the Power BI report. If we inspect the page we can find that report is embedded in the div element with class powerbi. This CSS class looks like this:
As you can see it restricts the height of the element to 600 px by default. So to make our report taller in the template of the page (or in CSS settings) we need to write next line:
You can also add !important modifier to make sure that this class will not be overwritten. Similarly, you can change the width of the report.
When you enable support for powerbi MS also includes the powerbi-client library to the page that allows you to update report settings and handle events. Below we will take a look at a couple of interesting usage scenarios. You can find more about this library in the official documentation here.
Be aware that portals ships with powerbi-client version 2.6.5 - which is a pretty dated version. So while reading docs always check starting from which version they added support for the feature you are interested in.
Removing filters and navigation
Default navigation in report and filtering are both really nice features. However sometimes, especially when the report contains only one page and doesn’t have anything to filter those features just take up space on the screen. Using power-client we can update report settings to disable/enable those features. Check below code for details
In this example, I am using window.load instead of more frequent document.ready (that can be found in the official documentation here). This is because sometimes powerbi report wouldn't load when document ready event would be fired, thus making code unusable. Using window.load ensures that the page is fully loaded first.
With filter and navigation panes:
Without filter and navigation panes:
Next scenario that we will cover is opening your report fullscreen. This is particularly useful for big reports with a lot of visuals or in general to have a better overview of data.
Sometimes we need to print generated report and we don’t want to print the whole page with it. powerbi-client library got us covered
Print report dialog:
In our mobile-first ability to view everything in mobile is crucial. Unfortunately, if you will just embed standard report and try to show it on a mobile device it will look bad. That’s because the system will just try to shrink it. To solve this issue you need to create a mobile layout for your report ( see here for more details ) and then using library change layout of report to mobile (if applicable).
Data selected event
Sometimes we need to handle events in a specific way - show notification when the data was selected etc. Luckily we can register custom event listeners on data selected event and perform our custom logic.
Show alert on data click:
PowerBI embedding is a powerful feature of Power Apps Portal that allows easily configure and share complex and beautiful visuals. powerbi-client library allows us to perform more complicated configuration of the reports to fit our needs. I hope that MS will soon update the version of the library used in the portal which will allow us to have even more control over the embedded report.