Compartir a través de

Inserción de un elemento de Power BI en una aplicación react

  • Artículo

Al crear una aplicación de análisis insertado de Power BI, React puede ayudarle a optimizar el rendimiento con la integración de arranque, al tiempo que usa todas las API del lado cliente, incluida la creación de informes. También simplifica la administración del ciclo de vida de inserción de Power BI en la aplicación. El componente de Power BI React admite JavaScript y TypeScript y le ayuda a insertar el análisis en una aplicación web de React.

La biblioteca react le permite insertar los siguientes elementos de Power BI:

  • Informes
  • Paneles
  • Iconos del panel
  • Objetos visuales de informe
  • Q&A

Inserción de un elemento de Power BI en una aplicación web de React

En esta sección se describe cómo importar React en la aplicación y usarlo para insertar un informe de Power BI.

Para obtener información detallada sobre el uso, consulte el archivo Léame de Power BI React.

Importación de la biblioteca de React

El componente de Power BI React se puede encontrar en NPM. También es de código abierto en GitHub.

Para importar React en la aplicación web, agregue las importaciones enumeradas:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Inserción del informe con React

En este ejemplo se muestra cómo insertar un informe de Power BI mediante React. Debajo del ejemplo puede encontrar una descripción para cada componente del ejemplo de código.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

En la lista siguiente se incluyen descripciones o información adicional para cada componente del ejemplo de fragmento de código.

  • insertar de configuración: define el contenido que va a insertar y especifica la configuración del contenido. La configuración de inserción cambia al insertar los siguientes elementos de Power BI:

  • eventHandlers: un objeto de mapa para los nombres de evento y sus controladores. Consulte Cómo controlar eventos para obtener más información.

  • cssClassName: proporciona al elemento incrustado un nombre de clase CSS que le permite controlar el estilo del iframe incrustado mediante CSS.

  • getEmbedComponent: una devolución de llamada que le ayuda a obtener la instancia insertada, de modo que pueda usar todas las API que permite la biblioteca cliente de Power BI. Por ejemplo, al insertar un informe, se obtiene una instancia de la clase Report de .

Arranque de un componente

powerbi.bootstrap es un método que se usa para ayudar a los desarrolladores a insertar elementos de Power BI más rápido y obtener un mejor rendimiento. Para obtener más información, consulte Uso del arranque para mejorar el rendimiento.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

Demostración de React

El repositorio de React incluye una demostración que muestra el flujo completo de arranque de un informe, inserción y actualización del informe insertado. También muestra el uso de la biblioteca de creación de informes de powerbi mediante la eliminación de un objeto visual de un informe al hacer clic en el botón Eliminar un objeto visual .

Para obtener más información, consulte la sección de demostración de del archivo léame.

gif animado que muestra la demostración de Power BI React.

Ejecución de la demostración

La demostración es una subcarpeta en el repositorio. Para ejecutar la demostración en localhost, siga estos pasos:

  1. Ejecute los comandos siguientes:

    npm run install:demo
npm run demo

  2. Para ver en el explorador, redirijalo a http:/localhost:8080/.

Contenido relacionado