Partager via

Incorporer du contenu Power BI dans une application Angular

Lors de la création d’une application d’analytique incorporée Power BI, Angular peut aider à configurer rapidement une application évolutive et gérable. Angular ajoute des modèles de structure et de conception au développement frontal, ce qui permet aux développeurs de créer des applications web plus avancées plus faciles à gérer et à mettre à jour.

La bibliothèque Angular Power BI vous permet d’incorporer les éléments Power BI suivants dans votre application Angular :

  • Rapports
  • Tableaux
  • Vignettes du tableau de bord
  • Visuels de rapport
  • Questions et réponses
  • Rapports paginés

Comment incorporer du contenu Power BI dans une application web Angular

Cette section explique comment importer Angular 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 Power BI Angular.

Importer la bibliothèque Angular

Vous trouverez le composant Angular Power BI sur NPM. Il est également open source sur GitHub .

Pour importer Angular dans votre application web, ajoutez les importations répertoriées ci-dessous.

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

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

Incorporer le rapport avec Angular

Cet exemple montre comment incorporer un rapport Power BI à l’aide d’Angular. Vous trouverez ci-dessous une description de chaque composant dans l’exemple de code.

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

La liste suivante inclut des descriptions ou des informations supplémentaires pour chaque composant de l’exemple d’extrait de code.

  • embedConfig : 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.

  • phasedEmbedding : améliore l’expérience de l’utilisateur final en donnant aux développeurs davantage de flexibilité pour l’incorporation de rapports de phase. Pour plus d’informations, consultez Utiliser l’incorporation par phases.

Démarrage d’un rapport Power BI

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.

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

Pour incorporer le rapport après démarrage, mettez à jour l’embedConfig (avec au moins accessToken et embedUrl).

Démonstration Angular

Le référentiel Angular inclut une démonstration qui incorpore un exemple de rapport à l’aide du composant PowerBIReportEmbed. Il illustre le flux complet de démarrage du rapport, de l’incorporation et de la 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. Il définit également un événement « DataSelected ».

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

un gif animé qui montre la démonstration Angular power BI.

Exécuter 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 demo

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

Contenu connexe

  • Last updated on