how do you size a custom visual dialog box?

[Anonymous]

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 interface methods to set title, icon, window sizing, and removal of "Don't show..." message...  

Does anyone know how to achieve the dialog box from the following image (ignoring the content)?  

Is there any documentations beyond the above link?  Or any examples of successful setup?

These are the type definitions available (I don't see any support for sizing, etc.):

    export interface DialogConstructorOptions {

        element: HTMLElement;

        host: IDialogHost;

    }

    export interface IDialogHost {

        setResult: (resultState: object) => void;

        close: (actionId: DialogAction, resultState?: object) => void;

    }

    export interface DialogOpenOptions {

        actionButtons: DialogAction[];

    }

Any help would be greatly appreciated.

[Anonymous]

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]

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

Maximum	90% of the browser width	90% of the browser height
Minimum	240px	210px

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.