topic Re: Setting the iframe background for embedded reports (default gray color is terrible) in Developer

Setting the iframe background for embedded reports (default gray color is terrible)

tmcdevitt — Fri, 08 Dec 2017 23:33:26 GMT

We're embedding PowerBI reports in a custom application we're building. For the most part, this is working great. However, we can't figure out how to set the background color of the iframe in which reports are getting embedded. Note: we're not talking about the background color of the report. Instead, we're talking about the padding between the borders of the iframe and the report content. See attached image. From what we can tell, there's no way to set this from Desktop or from the embed calls we're making.

Ideally, we'd be able to reference an external CSS or something that would be used within the iframe of the report but that doesn't appear to be an option (and obviously, we can't control the styling of elements within the iframe from our application).

Re: Setting the iframe background for embedded reports (default gray color is terrible)

nimrod — Sun, 10 Dec 2017 09:38:01 GMT

We are working on a solution for this now, so you will be able to use it pretty soon.

In general, we will enable you to optimize the size of the report page to fit into the iframe,

without any grey padding.

In addition, you will be able to get the report size, and so you will be able to optimize the DIV size and match it with the report size.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

tmcdevitt — Sun, 10 Dec 2017 19:54:14 GMT

Ok, thanks for the info Nimrod.

One thing that might be really nice - allow us, in the embed call, to pass in a URL to a CSS resource that's external to PowerBI. Then, when the report renders in the iFrame, it includes that CSS. This way, we're in control of the CSS and can change up the report styling any way we choose.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

jimmcslim — Tue, 12 Dec 2017 23:18:05 GMT

Hi Nimrod,

Thanks for the update. The sooner this is available, plus the resizing support you mentioned, the better!

Just a question - where will the availability of this feature be communicated? Via this forum (which I don't monitor frequently) or via the Power BI blog (which I do monitor daily!).

Re: Setting the iframe background for embedded reports (default gray color is terrible)

Eric_Zhang — Wed, 13 Dec 2017 02:54:42 GMT

@tmcdevitt wrote:

Ok, thanks for the info Nimrod.

One thing that might be really nice - allow us, in the embed call, to pass in a URL to a CSS resource that's external to PowerBI. Then, when the report renders in the iFrame, it includes that CSS. This way, we're in control of the CSS and can change up the report styling any way we choose.

@tmcdevitt

I guess you may have intrest in

Use Report Themes in Power BI Desktop

Power BI Themes Gallery

Re: Setting the iframe background for embedded reports (default gray color is terrible)

nimrod — Wed, 13 Dec 2017 07:54:23 GMT

We are updating on all our new feature in our developers monthly blog posts.

Be sure to check there, that should get you covered.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

tmcdevitt — Wed, 13 Dec 2017 13:52:57 GMT

Hi Eric,

We've looked at themes but they really don't get us what I'm talking about. First, they don't deal with the issue of the gray background. Second, and most important, you need to "install" them for each report and you have to do it via Desktop. So, if we've got a bunch of reports and need to roll out a theme change, guess what? We need to download each dataset, open them in Desktop, "import" the theme that changed and then publish the report. It's tedious, for sure.

Since we're embedding reports, it would be way easier for us if we could just send you a URL to a CSS file (one that we control external to PowerBI) and then, within the embedded iframe, you guys just include the CSS file such that the styles within will be applied to the contents of the iframe.

One other thing on themes - there doesn't appear to be a library of themes that Desktop is aware of. For example, let's say I pull down Theme A from the online theme gallery. I save that JSON file locally and then import it into a report in Desktop. Then, I want to experiment with another theme, Theme B. So, I download the JSON and import but I don't like it. So, I want to "switch" the theme in the report back to Theme A. Well, unfortunately, Desktop has no memory of Theme A. I need to go back to my local machine and import the JSON file that I had downloaded. That's fine for me but someone else who might be editing the report in another instance of Desktop won't have that JSON file on their local machine (and likely won't have any idea where to get it). Ideally, Desktop would remember all of the JSON themes that have been imported and allow you to easily switch between them without having to reupload the theme every time (Actually, now that I think about it, Desktop (and really, the online report editor) should be able to show the user the themes in the online gallery and let them install them directly from there as well).

- Terence

Re: Setting the iframe background for embedded reports (default gray color is terrible)

tmcdevitt — Wed, 17 Jan 2018 15:27:22 GMT

Hey guys,

Any update on this issue? Someone had mentioned this might be fixed "soon". Really hoping that's for the January release. We're trying to launch some of our embedded reports to actual users in early February and this gray background issue makes things look less professional than we'd like.

Thanks.

- Terence

Re: Setting the iframe background for embedded reports (default gray color is terrible)

nimrod — Wed, 17 Jan 2018 19:22:55 GMT

See January blog post- https://powerbi.microsoft.com/en-us/blog/power-bi-developer-community-january-update/

Look for 'Custom layout' feature.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

Beaver — Wed, 07 Feb 2018 01:28:59 GMT

I am not seeing anything about changing bg color only the page size, or controlling visual sizes, position and visibility ;(......

Re: Setting the iframe background for embedded reports (default gray color is terrible)

Beaver — Wed, 07 Feb 2018 01:36:05 GMT

I can see nothing about changing bg color... only a page size, or controlling visual sizes, position and visibility 😞 _ _ _ _ _

Re: Setting the iframe background for embedded reports (default gray color is terrible)

Anonymous — Fri, 13 Apr 2018 14:29:52 GMT

Hi, is there any update on this please? The January release blog post points me to the demo > custom layout. I've looked through this but can only see that it regulates x and y position, plus visibility. I can't see how to remove the gray shading. Can anyone advise if this is possible yet?

The gray shading seems driven by the ratio (height/width) of the visual. At some ratios, the gray is top/bottom, but at some point the gray moves left/right. The size of the embedded visual appears to be standard, and not driven by the originating report.

It would therefore be very useful to have the default size or ratio of Power BI standard visuals. Is this available anywhere?

Re: Setting the iframe background for embedded reports (default gray color is terrible)

nimrod — Sat, 14 Apr 2018 06:38:56 GMT

Hi,

We are working on an additional solution to go out at the beginning of May,

and will allow to set the iFrame background as 'transparent', giving him the color defined on the DIV element.

That will give developers total control on the color of themargins, in addition to the optimization you can do to the size of the object using the 'Custom Layout' API.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

eath93 — Tue, 15 May 2018 00:40:11 GMT

Hi - Any update?

Re: Setting the iframe background for embedded reports (default gray color is terrible)

eath93 — Tue, 15 May 2018 00:47:34 GMT

Is there any update? I have been waiting out for this feature for a while.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

alter — Tue, 15 May 2018 07:11:42 GMT

I am also waiting for this, updates?

Re: Setting the iframe background for embedded reports (default gray color is terrible)

ddonahue — Wed, 16 May 2018 22:19:25 GMT

I am not sure when this was released, but it's documented now:

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details#settings

See "Transparent Background"

Re: Setting the iframe background for embedded reports (default gray color is terrible)

a_lafont — Thu, 17 May 2018 09:33:14 GMT

Transparent background is now available and you only have to add this :

config.settings.background = models.BackgroundType.Transparent;

Re: Setting the iframe background for embedded reports (default gray color is terrible)

donquijote — Mon, 04 Jun 2018 06:34:09 GMT

I tested this feature and I find a bad behavior.

When making the background transparent, If a visual in the report is maximized with "Focus Mode" the whole dashboard remains on the background behind the maximized visual.

This seems a bug.

Re: Setting the iframe background for embedded reports (default gray color is terrible)

nimrod — Fri, 08 Jun 2018 11:55:40 GMT

Thanks for bringing this to our attention.

We are working to fix this bug, and we will update on ETA for the fix later on.