Ajouter un rapport ou un tableau de bord Power BI à une page web dans un portail

Notes

À compter du 12 octobre 2022, le portail Power Apps devient Power Pages. Plus d’informations : Microsoft Power Pages est maintenant généralement disponible (blog)
Nous allons bientôt migrer et fusionner la documentation des portails Power Apps avec la documentation de Power Pages.

Conseil

Cet article explique comment ajouter un rapport ou un tableau de bord Power BI à l’aide de la balise Liquid powerbi. Pour ajouter le composant Power BI à une page web de votre portail à l’aide des portails Studio, accédez à Ajouter un composant Power BI à une page web à l’aide des portails Studio.

Vous pouvez ajouter un rapport ou un tableau de bord Power BI à une page web sur le portail à l’aide de la balise Liquid powerbi. Utilisez la balise powerbi dans le champ Copier sur une page Web ou dans le champ Source sur un modèle Web.

Si vous ajoutez un rapport ou un tableau de bord Power BI créé dans le nouvel espace de travail de Power BI, vous devez spécifier le type d’authentification comme powerbiembedded dans la balise Liquid powerbi.

Notes

  • Si vous avez spécifié le AAD comme type d’authentification dans la balise Liquid powerbi, vous devez le partager avec les utilisateurs requis pour pouvoir ajouter le rapport ou le tableau de bord sécurisé Power BI à une page web dans le portail. Pour plus d’informations : Partager l’espace de travail Power BI et Partager le tableau de bord et le rapport Power BI.
  • powerbiembedded prend en charge les tableaux de bord et rapports Power BI qui se connectent à Azure Analysis Services. Vous pouvez également utiliser la propriété « customdata » dans le code liquide pour transmettre la valeur de la propriété CustomData.
  • Les rapports Power BI paginés ne sont pas pris en charge.

Par exemple :

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000001/ReportSection01" %}

Pour savoir comment obtenir un chemin d’accès au tableau de bord et l’ID de la vignette du tableau de bord, reportez-vous aux sections plus loin dans cet article.

Utiliser un tableau de bord ou un rapport en se connectant à Azure Analysis Services

Vous pouvez ajouter l’étiquette Liquid powerbi avec un tableau de bord ou un rapport qui se connecte à Azure Analysis Services.

Pour ajouter un tableau de bord ou un rapport se connectant à Azure Analysis Services, utilisez le paramètre CustomData dans la chaîne de connexion.

Par exemple :

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/<GroupID>/reports/<ReportID>" roles:"<roles associated with report>" customdata:"<customdata>" %}

La balise customdata peut être configurée sous forme de chaîne ou générée dynamiquement en fonction d’un attribut d’objet, en utilisant un point (".") ou des crochets ("[]") pour séparer l’objet et l’attribut, entre deux paires de boucles supports.

Exemples :

  • customdata: {{ object.attribute }}
  • customdata: {{ object[attribute] }}

Comme la balise customdata renvoie une chaîne, il peut être nécessaire de convertir cette chaîne en un entier dans la Requête DAX.

Important

Azure Analysis Services et rôles (RLS)

La balise rôles est facultative pour les rapports et tableaux de bord basés sur Azure Analysis Services. Lorsqu’il n’est pas utilisé, le rôle est par défaut le rôle auquel l’application est attribuée dans Azure Analysis Services.

Cependant, cette balise peut devenir nécessaire pour spécifier un certain rôle (ou des rôles) parmi plusieurs rôles disponibles, et peut toujours être requise lors de l’utilisation de la sécurité au niveau des lignes.

Les rôles sont contenus dans la base de données Azure Analysis Services et non dans le rapport lui-même, contrairement à d’autres types de rapports Power BI.

  • Ne fournissant aucun rôle dans le code Liquid.

    Si aucun rôle n’est fourni dans le code Liquid, le rôle Azure Analysis Services sera déterminé par les rôles auxquels l’application a accès et filtrera les résultats en fonction des données personnalisées fournies par rapport à la requête DAX dans les rôles. C’est-à-dire que tous les rôles disponibles combineront leurs accès, mais filtreront toujours si les données personnalisées fournies sont pertinentes. Ce scénario sera le plus souvent le cas avec les rapports Azure Analysis Services ou les tableaux de bord à vignette unique.

  • Fournissant des rôle dans le code Liquid.

    Les rôles Azure Analysis Services peuvent être fournis dans le code Liquid, de la même manière que les rôles RLS. L’utilisation de ces rôles peut être requise lorsque plusieurs rôles sont disponibles, mais vous souhaitez utiliser des rôles spécifiques pour la page. Lorsque vous utilisez des rôles dans la chaîne de connexion, la spécification du rôle Azure Analysis Services est indispensable. Par exemple, des tableaux de bord à plusieurs vignettes qui utilisent des vignettes Azure Analysis Services avec des vignettes RLS.

    Les considérations suivantes s’appliquent lors de l’utilisation de vignettes Azure Analysis Services dans un tableau de bord :

    • Si une vignette Azure Analysis Services est utilisée dans un tableau de bord avec d’autres vignettes qui nécessitent des rôles, le rôle Azure Analysis Services doit être ajouté à la liste des rôles.
    • Plusieurs vignettes de différentes sources Azure Analysis Services peuvent être utilisées avec leurs propres rôles, mais les données personnalisées doivent être les mêmes pour chacune, et plusieurs valeurs de données personnalisées ne peuvent pas être utilisées dans le code Liquid. La balise customdata et le paramètre customdata pour EffectiveIdentity ne prend qu’une valeur de chaîne.

Obtenir le chemin d’accès à un tableau de bord ou à un rapport

  1. Connectez-vous à Power BI.

  2. Ouvrez le tableau de bord ou le rapport que vous souhaitez intégrer à votre portail.

  3. Copiez l’URL de la barre d’adresse.

    Obtenir le chemin d’accès à un tableau de bord Power BI.

Obtenir l’ID d’une vignette du tableau de bord

  1. Connectez-vous à Power BI.

  2. Ouvrez le tableau de bord à partir duquel vous souhaitez intégrer une vignette à votre portail.

  3. Pointez votre curseur en direction de la vignette, sélectionnez Autres options, puis Ouvrir en mode Focus.

    Ouvrir la vignette du tableau de bord Power BI en mode Focus.

  4. Copiez l’identifiant de la vignette depuis l’URL dans la barre d’adresse. L’ID de la vignette est la valeur qui figure après /vignettes/.

    ID de vignette de tableau de bord Power BI.

Comment utiliser la bibliothèque JavaScript powerbi-client dans les portails

Vous pouvez utiliser la bibliothèque JavaScript powerbi-client pour l’incorporation de rapports ou tableaux de bord Power BI Embedded dans votre portail. Pour plus d’informations sur la bibliothèque JavaScript powerbi-client, consultez la page wiki Power BI JavaScript.

Vous trouverez ci-dessous un exemple de JavaScript pour mettre à jour les paramètres du rapport ou pour gérer les événements. Cet exemple désactive le volet de filtre, désactive la navigation de page et active l’événement dataSelected.

Important

  • Utilisez la bibliothèque JavaScript powerbi-client pour désactiver ou activer le volet de filtre. Cependant, si vous souhaitez restreindre l’accès aux données ou configurer la sécurité, utilisez la Sécurité au niveau des lignes (RLS) avec Power BI. La désactivation du volet de filtre ne restreint pas l’accès aux données et peut être réactivé à l’aide du code de la bibliothèque JavaScript.
  • La bibliothèque JavaScript powerbi-client n’est prise en charge que pour les flux Incorporés dans PowerBI.
$(document).ready(function () {
    var embedContainer = $(".powerbi")[0];
    if (embedContainer) {
        var report = powerbi.get(embedContainer);
        report.on("loaded", function () {
            report.updateSettings({
                panes: {
                    filters: {
                        visible: false
                    },
                    pageNavigation: {
                        visible: false
                    }
                }
            }).catch(function (errors) {
                console.log(errors);
            });
        })
    }
});

Pour ajouter du JavaScript personnalisé à une page web :

  1. Ouvrez l’application Gestion du portail.
  2. Sélectionnez Pages web depuis le volet gauche.
  3. Sélectionnez la page web qui contient le rapport ou tableau de bord Power BI.
  4. Sélectionnez l’onglet Avancé.
  5. Copiez et collez le JavaScript dans la section JavaScript personnalisé.
  6. Cliquez sur Enregistrer et fermer.

Maintenant, comprenons les exemples d’opérations JavaScript et les différentes options.

Obtenir une référence au code HTML du rapport intégré

Obtenir une référence au code HTML du rapport intégré.

var embedContainer = $(".powerbi")[0];

Plus d’information : Obtenir une référence à un composant Power BI existant étant donné l’élément contenu

Obtenir une référence au rapport intégré

var report = powerbi.get(embedContainer);

Utiliser des volets Power BI

Vous pouvez utiliser les paramètres des volets avec lesquels utiliser les volets Power BI sur une page web de portails. Par exemple, vous pouvez utiliser le paramètre de filtres pour masquer ou afficher le volet, ou travailler avec le paramètre de navigation de page.

Vous trouverez ci-dessous un exemple pour supprimer le volet des filtres :

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

Vous trouverez ci-dessous un exemple pour travailler à la fois avec la navigation de page et les filtres :

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                },
                pageNavigation:{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

Plus d’information : Mettre à jour les paramètres et Incorporer la configuration – Paramètres

Gérer les événements

Le composant intégré peut émettre des événements lors de l’appel de la fin d’une commande exécutée. Par exemple, voici un exemple de l’événement dataSelected.

//Report.off removes a given event listener if it exists
    report.off("dataSelected");
//Report.on will add an event list
    report.on('dataSelected', function(event){
        console.log('Event - dataSelected:');
        console.log(event.detail);
    })

Plus d’information : Gestion des événements

Voir aussi

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).