Resize dashboard dynamically

#1

I am trying to put a web browser in a dashboard. That’s of course easy enough, but my issue is that I do not know in advance how big the destination of the iframe will be.

I am trying to

  • have the page loaded,
  • have a ‘ready’ event which will look at the size of the embedded element,
  • resize what needs to be resized based on this height.

I can access the dashboard object and set its height property, but it has no effect at all:

dash_promise = this.getService('DashboardService').getDashboardById(this.id);
dash_promise.done(function(dash){
  dash.height=2000;
})

I tried both with template/responsive mode and no template/scroll mode.

I can change the height of the dundas.view.controls.WebBrowser component (.height=2000) that’s easy. But as the dashboard stays small it only solves half of my problem.

The context is that this dashboard will be exported to an image, so scrolling is not an option.

Is there a way to resize the full dashboard?

#2

Have you tried setting the dashboard to ‘scale’ mode?

#3

Hi @david.glickman,

I did, without success. It does scale but it’s only a sort of zoom. I still only see the top part of my iframe corresponding to the configured height of the webbrowser component.

#4

Hi @guillaume,

What’s the issue you’re having? What i mean is - why is the size changing? Are you trying to fill a template grid cell? Just trying to understand the conditions…

#5

Hi @jeff,

What happens is that I have a dashboard with, amongst other things, an iframe (to give some context, the report is about clicks on a web page, and the iframe shows the page in question, with some click data overlay).

The thing is that the size of the page in the iframe is not known in advance, and could change across runs (because different pages would be analysed).

I can know the size of the iframe content after it is loaded (I basically end up in javascript with a width and height value, within a dashboard ready script in Dundas). I am then looking for a way to adapt the webbrowser component size (or the iframe, or the template cell… whatever works) based on this new height (I actually do not care much about the width).

To simulate what I am trying to do:

  • create a new empty dashboard
  • add a webbrowser component pointing to eg. https://dundas.com
  • make sure the whole dundas.com page fits programmatically in the dashboard without scrollbars
#6

Since this isn’t a Dundas BI specific question, this might not be the best place to ask. It seems to me that you’d want to do something like this but i’m really not an authority on general html.

#7

Hi @jeff,

The question from stackoverflow you link would indeed work for just about anything outside Dundas (and that is kinda what I am already doing).

My issue is not about the iframe itself. I can resize it, but not the dashboard itself.

An example of what I mean:

If your defaults are like mine, the default dashboard is 1024x768 and the default webcomponent is 600x400. This is too small for Dundas.com. Let’s assume I have a way to find the height (5000 in this example - found manually and good enough for the purpose of the example).

Now if I add this script in the ready of the dashboard:

ds = this.getService('DashboardService');
dash_promise = ds.getDashboardById(this.id);

dash_promise.done(function(dash){
  iframe = webBrowser1.getiFrameElement();
  iframe.height=5000; 
  webBrowser1.height=5000;
  this.height=5000; //tried with dash.height as well
})

I would expect to have very long iframe and dashboard.
The element indeed has a height of 5000, but the dashboard itself stays desperately small.

To make it obvious, I made the background colour of the dashboard very ugly, and it stays so - the component has increased in height but the dashboard not:

Screenshot%20from%202019-09-18%2009-15-17
Screenshot from 2019-09-18 09-15-17.png1091×868 64 KB

So without all the actual explanation and iframe context, my question is: Is there a way to resize the full dashboard?

#8

It seems that you can change the dashboard dimensions doing something like this:

var canvasService = this.getService(“CanvasService”);
canvasService.canvasAdapter.height = 200;

#9

Yes indeed, that was it. Thanks a lot! I can get the result I am looking for now.

#10

Thanks, helps me a lot too :+1: