Running multiple custom visuals at a time locally and passing data between them

[Anonymous]

Hello,

Is there a way to make two custom visuals communicate with each other?

The idea here is to sync axis of the two custom visuals. When one of the custom visuals is zoomed in or zoomed out, the other custom visual should sync in with the axis of the previous one. 

Also, I believe for this we need to run multiple custom visuals locally at the same time. Is there a way for the same?

Would appreciate any lead on this.

Thanks in advance!

[Anonymous]

Hi @Anonymous ,

Which custom visual you are using? Do you want to zoom in or zoom out a certain custom visual on the page, and other custom visuals should be zoomed in or out accordingly? If yes, currently it is not possible to achieve it.

Best Regards

[Anonymous]

https://community.powerbi.com/t5/Developer/data-passing-between-2-custom-visuals-on-the-same-page/m-...

I was following the above thread. And I was trying to pass zoom coordinates from one i-frame to another using Javascript cross window message passing described in this link:

https://javascript.info/cross-window-communication#cross-window-messaging

However, I am getting cross origin error.

Any thoughts on this approach?

Thanks in advance!

[dm-p]

Hi @Anonymous,

Custom visuals are run in a sandboxed iframe with the allow-same-origin attribute disabled, so looking at your example page, this scenario falls under the following exception and will therefore not work:

---

If an iframe has a sandbox attribute, it is forcefully put into the “different origin” state, unless the allow-same-origin is specified in the attribute value. That can be used to run untrusted code in iframes from the same site.

---

I have written up a bit about the custom visual sandbox here, if you want to know a little more about it and what challenges you might face when using them. It's probably worth looking at the CORS section, right after this one, too, to understand the cross-origin policy with respect to custom visuals.

If you want instances of the same visual to communicate with each other, you can use the Local Storage API, but this has a number of pre-requisites, including being in the Marketplace and certified.

Regards,

Daniel