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

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 III
Helper III

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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (3,252)