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.

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

Sélectionnez ensuite l’environnement sur lequel vous êtes et copiez le lien de l’environnement (utile pour plus tard) afin de le mettre de côté.
Allez ensuite dans Paramètres > Produits > Fonctionnalités

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 :

L’astuce est à présent de cliquer sur Données puis « Analyser dans Power BI ». Cela permet de télécharger le fichier de connexion au format .pbids.
Il suffit ensuite de l’ouvrir pour ouvrir Power BI et se connecter directement à Dataverse.
Sélectionnez la ou les tables souhaitées et transformez les données. Attention, vous êtes à ce moment-là connectés en Direct Query. Pour repasser en mode « Importer », il faut aller dans les étapes de la requête et cliquer sur le bouton paramètre de la première étape « Source ».

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

Après, renseignez le domaine, c’est-à-dire l’url que vous avez enregistrée un peu plus tôt.
Pour le suite, c’est comme à l’étape précédente. Choisissez le type de connectivité « Importer » ou « Direct Query ».

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.

A présent, paramétrez la partie Intégration Power BI :
D’abord, activez la visualisation en cliquant sur le bouton de gauche et confirmez.
Cliquez sur le deuxième bouton et y ajoutez l’espace de travail où se trouve le rapport Power BI que vous avez publié :
Sauvegardez pour finaliser ce premier point de paramétrage.

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.

Sur le volet de gauche, allez dans GROUPS puis choisir NEW GROUP en haut. Il faut remplir les deux éléments suivants :
Vous pouvez mettre les éléments que vous souhaitez dans ces deux zones de formulaires.  Une fois terminé, cliquez sur CREATE tout en bas de l’écran. Le groupe a bien été rajouté :

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.

Revenez ensuite sur le portail Azure, et cliquez sur le groupe que vous avez créé à l’étape précédente. Cliquez sur Members (Preview).
Et cliquez sur le bouton ADD MEMBERS (Ajouter un membre) en haut de la page. Un volet sur la droite va s’afficher et vous devrez y rentrer l’APPLICATION ID que vous avez copié précédemment.
Sélectionnez-le et enregistrez en cliquant sur SELECT en bas du volet.

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

Tout est prêt : le rapport et les paramétrages. Vous pouvez créer la page web dans le portail et ajouter le rapport. Allez sur https://make.powerapps.com/ puis dans la partie applications, modifiez le portail. Vous ouvrez alors le Portal Studio.

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

Pour ajouter un rapport, sélectionnez la zone où vous souhaitez l’ajouter (1) puis dans le volet de gauche, cliquez sur Power BI :
Remplir le volet de droite avec les éléments suivants :
  • 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.

Cliquez sur Edit pour voir afficher une autre fenêtre dans laquelle vous pouvez ajouter du Javascript.
Copiez ensuite le code suivant dans la zone « Custom Javascript » puis sauvegardez :
$( 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) });
});
});
Le volet et la partie navigation ont bien disparu :
Sur ce code, vous pouvez voir en particulier deux parties qui permettent d’afficher ou masquer le volet filtre et la navigation en bas du visuel. Comme nous souhaitons masquer ces deux parties, les valeurs sont donc « false »
filters : 
{
visible: false // Masquer le volet filtre
},
pageNavigation:
{
visible: false // Masquer la page navigation
}
A noter qu’il existe bien d’autres options de paramétrage : https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details
Lorsque vous enregistrez ces mises à jour, vous les enregistrez au niveau du site. Vous pouvez les retrouver / modifier au niveau du paramétrage du site. Pour y aller depuis la page Power Apps, allez dans Applications (volet de gauche), choisissez ensuite l’application nommée « Portal Management ». Ensuite, dans les pages web (volet de gauche), cliquez sur la page où se trouve Power BI puis cliquez sur l’onglet « Avancé » (Advanced) comme ci-dessous :
$( 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;
}
Après avoir sauvegardé, le rapport est totalement intégré dans la page web du portail :

5.Allez plus loin avec le langage Liquid

Nous n’avons pas encore retravaillé les filtres ou les rôles dans Power BI, ni l’intégration directement en liquid. Pour voir ce que nous avons fait jusqu’ici, en liquid, voici ce que cela donne :
<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>
Ce qui est important est la partie entre les accolades et le signe % car il s’agit du langage Liquid. Nous pouvons décomposer la formule en plusieurs parties :

  • 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 ».

Pour en savoir plus sur les fonctions liquid et liquid pour power bi : https://docs.microsoft.com/fr-fr/powerapps/maker/portals/liquid/portals-entity-tags
{% 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

Jérémy Laplaine

Jérémy Laplaine

Expert Power Platform

Plus d’articles Microsoft Power Platform

Power BI : changer d’indicateur facilement grâce aux segments

Comment afficher un visuel sous plusieurs angles différents ?
Par exemple, comment passer d’un montant à un volume ?

En utilisant les segments de Microsoft Power BI et la fonction Switch, ce tutoriel vous accompagne pas à pas pour réaliser un visuel avec un affichage alternatif.

▶ Intégrer Power Apps Portal, Dataverse et Power BI !

Conférence de Jérémy Laplaine et Gilles Pommier sur l’intégration Power Apps Portal, Dataverse et Power BI au Power Platform French Summit

▶ Créer un site web externe avec Power Apps Portal & Power BI – Conférence au Club Power BI

Conférence de Jérémy Laplaine au club Power BI du 12-04-2021 – Créer un site web externe avec Power Apps Portal & Power BI

Simulation et scénario avec Power BI

Power BI est un outil décisionnel de visualisation interactive des données. Une fonctionnalité très puissante est la création de simulations. A travers un exemple simple, nous allons voir comment faire.

▶ Vidéo Power BI – Mise en forme conditionnelle sur les courbes

Tuto : comment changer la mise en forme d’une courbe Power BI, par exemple la couleur, selon une condition.

▶ Vidéo Power BI – Mapping of things

Mettez en place du mapping of things Synoptic Panel sur Power BI avec Jérémy Laplaine, expert Power Platform.

▶ Tuto – Mettre en forme les cartes d’une galerie Power Apps en 2 min

Tuto : changer le style des cartes d’une galerie Power Apps en 2 minutes.

▶ Power Apps Portal + CDS + Power BI : le combo gagnant !

Conférence de Jérémy Laplaine et Gilles Pommier – Retour d’expérience Power Apps Portal au Global Microsoft 365 Developer Bootcamp

▶ Power Saturday 2020 – Réaliser un site web Microsoft Power Platform

Retour d’expérience de Jérémy Laplaine et Gilles Pommier

Creation d’un portail web Power Apps Portal avec des connexions tiers (Google, Facebook…) en utilisant pleinement les fonctionnalités de Microsoft Power Platform

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *