To show Custom Visual out of containing iframe

Anonymous · ‎05-10-2019

Objective - My custom visual is a date range picker which is currently residing in an iframe generated by powerbit or pbiviz API. If my custom visual container height is less, date range picker which that is opening is hiding behind the walls of this iframe which is correct HTML behavior. I want this particular date range custom visual to show on top of all the containng area just like "Date Slicer" which opens datepicker freely.

How can I do that? I already have two threads related to same issue on GitHub and StackOverflow which are mentioned below respectively.

To show custom visual outside iframe container #544

To have reference to outer most <body> tag from the iFrame

If you see these threads, you get what I want to achieve here. Few points to mention:

Power BI Date Slicer which opens Datepicker doesn't add any iframe in HTML if you inspect and check it. Thus making it easier to use jQuery and attaching datepicker freely in DOM area. While Custom visual are automatically being added in an iframe.
Is there any way we can communicate outside area of this iframe. If I am using legacy methods to access parent outide area using, top.window then most of its properties like "document" does have this error if you try to access it.
Exception: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at invokeGetter (<anonymous>:2:14
Ofcourse this is Cross origin issue because iframe is loaded as https://powerbi.com while working environment of powerbi is without HTTPS and other host, parameters issues.
To communicate and listening between both worlds of iframe and outer containing area, we need access to code which is holding this iframe custom visuals which is not possible I believe as we are merely trying to develop custom visuals for already created application.
Is there configuration available which allows to inject/append this custom visual without an iframe itself like normal divs (as done for date slicer)?

hroudaadam · ‎09-15-2022

Hello there, is there any update to this topic?

dm-p · ‎09-15-2022

Hi @hroudaadam,

Since this post was made, the only supported way to display content outside the DOM is by using the recently-added dialog box API. Rich HTML (e.g. for custom dropdown components) still cannot overflow the borders of the iframe, as the security restrictions have not changed, and likely won't be changing. However, if you want to get any direct confirmation around this, it's best to email the team directly for support (pbicvsupport@microsoft.com), as they do not monitor the forums for questions.

Regards,

Daniel

Did I answer your question? Mark my post as a solution!

Proud to be a Super User!

My course: Introduction to Developing Power BI Visuals

On how to ask a technical question, if you really want an answer (courtesy of SQLBI)