¿Cómo crear un diálogo modal?

Hola @DmitryVoronov,

Es difícil encontrar la causa del problema en ausencia de scripts y mensajes de error relevantes. ¿Podría explicar las operaciones que realizó y dónde obtuvo el error? Gracias.

Atentamente

¡Hola @yingyinr!

Siento no haberlo descrito exactamente. Voy a intentarlo:

1. Antes que nada, uso pbiviz 3.2.3, npm 6.14.12, node v14.16.1
2. Creo un nuevo proyecto `pbiviz new testDialogPBI`
3. Actualice apiVersion en `pbiviz.json` a la última versión 3.8.0.

4. Cree el archivo de implementación del cuadro de diálogo como está escrito en la documentación. Quiero renderizar un div simple con texto:

    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. En `visual.ts`, el cuadro de diálogo se invoca haciendo clic en un botón:

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. Inicie el proyecto `npm run start`.

Como resultado, veo un botón. Al hacer clic en él, aparece un cuadro de diálogo con dos botones sin mi diálogo de prueba. En error de consola:

testDialogPBI3CE526641734417E8F5DB8CCB3381F9A_DEBUG.default.createModalDialog is not a function

en consola

Empujé este proyecto de prueba a gitHub, si alguien quiere probarlo.

Encontré el mismo error al intentar usar el diálogo con una imagen personalizada:

El error se vincula con el siguiente fragmento de código en el código de Power Bi.

Siento que falta algo en los pasos de documentación o en el código de Power Bi.

Realmente me gustaría usar esta función si alguien puede resolverlo. ¿Se requieren paquetes o versiones adicionales de npm?

Estos son los que estoy usando actualmente:

@brucearthur, ¿resolviste esto?

Obtengo lo mismo que publicaste arriba sin importar lo que intente.

Sí, también funcionó para mí.

Tomé el camino de correr raíz npm -g, eliminado «node_modules» del final y pegado en el siguiente comando.

instalación npm –prefijo powerbi-visuals-webpack-complemento

¡Entendido! Gracias. Estaba pensando que era mi nuevo proyecto visual el que necesitaba una actualización. No estaba pensando que era el paquete dentro de powerbi-visuals-tools lo que necesitaba actualizarse.

¿Qué se necesitaba hacer exactamente para resolver su problema?

Recibo el mismo mensaje y ventana emergente que tu.

Aquí están mis versiones:

Hola @DmitryVoronov,

Me alegra saber que tu problema se ha resuelto. Y muchas gracias por compartir la solución aquí, ayudará a los demás en la comunidad a encontrar esta solución fácilmente si enfrentan el mismo problema con el suyo. Lamento no haber podido darte una solución aquí…

Atentamente