Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
5 years ago

how do you size a custom visual dialog box?

Subject: Custom visuals using a dialog box:  https://docs.microsoft.com/en-us/power-bi/developer/visuals/create-display-dialog-box    Given the sandboxed Iframe of the dialog box, and lack of inter...
Need Help
Anonymous's avatar
Anonymous
Not applicable
5 years ago

Hi Anonymous 

Try this code to set the size of your custom visual.

let width: number = options.viewport.width;
let height: number = options.viewport.height;
this.svg.attr("width", width);
this.svg.attr("height", height);
let radius: number = Math.min(width, height) / 2.2;
this.circle
    .style("fill", "white")
    .style("fill-opacity", 0.5)
    .style("stroke", "black")
    .style("stroke-width", 2)
    .attr("r", radius)
    .attr("cx", width / 2)
    .attr("cy", height / 2);
let fontSizeValue: number = Math.min(width, height) / 5;
this.textValue
    .text("Value")
    .attr("x", "50%")
    .attr("y", "50%")
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeValue + "px");
let fontSizeLabel: number = fontSizeValue / 4;
this.textLabel
    .text("Label")
    .attr("x", "50%")
    .attr("y", height / 2)
    .attr("dy", fontSizeValue / 1.2)
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeLabel + "px");

For reference: Set the width and height

 

Best Regards,

Rico Zhou

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly. 

Anonymous's avatar
Anonymous
Not applicable
5 years ago

Thanks Zhou for your reply.

 

It appears I wasn't clear enough.  In this article, https://docs.microsoft.com/en-us/power-bi/developer/visuals/create-display-dialog-box on creating a dialog box for your Power Bi Visual, it states:

  • During development, you can specify the size of the dialog box.

The size limitations of the dialog box are described in the table below.

TABLE 1Max/min Width Height
Maximum90% of the browser width90% of the browser height
Minimum240px210px

 

To my mind that means I can set the size of the dialog box itself and therefore the viewport 

options.viewport.width
options.viewport.height

 

Since the visual's influence is restricted (sandboxed) to only those dom object within the viewport, the only way I can see of influencing the Dialog Box size is through an interface within the dialog host, or as properties on the dialog box open command.  I'm not seeing either.

 

I posted an image of a dialog box that has been sized differently than the default size and in addition removed the "Don't Show..." message from inside the dialog box, but beyond the viewport.  And was able to add a title and icon to the header (also beyond the viewport).

 

Can anyone tell me how all three of these things were achieved?

 

Thanks, for any help.