cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Resolver II
Resolver II

Reusing IFrame for multiple reports results in incorrect layout

Hi All,

I am making improvements to an app that uses embedded reports.
Part of this is resuing the embedding iframe to improve load times - as mentioned here: https://docs.microsoft.com/en-us/power-bi/developer/embedded/embedded-performance-best-practices#swi...

This initially looks like it will work great... then I hit a number of inconsistencies.
This also looks like it might be related to another question I have open regarding the 'report.getPages' function. (here)

Reports with different width/height dimensions render incorrectly.

It looks as though the iframe sticks with the size of the first report rendered - and resetting it - or rendering a different report makes no difference to the report size.

Anyone have any ideas how to resolve this?
I would really like to continue to reuse the iframe for multiple reports as the performance boost is massive, but it is looking increasingly like it is a non-starter.

Thanks,
Matt

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Resolver II
Resolver II

Re: Reusing IFrame for multiple reports results in incorrect layout

Ok, it has taken a while to resolve this one, but massive kudo's to the Power BI Support team for solving it.
I will try and explain things as best as I can - in the hope that this helps someone else in the future.

Issue Recap:
Reusing the embedding IFrame for multiple reports results in inconsistent rendering/layouts if the reports have different page sizes.

Issue Reason:
Part of the performance benefit of reusing the IFrame is that you don't throw away a lot of the inner HTML. Rendering multiple reports is much faster, but the frame content is FIXED to the size/dimensions of the report that was first rendered.

The Fix:
There are a small number of steps to implementing a fix for this.

 

1) Ensure that the div/element hosting the Power BI IFrame - is styled to the desired height + width

2) Set all reports (+ report pages) at 'design time' to use a page view of 'Fit to Width' - this is set in Power BI Desktop (see below).
3) In the embedding code -> When setting the embedded configuration object, add a custom layout

4) Set the display option to 'Actual Size'

5) Set a custom pageSize -> choosing a width + height of '100%'

Important Note: The custom page size does accept a percentage value and isn't fixed to a number (pixels).
This works even if you are using TypeScript definitions like I am, as is not clear from the documentation or published examples.
This was the deal-breaker!

You should end up with code like this:

const layoutSettings = {
      displayOption: models.DisplayOption.ActualSize,
      pageSize: {
        type: models.PageSizeType.Custom,
        width: "100%",
        height: "100%",
      }
} as models.ICustomLayout;

 
...And the Power BI Desktop page size setting (from step 2 above)
pbi_desktop_page_view.PNG

You are then in full control over the report dimensions - and you can handle viewports that are larger/smaller than your original report dimensions - and size things as required. The control is within your own applications - and you do not need to keep passing in new report dimensions to the embedding code when things change.

 

 

I had linked another post to this ticket previously: https://community.powerbi.com/t5/Developer/Report-getPages-returns-incorrect-report-page-dimensions-...

Calling 'getPages' will not return the correct report dimensions when reusing IFrames!

 

In my case, I am happy with the workaround of needing to know (up-front) what the report dimensions are.. and setting them myself in the container that hosts the embedded report.

View solution in original post

2 REPLIES 2
Highlighted
Resolver II
Resolver II

Re: Reusing IFrame for multiple reports results in incorrect layout

I have been able to escalate this with the awesome Power BI support team, and demonstrated the behaviour around this issue (and the similar issue of the report.getPages function).

It is now with them to confirm that this is a genuine bug (looks like it is) and recreate the issue at their end.

I will follow up with any progress as it happens.

Highlighted
Resolver II
Resolver II

Re: Reusing IFrame for multiple reports results in incorrect layout

Ok, it has taken a while to resolve this one, but massive kudo's to the Power BI Support team for solving it.
I will try and explain things as best as I can - in the hope that this helps someone else in the future.

Issue Recap:
Reusing the embedding IFrame for multiple reports results in inconsistent rendering/layouts if the reports have different page sizes.

Issue Reason:
Part of the performance benefit of reusing the IFrame is that you don't throw away a lot of the inner HTML. Rendering multiple reports is much faster, but the frame content is FIXED to the size/dimensions of the report that was first rendered.

The Fix:
There are a small number of steps to implementing a fix for this.

 

1) Ensure that the div/element hosting the Power BI IFrame - is styled to the desired height + width

2) Set all reports (+ report pages) at 'design time' to use a page view of 'Fit to Width' - this is set in Power BI Desktop (see below).
3) In the embedding code -> When setting the embedded configuration object, add a custom layout

4) Set the display option to 'Actual Size'

5) Set a custom pageSize -> choosing a width + height of '100%'

Important Note: The custom page size does accept a percentage value and isn't fixed to a number (pixels).
This works even if you are using TypeScript definitions like I am, as is not clear from the documentation or published examples.
This was the deal-breaker!

You should end up with code like this:

const layoutSettings = {
      displayOption: models.DisplayOption.ActualSize,
      pageSize: {
        type: models.PageSizeType.Custom,
        width: "100%",
        height: "100%",
      }
} as models.ICustomLayout;

 
...And the Power BI Desktop page size setting (from step 2 above)
pbi_desktop_page_view.PNG

You are then in full control over the report dimensions - and you can handle viewports that are larger/smaller than your original report dimensions - and size things as required. The control is within your own applications - and you do not need to keep passing in new report dimensions to the embedding code when things change.

 

 

I had linked another post to this ticket previously: https://community.powerbi.com/t5/Developer/Report-getPages-returns-incorrect-report-page-dimensions-...

Calling 'getPages' will not return the correct report dimensions when reusing IFrames!

 

In my case, I am happy with the workaround of needing to know (up-front) what the report dimensions are.. and setting them myself in the container that hosts the embedded report.

View solution in original post

Helpful resources

Announcements
May 2020 Community Highlights

May 2020 Community Highlights

It’s time for another PBI Community recap!

Community Blog

Community Blog

Visit our Community Blog for articles, guides, and information created by fellow community members.

Using the Community

Using the Community

Need help with the Power BI Community? Our 'Using the Community' support articles are a great place to start.

Galleries

Galleries

Looking for inspiration on how to present your data? Need instructional videos? Check out our Galleries!

Top Solution Authors