How to create a modal dialog?

[DmitryVoronov]

Hello!

I wanted to create a test dialog box as specified in microsoft docs.

But, I get an error:

mySuperWidget09FDE52B7F444CB6B7FC6F644D37B5D7_DEBUG.default.createModalDialog is not a function

in console. Along with that, i have empty window with two buttons " OK " and "Cancel". My implementation for dialog box do not create.

How would I fix this? Maybe if there are any working examples?

[v-yiruan-msft]

Hi @DmitryVoronov ，

It is difficult to find the cause of problem in the absence of relevant scripts and error messages. Could you please explain the operations you did and where you got the error? Thank you.

Best Regards

[DmitryVoronov]

Hello @v-yiruan-msft !

I'm sorry I didn't describe it exactly. I will try it:

1. Before all, I use pbiviz 3.2.3, npm 6.14.12, node v14.16.1
2. I create a new project `pbiviz new testDialogPBI`
3. Bump apiVersion in `pbiviz.json` to latest 3.8.0.

4. Create the dialog box implementation file as written in the documentation. I want to render a simple div with text:

    constructor(options: DialogConstructorOptions, initialState: object) {
        this.host = options.host;
        this.target = options.element;
        // … dialog rendering implementation …
        const div = document.createElement('div');
        div.className = 'test';
        let text = document.createTextNode('Test');
        div.appendChild(text);
        this.target.appendChild(div);
    }

5. In `visual.ts` the dialog box is invoked by clicking a button:

export class Visual implements IVisual {
  ........
    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.host = options.host;
        this.updateCount = 0;
        if (document) {
            const button = document.createElement("BUTTON");
            button.innerHTML = "Open Dialog, please";
            button.onclick = () => {
                console.log('Hello!');
                const dialogOptions = {
                    actionButtons: this.dialogActionsButtons,
                };
                this.host.openModalDialog(TestDialog.id, dialogOptions).catch(error => console.log("error:", error));
            };
            this.target.appendChild(button);
        }
    }
  ........
}

6. Start project `npm run start`.

As a result, I see a button. Clicking on it brings up a dialog box with two buttons without my test dialog. In console error:

testDialogPBI3CE526641734417E8F5DB8CCB3381F9A_DEBUG.default.createModalDialog is not a function

In console

I pushed this test project to gitHub, if anyone wants to try it.

[Anonymous]

I've encountered the same error in attempting to use the Dialog with a custom visual: 

The error links to the following code snippet in Power Bi code.

I feel that there is something missing from the documentation steps or the Power Bi code.

I would really like to use this feature if anyone can figure it out.  Is there an additional npm packages or versions required?

These are the ones I'm currently using:

 "powerbi-models": "^1.8.0",

    "powerbi-report-authoring": "^1.0.0",

    "powerbi-visuals-api": "^3.8.2",

    "powerbi-visuals-tools": "^3.2.3",

    "powerbi-visuals-utils-dataviewutils": "^2.4.1",

    "powerbi-visuals-utils-formattingutils": "4.1.1",

    "powerbi-visuals-utils-interactivityutils": "^5.7.1",

    "powerbi-visuals-utils-tooltiputils": "^2.3.0",

Thanks for any help.

[WZorn]

@Anonymous  did you get this resolved?

I'm getting the same thing you posted above no matter what I try.

[Anonymous]

Yes, it worked for me as well.   

I took the path from running npm root -g, removed "node_modules" from the end, and pasted  <here> in the following command.

npm install --prefix <here> powerbi-visuals-webpack-plugin

[WZorn]

Got it!  Thanks.  I was thinking it was my new visual project that needed the update.  I was not thinking it was the package inside powerbi-visuals-tools that needed updating.

[DmitryVoronov · Accepted solution]

There is a solution! Thank to AsafMozes

Please try to update to powerbi-visuals-webpack-plugin 2.3.0 on powerbi-visuals-tools project.
( powerbi-visuals-tools location can be usually found by “npm root -g” )

https://github.com/MicrosoftDocs/powerbi-docs/issues/3138 

It works for me.

[WZorn]

What exactly needed to be done to resolve your issue?

I'm getting the same message and popup you did.

Here are my versions:

"powerbi-visuals-api": "~3.8.2",

    "powerbi-visuals-tools": "^2.3.0",

    "powerbi-visuals-utils-dataviewutils": "2.2.1",

    "powerbi-visuals-webpack-plugin": "^2.3.0"

[v-yiruan-msft]

Hi @DmitryVoronov ，

It's glad to hear that your problem has been resolved. And thanks a lot for sharing the solution here, it will help the others in the community find this solution easily if they face the same problem with yours. I regret that I have not been able to give you a solution here...

Best Regards