Intégrer un tableau de bord dans une application pour votre organisationIntegrate a dashboard into an app for your organization

Découvrez comment intégrer (ou incorporer) un tableau de bord dans une application web en utilisant des appels d’API REST, ainsi que l’API JavaScript Power BI, lorsque l’incorporation s’adresse à votre organisation.Learn how to integrate, or embed, a dashboard into a web app using REST API calls along with the Power BI JavaScript API when embedding for your organization.

Tableau de bord incorporé

Pour vous familiariser avec cette procédure pas à pas, vous avez besoin d’un compte Power BI.To get started with this walkthrough, you need a Power BI account. Si vous n’avez pas de compte, vous pouvez demander gratuitement un compte Power BI ou vous pouvez créer votre propre locataire Azure Active Directory à des fins de test.If you don't have an account, you can sign up for a free Power BI account, or you can create your own Azure Active Directory tenant for testing purposes.

Note

Vous souhaitez plutôt incorporer un tableau de bord pour vos clients, à l’aide d’un jeton d’incorporation ?Looking to embed a dashboard for your customers, using an embedtoken, instead? Consultez Intégrer un tableau de bord, une vignette ou un rapport dans votre application pour vos clients.See, Integrate a dashboard, tile, or report into your application for your customers.

Pour intégrer un tableau de bord à une application web, vous utilisez l’API REST Power BI ou le SDK Power BI C# et un jeton d’accès d’autorisation Azure Active Directory (AD) pour obtenir un tableau de bord.To integrate a dashboard into a web app, you use the Power BI REST API, or the Power BI C# SDK, and an Azure Active Directory (AD) authorization access token to get a dashboard. Vous chargez ensuite le tableau de bord en utilisant le même jeton d’accès.Then, you load the dashboard using the same access token. L’API Power BI fournit un accès par programme à certaines ressources Power BI.The Power BI API provides programmatic access to certain Power BI resources. Pour plus d’informations, consultez Vue d’ensemble de l’API REST Power BI et API JavaScript Power BI.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Télécharger l’exempleDownload the sample

Cet article explique le code utilisé dans l’exemple d’intégration d’application web de tableau de bord sur GitHub.This article shows the code used in the integrate-dashboard-web-app on GitHub. Pour suivre cette procédure pas à pas, vous pouvez télécharger l’exemple.To follow along with this walkthrough, you can download the sample.

Étape 1 - Inscrire une application dans Azure ADStep 1 - register an app in Azure AD

Vous devez inscrire votre application avec Azure AD afin d’effectuer des appels d’API REST.You will need to register your application with Azure AD in order to make REST API calls. Pour plus d’informations, consultez Inscrire une application Azure AD pour incorporer du contenu Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Si vous avez téléchargé l’exemple d’intégration de tableau de bord, vous utilisez l’ID client et le secret du client que vous obtenez, après votre inscription, pour que l’exemple puisse s’authentifier auprès d’Azure AD.If you downloaded the Integrate a dashboard sample, you use the Client ID and Client Secret you get, after registration, so that the sample can authenticate to Azure AD. Pour configurer l’exemple, modifiez l’ID client et le secret du client dans le fichier cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.config file.

Étape 2 : obtenir un jeton d’accès à partir d’Azure ADStep 2 - get an access token from Azure AD

Dans votre application, vous devez d’abord obtenir un jeton d’accès, à partir d’Azure AD, avant de pouvoir effectuer des appels d’API REST Power BI.Within your application, you will first need to get an access token, from Azure AD, before you can make calls to the Power BI REST API. Pour plus d’informations, consultez Authentifier des utilisateurs et obtenir un jeton d’accès Azure AD pour votre application Power BI.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Étape 3 : obtenir un tableau de bordStep 3 - get a dashboard

Pour obtenir un tableau de bord Power BI, vous utilisez l’opération Obtenir des tableaux de bord opération qui obtient une liste de tableaux de bord Power BI.To get a Power BI dashboard, you use the Get Dashboards operation which gets a list of Power BI dashboards. Dans la liste des tableaux de bord, vous pouvez obtenir un ID de tableau de bord.From the list of dashboards, you can get a dashboard id.

Obtenir des tableaux de bord avec un jeton d’accèsGet dashboards using an access token

En utilisant le jeton d’accès récupéré à l’Étape 2, vous pouvez appeler l’opération Get Dashboards.With the access token you retrieved in step 2, you can call the Get Dashboards operation. L’opération Obtenir des tableaux de bord renvoie la liste des tableaux de bord.The Get Dashboards operation returns a list of dashboards. Vous ne pouvez récupérer qu’un seul tableau de bord dans cette liste.You can get a single dashboard from the list of dashboards. Voici une méthode C# complète pour obtenir un tableau de bord.Below is a complete C# method to get a dashboard.

Pour effectuer l’appel d’API REST, vous devez inclure un en-tête d’autorisation au format Porteur {jeton d’accès}.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Obtenir des tableaux de bord avec l’API RESTGet dashboards with the REST API

Default.aspx.csDefault.aspx.cs

protected void getDashboardsButton_Click(object sender, EventArgs e)
{
    string responseContent = string.Empty;

    //Configure dashboards request
    System.Net.WebRequest request = System.Net.WebRequest.Create(String.Format("{0}dashboards", baseUri)) as System.Net.HttpWebRequest;
    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", authResult.AccessToken));

    //Get dashboards response from request.GetResponse()
    using (var response = request.GetResponse() as System.Net.HttpWebResponse)
    {
        //Get reader from response stream
        using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
        {
            responseContent = reader.ReadToEnd();

            //Deserialize JSON string
            PBIDashboards PBIDashboards = JsonConvert.DeserializeObject<PBIDashboards>(responseContent);

            if (PBIDashboards != null)
            {
                var gridViewDashboards = PBIDashboards.value.Select(dashboard => new {
                    Id = dashboard.id,
                    DisplayName = dashboard.displayName,
                    EmbedUrl = dashboard.embedUrl
                });

                this.GridView1.DataSource = gridViewDashboards;
                this.GridView1.DataBind();
            }
        }
    }
}

//Power BI Dashboards used to deserialize the Get Dashboards response.
public class PBIDashboards
{
    public PBIDashboard[] value { get; set; }
}
public class PBIDashboard
{
    public string id { get; set; }
    public string displayName { get; set; }
    public string embedUrl { get; set; }
    public bool isReadOnly { get; set; }
}

Obtenir des tableaux de bord à l’aide du SDK .NETGet dashboards using the .NET SDK

Le SDK .NET permet de récupérer une liste de tableaux de bord au lieu d’appeler directement l’API REST.You can use the .NET SDK to retrieve a list of dashbaords instead of calling the REST API directly.

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using Microsoft.PowerBI.Api.V2;
using Microsoft.PowerBI.Api.V2.Models;

var tokenCredentials = new TokenCredentials(<ACCESS TOKEN>, "Bearer");

// Create a Power BI Client object. It will be used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
    // Get a list of dashboards your "My Workspace"
    ODataResponseListDashboard dashboards = client.Dashboards.GetDashboards();

    // Get a list of dashboards from a group (app workspace)
    ODataResponseListDashboard dashboards = client.Dashboards.GetDashboardsInGroup(groupId);

    Dashboard dashboard = dashboards.Value.FirstOrDefault();

    var embedUrl = dashboard.EmbedUrl
}

Étape 4 - Charger un tableau de bord à l’aide de JavaScriptStep 4 - load a dashboard using JavaScript

Vous pouvez utiliser JavaScript pour charger un tableau de bord dans un élément div sur votre page web.You can use JavaScript to load a dashboard into a div element on your web page.

Default.aspxDefault.aspx

<!-- Embed Dashboard-->
<div> 
    <asp:Panel ID="PanelEmbed" runat="server" Visible="true">
        <div>
            <div><b class="step">Step 3</b>: Embed a dashboard</div>

            <div>Enter an embed url for a dashboard from Step 2 (starts with https://):</div>
            <input type="text" id="tb_EmbedURL" style="width: 1024px;" />
            <br />
            <input type="button" id="bEmbedDashboardAction" value="Embed Dashboard" />
        </div>

        <div id="dashboardContainer"></div>
    </asp:Panel>
</div>

Site.masterSite.master

window.onload = function () {
    // client side click to embed a selected dashboard.
    var el = document.getElementById("bEmbedDashboardAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedDashboard, false);
    } else {
        el.attachEvent('onclick', updateEmbedDashboard);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded dashboard if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedDashboard();
    }
};

// update embed dashboard
function updateEmbedDashboard() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    if (embedUrl === "")
        return;

    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the dashboard.
    var dashboardContainer = document.getElementById('dashboardContainer');

    // Embed the dashboard and display it within the div container.
    var dashboard = powerbi.embed(dashboardContainer, config);

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("tileClicked", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });
}

Si vous avez téléchargé et exécuté l’exemple d’intégration de tableau de bord, l’exemple se présente comme ci-dessous.If you downloaded and ran the Integrate a dashboard sample, the sample will look similar to below.

Événements relatifs à une vignette sur laquelle un utilisateur a cliquéTile clicked events

Dans l’exemple ci-dessus, vous avez peut-être remarqué que vous pouvez gérer les événements quand un utilisateur clique sur la vignette du tableau de bord.In the sample above, you may have noticed that you can handle events when the tile is clicked on the dashboard. Pour plus d’informations sur les événements, consultez Gestion des événements dans l’API JavaScript.For more information about events, see Handling Events within the JavaScript API.

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("tileClicked", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("error", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Error<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

Si vous avez téléchargé et exécuté l’exemple d’intégration de tableau de bord, le fait de cliquer sur une vignette génère du texte sous le tableau de bord.If you downloaded and ran the Integrate a dashboard sample, clicking on a tile will output text below the dashboard. Le texte ressemble à ce qui suit.The text will look similar to the following. Cela vous permet de journaliser le fait qu’un utilisateur a cliqué sur une vignette, puis de diriger l’utilisateur vers l’emplacement adéquat.This would allow you to log that a tile was clicked, and then navigate the user to the appropriate location.

Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "", "navigationUrl": "https://app.powerbi.com/dashboards/fcff76f9-15ff-4a8e-8242-275ac9c25b90/qna?q=count%20of%20new%20hires%20from%20July%202014%20to%20December%202014", "tileId": "0e99b45c-9b53-4920-b239-cee7d37d2369" }
---------
Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "https://app.powerbi.com/reportEmbed?reportId=ab199308-80b1-4626-9823-43a84623bd9c", "navigationUrl": "https://app.powerbi.com/reports/ab199308-80b1-4626-9823-43a84623bd9c/ReportSection1", "tileId": "ffc30447-674a-4511-944f-79e182d719de", "pageName": "ReportSection1" }
---------

Utilisation des groupes (espaces de travail d’application)Working with groups (app workspaces)

Pour incorporer un tableau de bord à partir d’un groupe (espace de travail d’application), obtenez la liste de tous les tableaux de bord disponibles au sein d’un groupe à l’aide de l’appel d’API REST suivant.For embedding a dashboard from a group (app workspace), you will want to get the list of all available dashboards within a group using the following REST API call. Pour plus d’informations sur cet appel d’API REST, consultez Obtenir des tableaux de bord.To find more information about this REST API call, see Get Dashboards. Vous devez avoir l’autorisation requise dans le groupe pour que la requête puisse retourner les résultats.You will need to have permission in the group for the request to return results.

https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards

L’API ci-dessus renvoie la liste des tableaux de bord disponibles.The above API returns the list of the available dashboards. Chaque tableau de bord a une propriété EmbedUrl qui est déjà créée pour prendre en charge l’incorporation de groupe.Each dashboard has an EmbedUrl property which is already constructed to support group embedding.

https://app.powerbi.com/dashboardEmbed?dashboardId={dashboardId}&groupId={groupId}

LimitesLimitations

  • Les utilisateurs finaux qui accèdent aux tableaux de bord incorporés doivent avoir un compte Power BI et une autorisation d’accès au tableau de bord.The end users who access the embedded dashboards must have a Power BI account and have access to the dashboard. Ils sont propriétaires du tableau de bord ou le tableau de bord a été partagé avec l’utilisateur.Either they own the dashboard or the dashboard was shared with the user.
  • La fonctionnalité Questions et réponses n’est actuellement pas prise en charge dans les tableaux de bord incorporés.Currently Q&A is not supported in embedded dashboards.
  • Voici une limitation temporaire : quand vous partagez un tableau de bord avec des groupes de sécurité, l’utilisateur doit tout d’abord accéder aux tableaux de bord dans PowerBI.com avant de les voir incorporés.As a temporary limitation, when sharing a dashboard with security groups, user have to first access the dashboards in PowerBI.com before they can see it embedded.

Étapes suivantesNext steps

Vous pouvez examiner un exemple d’application sur GitHub.A sample application is available on GitHub for you to review. Les exemples ci-dessus sont basés sur cet exemple.The above examples are based on that sample. Pour en savoir plus, consultez l’exemple d’intégration d’application web de tableau de bord.For more information, see integrate-dashboard-web-app.

Pour en savoir plus sur l’API JavaScript, consultez API JavaScript Power BI.More information is available for the JavaScript API, see Power BI JavaScript API.

D’autres questions ?More questions? Essayez d’interroger la communauté Power BITry asking the Power BI Community