topic Re: Reusing IFrame for multiple reports results in incorrect layout in Developer

Reusing IFrame for multiple reports results in incorrect layout

Anonymous — Thu, 16 Apr 2020 14:19:02 GMT

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#switching-between-reports

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

Re: Reusing IFrame for multiple reports results in incorrect layout

Anonymous — Wed, 22 Apr 2020 08:14:18 GMT

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.

Re: Reusing IFrame for multiple reports results in incorrect layout

Anonymous — Mon, 29 Jun 2020 16:44:09 GMT

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)

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-if/m-p/1041224#M23249

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.