Comment intégrer un rapport Power BI embedded dans Power Apps Portal ?

Intégrer un rapport Power BI sur un site Internet comme Power Apps Portal paraît souvent complexe et nécessitant de très nombreuses compétences techniques. Avec Power Apps Portal, c’est beaucoup plus simple et à travers cet article, vous découvrirez toutes les étapes pas à pas. Suites aux questions posées durant la conférence Microsoft Power Platform Bootcamp, j’avais promis que je partagerai l’ensemble des informations dans un article. Le temps passe et je n’ai pas oublié. Alors voici comment faire pour intégrer du Power BI dans Power Apps Portal. Afin de ne rater aucune étape, je commencerai par expliquer comment se connecter facilement au Dataverse depuis Power BI.  Pour la suite, je laisserai la créativité de la création du rapport Power BI à chacun et je montrerai plutôt comment intégrer ce rapport dans un portail web réalisé avec Power Apps Portal.

Voici donc le sommaire :

Se connecter au Dataverse

1. Paramétrage Dataverse dans Power Platform Administration
2. Se connecter avec le fichier pbids
3. Se connecter directement depuis Power BI

Paramétrer Power BI embedded dans le portail

1. Activer visualisation et Power BI embedded
2. Création d’un groupe de sécurité Azure
3. Ajouter l’application comme membre
4. Centre administration Power BI

Insérer le rapport Power BI dans Power Apps Portal

Mise en forme avec Javascript et CSS

Aller plus loin avec le langage Liquid

1. Se connecter au Dataverse

1.1. Paramétrage Dataverse dans Power Platform Administration

Une fois que le site est bien créé, l’étape suivante est de créer un rapport Power BI. Il va donc falloir se connecter au Dataverse. Je vais vous montrer plusieurs façons d’y arriver. Mais avant cela, il est nécessaire de vérifier quelques points de paramétrage dans l’administration Power Platform. Il faut pour cela aller dans l’administration Power Platform (en haut à droite de votre écran) :

Vérifiez les deux points suivants :

1. « Incorporation des visualisations Power BI » doit être activé
2. « Point de terminaison TDS » doit être activé

1.2. Se connecter avec le fichier pbids

A présent, vous allez pouvoir vous connecter au Dataverse avec Power BI. Vous avez plusieurs possibilités, mais la plus simple est l’utilisation du fichier pbids facilement téléchargeable.

Dans Power Apps, allez dans la section Données puis Tables :

Cochez l’option « Importer » si vous souhaitez modifier le mode de connectivité. Il est possible de rester en Direct Query si cela est souhaité.

Vous pouvez alors réaliser le rapport que vous souhaitez afficher dans le portail et le publier sur un espace de travail Power BI.

1.3. Se connecter directement depuis Power BI

La seconde méthode consiste à se connecter directement depuis Power BI.

Ouvrez Power BI. Puis, dans Accueil, cliquer sur Dataverse. Attention, l’icône risque d’être modifié car le logo Dataverse vient lui-même d’être modifié.

2. Paramétrer Power BI embedded dans le portail

2.1. Activer visualisation et Power BI embedded

Le rapport Power BI est prêt et a été publié. Vous devez donc l’intégrer dans le portail de façon à proposer à tous les utilisateurs (internes ou externes) la possibilité de visualiser ce rapport sous condition des autorisations appliquées à chacun.

Cette intégration se fait en 4 étapes. La première est d’activer la visualisation Power BI puis d’ajouter l’espace de travail à intégrer.

Pour ces deux points, il faut aller dans les paramètres de l’application (du portail) puis dans Administration.

2.2. Création d’un groupe de sécurité Azure

Cette étape consiste à créer un groupe de sécurité Azure pour lequel nous allons ajouter le client ID du portail.

Commencez par ouvrir un nouvel onglet de votre navigateur vers l’url suivante : https://portal.azure.com/

Choisissez ensuite Azure Active Directory.

2.3. Ajouter l’application comme membre

Vous allez devoir ajouter l’application comme membre. Pour cela, retournez sur la page Administration du site : https://make.powerapps.com/

Puis dans la partie application, cliquez sur les 3 petits points à côté du portail et choisir paramètres puis administration. Vous pouvez récupérer l’application ID en sélectionnant puis CTRL+C.

2.4. Centre administration Power BI

Il ne reste plus qu’une étape, au niveau du centre d’administration Power BI. Attention, il faut donc être administrateur ou faire la demande à votre administrateur Power BI. Allez à l’adresse suivante : https://app.powerbi.com/admin-portal/tenantSettings

Vous y trouverez de nombreuses options. Descendez jusqu’à trouver la partie dédiée aux développeurs puis ajoutez le groupe de sécurité que vous avez créé. Terminez en cliquant sur Appliquer.

3.Insérer le rapport Power BI dans Power Apps Portal

Sur le volet de gauche, vous allez pouvoir créer votre page et vous aurez ceci :

• Type d’accès (1) : Utilisez un rapport Power BI Embedded, indispensable pour ouvrir l’accès à l’extérieur tout en interdisant le mode public.
• Espace de travail (2) : Définissez l’espace de travail où se trouve le rapport. Vous ne pourrez choisir que des espaces de travail que vous avez ajoutés dans l’étape 1. Activer visualisation et Power BI embedded.
• Type (3) : Rapport ou Tableau de bord
• Rapport (4) : Choisissez le rapport à afficher
• Page (5) : Page du rapport devant être affichée en premier par défaut.
• Autres paramètres (6) : Vous pouvez ajouter des rôles ou des filtres ici. Il est également possible de modifier les filtres directement en langage Liquid.

Votre rapport est intégré, il ne reste plus qu’à publier en cliquant sur « Parcourir le site Web en haut à droite de votre écran.

4.Mise en forme avec Javascript et CSS

4.1. Javascript

Comme vous pouvez le voir, il reste quelques points à corriger pour rendre le rapport un peu plus intégré. Il faudrait par exemple enlever le volet des filtres sur la droite qui ne nous sert pas vraiment. La navigation en bas n’est pas vraiment utile.

Pour supprimer cela, nous allons utiliser un petit script Javascript. Mais n’ayez pas peur car un petit copier / coller suffira à répondre à vos attentes.

Lorsque vous êtes sur le site Web et que vous êtes connecté avec un compte admin, vous pouvez voir une popup qui reste affichée à chaque fois que vous changez de page. Si vous n’arrivez pas à vous connecter en mode Administrateur ou si vous n’arrivez pas à afficher cette popup, je vous montrerai à la fin de cette section comment faire autrement.

$( document ).ready(function() { 

  var rpEle = $('.portal-pbi-embedded'); 

  // sélectionner l’élément de rapport  

  var report = powerbi.get(rpEle[0]); 
  // Récupérer l’instance du rapport 

  // Nous souhaitons mettre à jour les paramètres lorsque le rapport est chargé. 

  report.on("loaded", function () { 

    const newSettings = { 

      panes: { 

      filters :{ 

        visible: false  
 // Masquer le volet filtre  

      }, 

      pageNavigation:{ 

        visible: false // Masquer la page navigation 

      } 

    } 

  }; 

  report.updateSettings(newSettings) 

    .catch(error => { console.log(error) }); 

  }); 

});

filters : 

{ 

    visible: false // Masquer le volet filtre 

}, 

pageNavigation: 

{ 

    visible: false // Masquer la page navigation 

}

$( document ).ready(function() { 

  var rpEle = $('.portal-pbi-embedded'); // Sélectionner l'élément du rapport 

  var report = powerbi.get(rpEle[0]); // Récupérer l'instance du rapport 

  // Nous souhaitons mettre à jour les paramètres lorsque le rapport est chargé 

  report.on("loaded", function () { 

  const newSettings = { 

    panes: { 

     filters:{ 

        expanded: false, // Si le filtre n'est pas masqué, il est replié par défaut 

        visible: false // Masquer le volet filtre 

      }, 

      pageNavigation: { visible: false }, // Masquer la navigation (barre du bas) 

      bookmarks: { visible: true }, // Afficher les signets 

      fields: { expanded: false }, 

      selection: { visible: true }, 

      syncSlicers: { visible: true }, 

      visualizations: { expanded: false } 

    } 

  }; 

  report.updateSettings(newSettings) 

    .catch(error => { console.log(error) }); 

  }); 

});

4.2. CSS

Comme vous venez de le voir, il reste encore un encadrement autour du visuel Power BI. Cela peut être modifié grâce au CSS. Il faut faire exactement la même manipulation que pour le Javscript mais au lieu de copier le code dans la zone Javascript, il faut le faire juste au-dessous dans la zone CSS, en notant le code suivant :

iframe { 

  border: none; 

}

5.Allez plus loin avec le langage Liquid

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> 

<div class="container" style="display: flex; flex-wrap: wrap;"> 

<div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
 
{% powerbi authentication_type:"powerbiembedded"  
path:"https://app.powerbi.com/groups/78845d2c-8b06-4f07-95d2-a2421d31b7bb/reports/1ae8d7d6-546e-451b-9883-c93ee7100d64/ReportSection" %} 

</div> 

</div> 

</div> 

• powerbi authentication_type: pour le type d’intégration
• path: lien pour accéder au rapport.

Voici un extrait de code que j’ai utilisé pour un projet. Pour l’utilisateur connecté (UserId), je recherche l’IdClient dans les tables Dataverse. Ensuite, et c’est la partie importante, j’initialise mon chemin Power BI grâce à la fonction « capture ». Enfin, j’affiche le rapport avec la fonction « powerbi ».

{% assign UserId =user.Id%} 

{% entityview logical_name:'crc5c_pi_userparameters', name:"Active PI_UserParametersLiquid" %} 

{% assign onlyone = entityview.records | where: 'crc5c_userguid', UserId | take: 1 %} 

{% for item in onlyone %} 

{% assign ReportNameClient=item.new_crc5c_pi_clients_crc5c_pi_userparameters.crc5c_name %} 

{% capture pbi_path %} 
https://app.powerbi.com/groups/de5df1f2-ae08-4138-b12e-142f0f7b8bad/reports/d7077ddc-f80a-4c01-b38f-dda9fc38fd3e/ReportSectionf36918ae584ae6d6e8e9?filter=Clients/CodeClientNeoreeds eq '{{item.new_crc5c_pi_clients_crc5c_pi_userparameters.crc5c_pi_clientsid}}' 
{% endcapture %} 

{% powerbi authentication_type:"powerbiembedded" path:pbi_path %} 

{% endfor %} 

{% endentityview %}

Et voilà !

Vous savez maintenant comment intégrer un rapport Power BI dans Power Apps Portal ! N’hésitez pas à poser vos questions en commentaires.

Auteur

Plus d’articles Microsoft Power Platform