Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
MattCalderwood
Responsive Resident
Responsive Resident

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

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
MattCalderwood
Responsive Resident
Responsive Resident

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.

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.

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.