Power BI Custom Visuals Will be Sandboxed using IFrames

Microsoft released the ability to create custom visuals for Power BI a few months ago.  These custom visuals allow developers to build new visualization widgets for both private organization specific use or public use via the custom visuals gallery.  In the gallery today, there are more than forty different visuals that you can add to your Power BI dashboard.

image        image

In the current model, the custom visuals reside in the same code space as the main Power BI service which can lead to some interesting conflicts and errors when multiple organizations are providing their own JavaScript and CSS.  As Microsoft moves out of preview, they have now stated that custom visuals will be “sandboxed” which means that each codebase will execute in its own IFrame.  This will prevent collision of code coming from multiple developers and contain any bugs or errors in the visual.

Sandboxing runs your visual’s code in a low privilege iFrame with no domain. You will not be able to assume access to Power BI styles (CSS), Power BI fonts, or undocumented Power BI APIs. We will inject all the required interfaces into the iFrame, including your visual’s code, and then marshal data points and required settings across the iFrame boundary. Since the iFrame has no domain, you will not have access to cookies or local storage. Finally, how you debug your custom visual will change a little, which I’ll cover below.

Having worked with SharePoint add-ins and app-parts for years, which also use an IFrame container to render the widget, one of the key challenges with this approach will be ensuring the overall layout is fluid and responsive and works successfully on a mobile device.  This is a fundamental challenge with having all these IFrames on the page – each one has to be resized dynamically when the page layout changes.