Inserción de contenido de Power BI en una aplicación de Angular

2024-10-25

Al crear una aplicación de análisis insertado de Power BI, Angular puede ayudar a configurar rápidamente una aplicación escalable y fácil de mantener. Angular agrega patrones de estructura y diseño al desarrollo de front-end, lo que permite a los desarrolladores crear aplicaciones web más avanzadas que sean más fáciles de mantener y actualizar.

La biblioteca de Angular de Power BI le permite insertar los siguientes elementos de Power BI en la aplicación de Angular:

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

Inserción de contenido de Power BI en una aplicación web de Angular

En esta sección se describe cómo importar Angular 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 Angular power BI.

Importación de la biblioteca de Angular

Puede encontrar el componente de Angular de Power BI en NPM. También es de código abierto en GitHub.

Para importar Angular en la aplicación web, agregue las importaciones que se enumeran a continuación.

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Inserción del informe con Angular

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

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

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

embedConfig: 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:
- informe
- visual de informe de
- de informe paginado
- Q independiente&un visual
- panel de
- icono panel de
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.
phasedEmbedding: mejora la experiencia del usuario final al proporcionar a los desarrolladores más flexibilidad para insertar informes por fases. Consulte Uso de de inserción por fases para obtener más información.

Arranque de un informe de Power BI

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.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Para insertar el informe después del arranque, actualice embedConfig (con al menos accessToken e embedUrl).

Demostración de Angular

El repositorio de Angular incluye una demostración que inserta un informe de ejemplo mediante el componente PowerBIReportEmbed. Muestra el flujo completo desde el arranque del informe para insertar y actualizar el 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 . También establece un evento "DataSelected".

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 Angular de Power BI.

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:

Ejecute los comandos siguientes:
```
npm run demo
```
Para ver en el explorador, redirijalo a http:/localhost:4200/.

Compartir a través de