Condividi tramite

Incorporare un elemento di Power BI in un'applicazione React

  • Articolo

Quando si crea un'applicazione di analisi incorporata di Power BI, React consente di ottimizzare le prestazioni con l'integrazione bootstrap, usando tutte le API lato client, inclusa la creazione di report. Semplifica anche la gestione del ciclo di vita di incorporamento di Power BI nell'applicazione. Il componente React di Power BI supporta sia JavaScript che TypeScript e consente di incorporare l'analisi in un'applicazione Web React.

La libreria React consente di incorporare gli elementi di Power BI seguenti:

  • Rapporti
  • Dashboard
  • Riquadri del dashboard
  • Oggetti visivi del report
  • Q&A

Come incorporare un elemento di Power BI in un'app Web React

Questa sezione descrive come importare React nell'app e usarla per incorporare un report di Power BI.

Per informazioni dettagliate sull'utilizzo, vedere il file leggimi di Power BI React .

Importare la libreria React

Il componente React di Power BI è disponibile in NPM. È anche open source in GitHub.

Per importare React nell'app Web, aggiungere le importazioni elencate:

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

Incorporare il report con React

Questo esempio illustra come incorporare un report di Power BI usando React. Sotto l'esempio è possibile trovare una descrizione per ogni componente nell'esempio di codice.

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;
    }
}

L'elenco seguente include descrizioni o informazioni aggiuntive per ogni componente nell'esempio di frammento di codice.

  • Embed config : definisce il contenuto che si sta incorporando e specifica le impostazioni del contenuto. La configurazione di incorporamento cambia quando si incorporano gli elementi di Power BI seguenti:

  • eventHandlers: oggetto mappa per i nomi degli eventi e i relativi gestori. Per altre informazioni, vedere Come gestire gli eventi.

  • cssClassName: fornisce all'elemento incorporato nomi di classe CSS che consentono di controllare lo stile dell'iframe incorporato usando CSS.

  • getEmbedComponent: callback che consente di ottenere l'istanza incorporata, in modo da poter usare tutte le API consentite dalla libreria client di Power BI. Ad esempio, quando si incorpora un report, si ottiene un'istanza della classe Report.

Bootstrap di un componente

powerbi.bootstrap è un metodo usato per consentire agli sviluppatori di incorporare elementi di Power BI più velocemente e ottenere prestazioni migliori. Per altre informazioni, vedere Usare bootstrap per ottenere prestazioni migliori.

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

Demo react

Il repository React include una demo che illustra il flusso completo di bootstrap di un report, l'incorporamento e l'aggiornamento del report incorporato. Viene inoltre illustrato l'utilizzo della raccolta di report powerbi che crea eliminando un oggetto visivo da un report facendo clic sul pulsante elimina un visuale.

Per altre informazioni, vedere la sezione demo del file leggimi .

Gif animata che mostra la demo React di Power BI.

Esecuzione della demo

La demo è una sottocartella nel repository. Per eseguire la demo in localhost, seguire questa procedura:

  1. Eseguire i comandi seguenti:

    npm run install:demo
npm run demo

  2. Per visualizzare nel browser, reindirizzarlo a http:/localhost:8080/.

Contenuto correlato