topic Re: Custom Visuals Sandbox is coming - Here's what you need to know in Developer

Custom Visuals Sandbox is coming - Here's what you need to know

lukaszp — Fri, 26 Feb 2016 20:49:38 GMT

Custom visual authors and users - we'd like you help to find the last bugs in a new feature for custom visuals - sandboxing. We've seen a lot of great visuals be created by our community, and we've seen how some of those visual interact with each other, with our own UI elements, and with our APIs. This has led to some glitches for users and visual authors. So we're planning to add sandboxing. Sandboxing will be enabled in the service on or after March 22nd 2016.

Asks and Acitons for custom visuals users/developers

Test your visuals using the steps shown below
Review the list of Known Issues.
Reply to this post with issues you find so we can investigate them.

What is sandboxing for custom visuals

Sandboxing provides a layer of isolation for each custom visual by hosting it in a dedicated iFrame. Your code and dependencies are injected dynamically into the iFrame. It ensures you don’t have conflicts with other visuals/elements on your page and removes access to APIs that you shouldn’t be using in your custom visuals.

When will Sandboxing be enabled for custom visuals?

We expect it to enabled sandboxing on or around March 22nd 2016. We’ll adjust this based on your feedback and reported issues.

What is the impact on my custom 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. Then we will 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. Lastly, how you debug your custom visual will change a little, which I’ll cover below.

Here’s an example iFrame that your visual would be loaded into:

How can I test my visual in the Sandbox?

Starting now you can test your visuals, dashboards, and reports in the sandbox by adding the following flag to the URL in the address bar.

Follow these steps:

Sign-in to your Power BI account
Paste the following URL into your browser address bar

https://app.powerbi.com/?sandboxVisualsEnabled=1

Press enter to navigate to the URL above
You know the feature switch successfully applied if after the browser loads the flag is in the URL. For example:

https://app.powerbi.com/groups/me/dashboards/5f3627e4-a662-4111-a5ea-39ef2833fe24?sandboxVisualsEnabled=1

Please note that if you needed to sign-in in step #2, the feature switch will not be applied. You can click the URL again, or just paste ?sandboxVisualsEnabled=1 on the URL and refresh.

How do I debug in the sandbox?

To debug, the easiest way is to add the following line of code to your visual’s init method or wherever you’d like a breakpoint for the browser’s debugger.

debugger;

Then, when you’d like to debug your visual, launch the browser’s debugger, add your visual to the page and bind some data to it. The debugger will automatically break when init is called by Power BI allowing you to see your code. Without this, you may find it hard to identify where the code is located in the browser’s debugger since it is dynamically injected into the iFrame.

A note about unhandled exceptions

One thing that is important for you to add to your visuals is some hardening for unhandled exceptions. To keep the iframe and the host page in sync, we run synchronization code in the iFrame alongside your visual’s code. If your visual throws an unhandled exception, we attempt to catch it so our synchronization code keeps working. Even then, your code might not work in the resulting state. We’ve found that some custom visuals have unpredictable behaviors after they throw an unhandled exception. Unfortunately, since it’s your code we’re not able to fix those issues on our side. The most common symptom of this is the visual stops resizing correctly when the user resizes the visual in Power BI. If you see this happening, check if the custom visual is throwing exceptions and resolve those before submitting an issue.

Known issues

Here's a list of known bugs we're tracking:

1) Sometimes the visual does not resize in the iFrame. Usually this is due to an unhandled exception in the visual, but sometmies it's the framework. We're working on a fix. Your code should trap it's exceptions to avoid one of the major causes.

2) Fonts and CSS styles. Some visuals depend on Fonts and CSS from Power BI. Not all styles are available within the sandbox. You will not have access to Power BI's fonts in the iFrame. Please adjust the code of your visual to use specific and predictable Fonts and CSS.

2) iFrame within custom visuals are blocked. This is feature is due to the sandbox security policies we set. You should updated your code not to use an iFrame.

3) Performance for loading custom visuals. The is an impact due to the sandbox for how fast cusotm visuals load. We are working on fixes to make this better and some features to make it better still.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

JasonDunbar — Sun, 28 Feb 2016 23:06:01 GMT

Hi Lukasz,

Overall makes perfect sense... Though a couple of Qs:

Assumption is that this applies to both reports and dashbaords?

Is there any noticeable impact on performance?

Thanks,

Re: Custom Visuals Sandbox is coming - Here's what you need to know

lukaszp — Thu, 03 Mar 2016 20:05:48 GMT

Good questions. The sandbox will apply to custom visuals on both the dashboard and reports. There will be a performance impact for loading custom visuals. We will mitigate this in segments, first with a whitelist of known good extensions that I think most people will use. The whitelist will at first not be user controllable. As we iterate we'll add add user control over the whitelist in one for or another. Please test your visuals and tell us how you perceive performance, it is one of the reasons we want folks to test before we enable the sandbox for everyone.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

sjkp — Thu, 03 Mar 2016 22:25:07 GMT

Great with this type of upfront information. Enables me to make sure my solutions work once you release the update. Thank you!

Re: Custom Visuals Sandbox is coming - Here's what you need to know

danieleperilli — Sun, 06 Mar 2016 15:44:32 GMT

Lukaz,

can you confirm that is NOT possible to test in Sandbox directly from Developer Tools?

It seems that the only way to load custom visuals in an iframe is importing a PBIWIZ file...

ListView in Sandbox mode issue.

itayrom — Wed, 09 Mar 2016 11:43:04 GMT

Hello.
I encountered the following issue when trying to use the ListView control in my visuals in Sandbox mode:
1. The call to ListViewFactory.createListView() does not return.
2. When debugging, I get a TypeError exception with the following message - "a.scrollbar is not a function", refering to a statement in the ListView's constructor in visuals.min.js(Which is not present in the constructor in listView.ts on github).
3. A look in visual.js reveals that the "a" object is variable called "scrollInner" which is a jQuery selection of the div.scrollbar-inner element appended to the container element given in the ListViewOptions object.
4. It can be seen in the browser's DOM inspector that the div.scrollbar-inner was indeed appended to the container element.

My guess is that jQuery.scrollbar does not function properly in Sandbox mode.

Also, I second danieleperilli's post.

hostServices.analyzeFilter() always returns "undefined" in Sandbox mode.

itayrom — Wed, 09 Mar 2016 13:15:57 GMT

Hello again.

As the title says, whenever I call hostServices.analyzeFilter() in Sandbox mode, it returns "undefined".
The debugger does not yield any exciting information, so I don't have much to elaborate on. I did check to see if my FilterAnalyzerOptions object is still being initialized correctly in this mode, and it still is.

---

Edited: Ignore previous edit...

Re: Custom Visuals Sandbox is coming - Here's what you need to know

lukaszp — Fri, 11 Mar 2016 02:48:57 GMT

Correct, you can only test the sandbox in reports and on dashboards in the service. We've debated whether to bring it to dev tools itself and have held off since we think it would make debugging harder and won't provide much benefit there. We could add it. Is this something you'd strongly desire?

Re: ListView in Sandbox mode issue.

bashirs — Fri, 11 Mar 2016 21:36:57 GMT

Hi itayrom,

Thank you for reporting these issues. I am on the custom visual framework team and would be more than happy to discuss these issues and understand your scenario.

The sandbox feature only brings in a minimal set of dependencies to render a visual. Some of the libraries and frameworks that are otherwise included on the regular PowerBi page are not included within the sandbox including the JQuery.Scrollbar plugin which is not part of our supported public API.

The “hostServices.analyzeFilter()” function is also not part of the public supported API. This functionality is currently protected by the sandbox. I am interested in hearing what you were using this function call for?

I realize that there has not been a lot of clearity yet regarding what PowerBi functionality is guarenteed to be long term supported in custom visuals. We are working to address those gaps so that it is very clear what functions we support, maintain, and ensure will never break.

Thanks,

Bashir

Re: ListView in Sandbox mode issue.

itayrom — Sun, 13 Mar 2016 09:45:50 GMT

Hello, Bashir.
Thanks for your reply.

I've been using both ListView and the analyzeFilter() function in two of my custom visuals, both of which are new types of slicers(A hierarchical slicer and A searchable slicer, to be exact).
The ListView issue is less critical, because I chose it out of convenience(Uniform look and feel with the original slicer, and some other useful features), and writing a control of my own that would meet my requirements will (hopefully) not be too much of a trouble.

The hostServices.analyzeFilter() function, on the other hand, is a different case. I wanted my slicers to have a functionality similar to that of the original one. More specifically, I wanted selections to-
1. Apply a filter on the page(The same way the original Slicer does, as opposed to the type of filtering done by the Treemap visual, for example). [Speaking of which, is there by any chance a way for a visual to apply a filter on the report level?]
2. To persist when the visual is reloaded(E.g, the selection should be retained after leaving the page and going back to it).

I achieved (1) by either implementing an IInteractiveBehavior and using an interactivityService(Like in the original Slicer) or by using the SelectionManager and persist the selections with hostServices.persistProperties().
In order to achieve (2), I use hostServices.analyzeFilter() on the dataView.metadata.objects's filter property, and process the returned AnalyzedFilter object's selectedIdentities[] property(Which is pretty much what is done in Slicer's DataConversion.convert() function). I guess manual processing of the SemanticFilter to get the selected scope identities is possible, but it seems a bit nightmarish and a lot like a functionality that should be provided to developers.

If there are Sandbox-friendly ways to achieve the above, I would really appreciate a reference.

Thanks a lot,
Itay.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

itayrom — Sun, 13 Mar 2016 11:46:26 GMT

Hello, Lukasz.

I don't think that's what danieleperilli meant(or to the very least, that is not what I meant when I seconded his post).
Currently, when developing a visual using the DevTools, in order to test it using my own data and inside Power BI Service itself, and not in the DevTools with its limitied static DataViews, I do as such:
1. Open the DevTools in a different tab in the browser.
2. Write/Paste some code & compile it.
3. Go back to the "Power BI Service" tab and refresh it to make the newly compiled visual appear in the visualizations pane(Before refreshing, I remove previous instances of the visual from the report, if present).
4. Add the new visual to my report and save it.
5. Refresh the tab every time I re-compile my visual to have the visual updated in the report.

But in Sandbox mode, that scenario fails-
Every time I re-compile, refreshing the page does not update the visual. Instead, I have to export the visual, remove all previous instances of the visual from the report, import the visual from my computer and then put the new version in the report, which complicates the testing process even more(Which is already has a little more steps than it should have).

Have a nice day,
Itay.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

danieleperilli — Mon, 14 Mar 2016 19:35:46 GMT

Lukasz,

I was talking about the same scenario described by @itayrom.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

danieleperilli — Mon, 14 Mar 2016 19:46:30 GMT

I want to report a few more bugs in the sandbox mode:

options.viewMode in the Update method return always undefined
options.host.getViewMode() in the Init method return 0 also when a new report is created (it should returns 1). It works when onViewModeChange() happens.
It seems it's not more possible to call a file dialog... can you confirm it?

Thanks

Re: ListView in Sandbox mode issue.

bashirs — Mon, 14 Mar 2016 20:37:48 GMT

Hi Itay,

I think I understand your use case scenario. Currently it is not supported to access the hostServices from the sandbox. One of the intentions of the sandbox is to be a mechanism to isolate the API calls that are inteded to be used in custom visuals from those that are not supported. We are always planning out how to best provide functionality for custom visuals in a way that can be supported long term. For functionality like this we will likely try to figure out a better way to expose this functionality for content authors.

There are a couple of options that can be done short term to ensure that this continues to function properly after sandbox is released and before we have appropriate replacements for APIs that we want to support. One of our goals is to not sandbox visuals that are in our public visuals gallery because they have already undergone a sufficient security review. Are your visuals already in the visual gallery or would you be able to upload them? Another option is that we intend to also ship a feature flag for the short term that allows visuals to render without sandbox. That feature flag will most likely not be supported long term.

Thanks,

Bashir

Re: Custom Visuals Sandbox is coming - Here's what you need to know

bashirs — Tue, 15 Mar 2016 21:40:38 GMT

@danieleperilli : thank you for the report. I am not sure if all of these functions will work the same way when we finalize the visuals API. We will make it more clear in the near future and deliver something that will be guarenteed to not change in the future. We want to get to a point where we give you a set of visual APIs that are reliable and can be depended upon forever, until then there may be some reaction work to keep things up-to-date.

In the short term if you need to get around sandboxing after release there will temporarily be a feature flag to disable it as we work out enabling all of the supported scenarios for the majority of content partners.

Thanks,

Bashir

Re: Custom Visuals Sandbox is coming - Here's what you need to know

mplus — Thu, 17 Mar 2016 16:53:53 GMT

Hi,
I have 2 custom visuals that both display the same problem in sandboxing mode. One uses Leaflet and the other Cesium to display content on a geographical map or a 3D Earth. The problem is that when I grab the terrain and drag it, the visual gets stucked in this "grab and drag mode". The terrain is always dragged when I move the mouse even though I have realeased the left mouse button.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

tomhawley — Fri, 25 Mar 2016 11:11:27 GMT

I've just realised after a lot of investigating the wrong thing that a bug I have in my visual will be resolved by sandboxing.

In brief, the visual (based on SVG) uses textpath elements, which are cross referenced to actual path elements using the ID.

I finally spotted that my wrongly positioned text was cross referencing the identical IDs in a differently sized instance of my visual sat on the active dashboard, which though not visible, is clearly already loaded up in the background.

As I said, sandboxing will resolve this, but I don't want to wait for this to be turned on as I think this should be easily resolvable right now by prefixing/suffixing each ID with a unique identifier tied to the overall visual.

Is there any best practice way to generate a unique ID for the current visual for use in this manner? I've considered generating a random string within init(), checking the DOM for a clashes, regenerating until unique, then using that as a prefix/suffix. I see no reason this won't work, but it feels like an inelegant workaround to a problem that might have a better solution?

Re: Custom Visuals Sandbox is coming - Here's what you need to know

jdrake — Thu, 07 Apr 2016 01:44:46 GMT

Hi Bashir,

I also depended on the hostServices.getViewMode method. Can you give an update on API availability in sandbox mode or the un-sandbox feature flag?

Re: Custom Visuals Sandbox is coming - Here's what you need to know

itayrom — Thu, 07 Apr 2016 07:12:48 GMT

Hello again.

Due to the fact that all my visuals have suddenly stopped functioning, I can only assume the sandbox feature was enabled in the last few hours.

I therefore urgently request that you provide us with instructions for enabling the temporary un-sandbox flag, so we could still use our reports, until we manage to sort things out.

Thanks,

Itay.

Re: Custom Visuals Sandbox is coming - Here's what you need to know

cmn — Fri, 08 Apr 2016 02:41:39 GMT

This is impacting me as well, and possibly one other. Refer to this post:

http://community.powerbi.com/t5/Service/Custom-Visuals-not-working/m-p/28159.

Is there any guidance on how to test / debug these problems? Why would the visual render in in the web site, but not on the iOS app?