Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

To show Custom Visual out of containing iframe

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)? 
Need Help
Show and Tell

3 Replies

    • dm-p's avatar
      dm-p
      Super User
      3 years ago

      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 ([email protected]), as they do not monitor the forums for questions.

      Regards,

      Daniel