Incorporare contenuto di Power BI in un'applicazione Angular

2024-10-25

Quando si crea un'applicazione di analisi incorporata di Power BI, Angular consente di configurare rapidamente un'app gestibile e scalabile. Angular aggiunge modelli di struttura e progettazione allo sviluppo front-end, consentendo agli sviluppatori di creare applicazioni Web più avanzate che sono più facili da gestire e aggiornare.

La libreria Angular di Power BI consente di incorporare gli elementi di Power BI seguenti nell'applicazione Angular:

Rapporti
Dashboard
Riquadri del dashboard
Oggetti visivi del report
Q&A
Report impaginati

Come incorporare contenuto di Power BI in un'app Web Angular

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

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

Importare la libreria Angular

È possibile trovare il componente Angular di Power BI in NPM. È anche open source in GitHub.

Per importare Angular nell'app Web, aggiungere le importazioni elencate di seguito.

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

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

Incorporare il report con Angular

Questo esempio illustra come incorporare un report di Power BI usando Angular. Di seguito è riportata una descrizione di ogni componente nell'esempio di codice.

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

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

embedConfig: 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:
- Rapporto
- dell'oggetto visivo Report
- report impaginato
- Q autonomo&Un oggetto visivo
- Dashboard
- riquadro Dashboard
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.
phasedEmbedding: migliora l'esperienza dell'utente finale offrendo agli sviluppatori maggiore flessibilità per l'incorporamento dei report in più fasi. Per altre informazioni, vedere Usare di incorporamento in più fasi.

Eseguire il bootstrap di un report di Power BI

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.

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

Per incorporare il report dopo il bootstrap, aggiornare embedConfig (con almeno accessToken e embedUrl).

Demo angular

Il repository Angular include una demo che incorpora un report di esempio usando il componente PowerBIReportEmbed. Illustra il flusso completo dal bootstrap del report, all'incorporamento e all'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. Imposta anche un evento 'DataSelected'.

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

Gif animata che mostra la demo di Power BI Angular.

Eseguire la demo

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

Eseguire i comandi seguenti:
```
npm run demo
```
Per visualizzare nel browser, reindirizzarlo a http:/localhost:4200/.

Condividi tramite