Incorporare un elemento di Power BI in un'applicazione React
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 power BI React supporta JavaScript e TypeScript e consente di incorporare l'analisi in un'applicazione Web React.
La libreria React consente di incorporare gli elementi di Power BI seguenti:
- Report
- Dashboard
- I riquadri del dashboard
- Oggetti visivi del report
- Domande e risposte
Come incorporare un elemento di Power BI in un'app Web di 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 readme di Power BI React.
Importare la libreria di React
Il componente di Power BI React è disponibile in NPM. È anche open source in GitHub.
Per importare React nell'app Web, aggiungere le importazioni elencate di seguito.
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
Incorporare il report con React
In questo esempio viene illustrato come incorporare un report di Power BI usando React. Nell'esempio seguente è 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 del frammento di codice.
Configurazione di incorporamento : definisce il contenuto incorporato e specifica le impostazioni del contenuto. La configurazione di incorporamento cambia quando si incorporano gli elementi di Power BI seguenti:
eventHandlers : oggetto map 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 del iframe incorporato usando CSS.
getEmbedComponent : callback che consente di ottenere l'istanza incorporata, in modo che sia possibile usare tutte le API consentite dalla libreria client di Power BI. Ad esempio, quando si incorpora un report, si otterrà un'istanza della classe Report .
Bootstrap un componente
powerbi.bootstrap è un metodo usato per aiutare gli sviluppatori ad incorporare gli elementi di Power BI più velocemente e ottenere prestazioni migliori. Per altre informazioni, vedere Usare bootstrap per migliorare le prestazioni.
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 avvio di un report, l'incorporamento e l'aggiornamento del report incorporato. Illustra anche l'utilizzo della libreria di creazione di report powerbi eliminando un oggetto visivo da un report facendo clic sul pulsante Elimina un oggetto visivo .
Per altre informazioni, vedere la sezione demo del file readme .
Esecuzione della demo
La demo è una sottocartella nel repository. Per eseguire la demo in localhost, seguire questa procedura:
Eseguire i comandi seguenti:
npm run install:demo npm run demoPer visualizzare nel browser, reindirizzarlo a
http:/localhost:8080/.