Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
DmitryVoronov
New Member

How to create a modal dialog?

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?

1 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.

View solution in original post

9 REPLIES 9
v-yiruan-msft
Community Support
Community Support

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

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

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

 

2.pngIn consoleIn console

 

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

Anonymous
Not applicable

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

brucearthur_1-1624641308342.png

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

brucearthur_0-1624641164199.png

 

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.

 

 

@Anonymous  did you get this resolved?

 

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

Anonymous
Not applicable

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:

"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"

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

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

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

Find out what's new and trending in the Fabric Community.