How to create a modal dialog?

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.