cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
paulsnolan
Helper IV
Helper IV

How to remove the border of an embedded power bi report

Hi All

 

We have a portal page that contains an embedded power bi report (using the power bi component). When the report is displayed there is a border on the left and top of the report. How can this be removed?

 

I've looked at this further. In the browser using the developer tool (f12) I can see the iframe which contains the report. I can edit the iframe tag and manipulate the border. So I've tried using javascript (in the advanced section of the page in portal management) to do the same but no joy. I'm using getElementsByTagName but it doesn't see the iframe. Is this to do with how the page is being built, is there an event that needs to fire before I can access the iframe element?

 

Thanks

4 REPLIES 4
ragavanrajan
Super User
Super User

Hi @paulsnolan 

 

  There is a recent article from @OOlashyn to customize Power BI embedded frame. Link for your reference 

 

https://www.dancingwithcrm.com/customizing-embedded-powerbi-in-powerapps-portal/ 

 

This should solve your problem. If you have no joy please let us know. 

 

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

paulsnolan
Helper IV
Helper IV

Hi ragavanrajan

 

Thanks for the reply. That worked, almost. I've got working code and I've placed it in the Custom Javascript section of the Advanced tab of the Web Page which has the power bi-component. I say it almost works because sometimes it works and sometimes it doesn't. I've put alerts in the code and some at the start and end of the code. From this, I can see when the Custome Javascript is being executed. When the code doesn't work it is when the Custom Javascript isn't being executed like there is some caching of the page somewhere. From my alerts, I can see when the events are being fired and that is when the code works i.e. it is executed. Any ideas?

 

Bit more information. I’m styling the Iframe. Is there another way using report.updateSettings?

Hi ragavanrajan

 

This is my Custom Javascript code.

 

alert("In Advanced> Custom Javascript");

 

$(window).load(function() {

    // get div container for powerbi report

    var embedContainer = $(".powerbi")[0];

 

    // get reference to the embedded report

    var report = powerbi.get(embedContainer);

 

    // register a function to execute when report will finish loading

    report.on("loaded", function(){

        // update existing setting of the reports

        // you can disable only one page or both at the same time

        report.updateSettings({

            panes: {

                filters :{

                    visible: false

                },

            }

        }).catch(function (errors) {

            console.log(errors);

        });

 

        styleIframe()

 

    })

});

 

function styleIframe() {

 

  var embedContainer = $(".powerbi")[0];

  var report = powerbi.get(embedContainer);

 

  /*alert("Report loading ...");*/

 

  report.on("rendered", function() {

   

    /*alert("Report loaded so try and manipulate the embedded report");*/

 

    var iframeElements = document.getElementsByTagName("iframe");

    iframeElements[0].style.borderColor = "#f4f4f5";

    iframeElements[0].style.borderStyle = "solid";

    iframeElements[0].style.borderRadius = "10px";

    iframeElements[0].style.borderWidth = "10px";

 

  });

}

 

Hi @paulsnolan , 

 

        Apologize for the delay in response. I completely missed it.  If you are after only changing the iFrame border. then below is the solution. 

 

In portal studio: 

 

1. Themes > Upload "Custom.css" file 

2. And paste in the below css 

 

iframe {
    border-width: 10px !important;
    border-style: inset !important;
    border-color: #f4f4f5 !important;
    border-image: initial;
}

3. Press the sync configuration and browse the website. 

 

Note: !Important is a must.  

Note 1: Change the CSS according to your need. 

 

Output: 

 

ragavanrajan_0-1620185466806.png


Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (3,295)