topic Re: How to create a modal dialog? in Developer

How to create a modal dialog?

DmitryVoronov — Thu, 17 Jun 2021 11:15:21 GMT

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?

Re: How to create a modal dialog?

Anonymous — Mon, 21 Jun 2021 08:47:38 GMT

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

Re: How to create a modal dialog?

DmitryVoronov — Mon, 21 Jun 2021 12:46:20 GMT

Hello @Anonymous !

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.

Re: How to create a modal dialog?

Anonymous — Fri, 25 Jun 2021 17:20:17 GMT

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.

Re: How to create a modal dialog?

DmitryVoronov — Mon, 05 Jul 2021 07:20:55 GMT

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.

Re: How to create a modal dialog?

Anonymous — Mon, 05 Jul 2021 07:45:58 GMT

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

Re: How to create a modal dialog?

WZorn — Wed, 07 Jul 2021 13:02:10 GMT

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"

Re: How to create a modal dialog?

WZorn — Wed, 07 Jul 2021 17:23:46 GMT

@Anonymous did you get this resolved?

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

Re: How to create a modal dialog?

Anonymous — Thu, 08 Jul 2021 01:15:02 GMT

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

Re: How to create a modal dialog?

WZorn — Thu, 08 Jul 2021 11:43:01 GMT

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.