Starting December 3, join live sessions with database experts and the Microsoft product team to learn just how easy it is to get started
Learn moreGet certified in Microsoft Fabric—for free! For a limited time, get a free DP-600 exam voucher to use by the end of 2024. Register now
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?
Solved! Go to 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.
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
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
I pushed this test project to gitHub, if anyone wants to try it.
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:
@Anonymous did you get this resolved?
I'm getting the same thing you posted above no matter what I try.
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
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.
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.
What exactly needed to be done to resolve your issue?
I'm getting the same message and popup you did.
Here are my versions:
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
Starting December 3, join live sessions with database experts and the Fabric product team to learn just how easy it is to get started.
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.