Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!
Hi,
I'm having this issue with hiding filter pane in embedded Power BI report in Power Apps Portal. Although I already hide the filter pane in PowerBI Desktop, it still shows up in embedded repot in Portal. Funny that this was working before until lately, and it is hidden as expected in Power BI Service.
I'm using liquid template to embed the report to the portal following this guide:
https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/add-powerbi-report
Is it possible that new updates change this bevior?
Please help.
Solved! Go to Solution.
I've fixed the issue using PowerBi Javascript. Please read more about it here:
But I think this is still an issue for Microsoft.
Let me know if you can sort it out.
Cheers!
I am running into this issue when embedding Power-BI visuals in Power Pages.
The Power Pages editor does not have options to turn off the filter and navigation page:
Please fix this Microsoft...
As a workaround, I tried the proposed JavaScript solution as posted here. That solution worked most of the time, but sometimes it would throw a `You attempted to get an instance of powerbi component associated with element` error (often in Firefox). I think it must be a timing issue, where the power-bi instance is not yet there when the script runs.
Therefore, I went a different route, using a mutation observer: I wrote a script that appends '&navContentPaneEnabled=false&filterPaneEnabled=false&actionBarEnabled=false' to dynamically added iframes in the page (which is what Power Pages does when embedding power-bi visuals).
Here is the script, which I added to the footer of my Power Pages site:
<script type="text/javascript">
/***************************************************************************
* Hide filter and page navigation pane for EVERY embedded power-bi report *
* *************************************************************************/
const pbiObserver = new MutationObserver((mutationsList, observer) => {
mutationsList.forEach((mutation) => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
if (node.nodeName.toLowerCase() === 'iframe' && node.src.indexOf('powerbi.com') !== -1) {
node.src += '&navContentPaneEnabled=false&filterPaneEnabled=false&actionBarEnabled=false';
}
});
}
});
});
pbiObserver.observe(document.body, { childList: true, subtree: true });
</script>
Are there any updates from microsoft on this? At the moment we cannot stand the workaround proposed and we'd like to have it in a similar fashion of the power bi service one. Thanks
I've fixed the issue using PowerBi Javascript. Please read more about it here:
But I think this is still an issue for Microsoft.
Let me know if you can sort it out.
Cheers!
Thanks for the solution.
It was working last week and we were about to demo the embeding capabilities today. And surprise! the Filter pan appeared.
We have also tried the following and it works:
<div ... powerbi-settings-filter-pane-enabled="false"></div>
We got this from here: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details
Thanks again.
Thanks, @SamiAssi. Glad that it is working out for you!
Hi @sean_tm , I think Javascript is our best solution for this issue at this stage while MS is working on it. You can use Javascript to either update embedded report settings like I did or add settings attributes to report containter div element like @SamiAssi did.
I can show you if you want, just leave me a message in my inbox or in my Linkedin.
Cheers!
Hi @Syndicate_Admin - how exactly did you implement the fix, I have read the links and the suggestions of:
powerbi-settings-filter-pane-enabled="false"
powerbi-settings-nav-content-pane-enabled="false"
But don't know how to incorporate these into an embedded report?
I'm no HTML expert - how could it be accommodated in this - and if you know how to increase the height also that would be greatly appreciated!
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12" powerbi-settings-filter-pane-enabled="false" powerbi-settings-nav-content-pane-enabled="false">
{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/XXXXX/reports/XXXXX/ReportSectionXXXXX" %}
</div>
</div>
</div>
Hi @Oex ,
Basically, you will need to update the embedded report settings using Javascript in the portal web page custom script. Please see my blog post for more details: https://dyncrmexp.com/2020/06/05/hiding-power-bi-report-filter-pane-from-report-viewers-in-power-app...
Thanks @nhnkhoa - it would be really useful in here or your blog to add screenshots of where/how to implement the code in a 'web page custom script' - whilst I am familiar with Embedding and the JavaScript Playground, I'm new to portals - so a how to would be very useful!
My guess would be to add a template something like this, but renders no report in the page
<!-- Default Power BI Embedded template -->
<script>
$( document ).ready(function() {
var rpEle = $('.portal-pbi-embedded'); // select report element
var report = powerbi.get(rpEle[0]); // get report instance
// we want to update settings when the report is loaded
report.on("loaded", function () {
const newSettings = {
panes: {
filters :{
visible: false
},
pageNavigation:{
visible: false
}
}
};
report.updateSettings(newSettings)
.catch(error => { console.log(error) });
});
});
</script>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
{% include 'Page Copy' %}
</div>
</div>
</div>
Hi @Oex ,
After you setup the report to show up in the page, please follow below steps:
1. Login to the portal as an admin or content editor.
2. Navigate to your web page containing the report.
3. From top right corner of the portal, in the editor toolbar, click Edit to open Web Page Editor
4. In Web Page Editor, Open Options tab and put the code snippet in the Custom JavaScript box.
5. Save changes
Hello @nhnkhoa,
This is not working for me. Do you need to add (or change) sometihing else to the code?
Thanks,
Absolute lifesaver, very much appreciated!
Thanks @nhnkhoa ,
Forgive my ignorance, but our internal skill set is admittedly not development heavy. Are you able to use these JavaScript calls with the Liquid Tag embedding?
My understanding from last looking into it was using the Power BI JavaScript API required a significantly different setup method than the out of the box integration. We would like to keep maintenance simple. Would be nice to get rid of that Report Tab Bar though.
Thanks for raising the support ticket @paulmacf , let us know how it goes. I think I should do the same at this point.
Hi @nhnkhoa
Thank you for the information and glad that has worked for you. Certainly worth us exploring this.
We have a ticket with MS support and waiting for that before going down any other route. Will post any updates.
Thanks
Getting this as well. Filter pane is now visible where it wasn't previously. This has allowed our customers to expose data that should not be visible and thus we have had to remove the report entirely for now.
That's too bad 🙁 We're about to Go Live in our case and this is definitely a show stopper.
Same issue just started for us. Hiding the Power BI Filter Pane worked for months with no problem in our Power Apps Portal.
As a temporary fix, saving the report with the Filter Pane in a colapsed state and changing the text and borders to white (to match the background) will hide the Filter Pane from the end user.
However, this is not ideal. You can still expand the Filter Pane if you find the right spot to click. It also makes editing report filters more cumbersome.
We would also appreciate a fix for this issue.