Incorporer un élément Power BI dans une application React
Lorsque vous créez une application d’analytique incorporée Power BI, React pouvez vous aider à optimiser les performances avec l’intégration de démarrage, tout en utilisant toutes les API côté client, y compris la création de rapports. Il simplifie également la gestion du cycle de vie incorporé Power BI dans votre application. Le composant Power BI React prend en charge JavaScript et TypeScript et vous aide à incorporer votre analytique dans une application web React.
La bibliothèque React vous permet d’incorporer les éléments Power BI suivants :
- Rapports
- Tableaux de bord
- Mise à jour des vignettes de tableau de bord
- Visuels de rapport
- Questions et réponses
Comment incorporer un élément Power BI dans une application web React
Cette section explique comment importer des React dans votre application et les utiliser pour incorporer un rapport Power BI.
Pour plus d’informations sur l’utilisation, consultez le fichier Lisez-moi React Power BI.
Importer la bibliothèque React
Le composant power BI React se trouve sur NPM. Il est également open source sur GitHub.
Pour importer React dans votre application web, ajoutez les importations répertoriées ci-dessous.
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
Incorporer le rapport avec React
Cet exemple montre comment incorporer un rapport Power BI à l’aide de React. Sous l’exemple, vous trouverez une description pour chaque composant dans l’exemple de code.
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;
}
}
La liste suivante inclut des descriptions ou des informations supplémentaires pour chaque composant dans l’exemple d’extrait de code.
Configuration d’incorporation : définit le contenu que vous incorporez et spécifie les paramètres du contenu. La configuration incorporée change lorsque vous incorporez les éléments Power BI suivants :
eventHandlers : objet map pour les noms d’événements et leurs gestionnaires. Pour plus d’informations, consultez Comment gérer les événements .
cssClassName : donne à l’élément incorporé un nom de classe CSS qui vous permet de contrôler le style de l’iframe incorporé à l’aide de CSS.
getEmbedComponent : rappel qui vous aide à obtenir les instance incorporés, afin que vous puissiez utiliser toutes les API que la bibliothèque cliente Power BI autorise. Par exemple, lors de l’incorporation d’un rapport, vous obtenez une instance de la classe Report.
Amorçage d’un composant
powerbi.bootstrap est une méthode utilisée pour aider les développeurs à incorporer des éléments Power BI plus rapidement et à obtenir de meilleures performances. Pour plus d’informations, consultez Utiliser le démarrage pour améliorer le niveau de performance.
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
}
}
démonstration React
Le dépôt React inclut une démonstration qui illustre le flux complet de démarrage d’un rapport, d’incorporation et de mise à jour du rapport incorporé. Il illustre également l’utilisation de la bibliothèque de création de rapports powerbi en supprimant un visuel d’un rapport en cliquant sur le bouton Supprimer un visuel .
Pour plus d’informations, consultez la section de démonstration du fichier Lisez-moi .
Exécution de la démonstration
La démonstration est un sous-dossier dans le référentiel. Pour exécuter la démonstration sur localhost, procédez comme suit :
Exécutez les commandes suivantes :
npm run install:demo npm run demoPour afficher dans votre navigateur, redirigez-le vers
http:/localhost:8080/.