Incorporer un élément Power BI dans une application React

  • Article

Lorsque vous créez une application d’analytique incorporée Power BI, React peut 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 de l’incorporation 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
  • Vignettes du tableau de bord
  • Visuels de rapport
  • Q&A

Comment incorporer un élément Power BI dans une application web React

Cette section explique comment importer React dans votre application et l’utiliser pour incorporer un rapport Power BI.

Pour obtenir des informations détaillées sur l’utilisation, consultez le fichier readme React power BI React .

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 :

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 de 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 de mappage 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 l’instance incorporée, 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.

Démarrage 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 de meilleures performances.

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 référentiel React comprend une démonstration qui illustre le flux complet d’amorçage 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 powerbi en supprimant un visuel d’un rapport en cliquant sur le bouton Supprimer un visuel.

Pour plus d’informations, consultez la section démonstration du fichier lisez-moi.

un gif animé qui montre la démonstration Power B I React.

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 :

  1. Exécutez les commandes suivantes :

    npm run install:demo
npm run demo

  2. Pour afficher votre navigateur, redirigez-le vers http:/localhost:8080/.

Contenu connexe