Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
Anonymous
Not applicable

To show Custom Visual out of containing iframe

‎05-10-2019 03:02 AM

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)? 
Labels:
Message 1 of 4
1,400 Views
3 REPLIES 3
hroudaadam
Frequent Visitor

‎09-15-2022 01:36 PM

Hello there, is there any update to this topic?

Message 2 of 4
762 Views
0
dm-p
Super User
Super User
In response to hroudaadam

‎09-15-2022 06:14 PM

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!


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




Message 3 of 4
753 Views
hroudaadam
Frequent Visitor
In response to dm-p

‎09-28-2022 01:09 AM

Hi @dm-p, thank you very much for the info.

Message 4 of 4
693 Views
0

Helpful resources

Announcements
August Power BI Update Carousel

Power BI Monthly Update - August 2025

Check out the August 2025 Power BI update to learn about new features.

August 2025 community update carousel

Fabric Community Update - August 2025

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

View All