Integrare un dashboard in un'app per l'organizzazioneIntegrate a dashboard into an app for your organization

Informazioni su come integrare o incorporare un dashboard in un'app Web con chiamate all'API REST insieme all'API JavaScript di Power BI durante l'incorporamento per l'organizzazione.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.

Dashboard incorporato

Per eseguire questa procedura dettagliata, è necessario un account Power BI.To get started with this walkthrough, you need a Power BI account. Se non si ha un account, è possibile iscriversi per ottenere un account Power BI gratuito oppure creare il proprio tenant di Azure Active Directory a scopo di 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.

Nota

Se invece si vuole incorporare un dashboard per i clienti usando un embedtoken,Looking to embed a dashboard for your customers, using an embedtoken, instead? vedere Integrare un dashboard, un riquadro o un report nell'applicazione per i clienti.See, Integrate a dashboard, tile, or report into your application for your customers.

Per integrare un dashboard in un'app Web, usare l'API REST di Power BI o Power BI C# SDK e un token di accesso di un'autorizzazione di Azure Active Directory (AD) per ottenere un dashboard.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. Caricare quindi il dashboard usando lo stesso token di accesso.Then, you load the dashboard using the same access token. L'API Power BI fornisce l'accesso a livello di codice a determinate risorse di Power BI.The Power BI API provides programmatic access to certain Power BI resources. Per altre informazioni, vedere Panoramica dell'API REST di Power BI e Power BI JavaScript API (API JavaScript di Power BI).For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Scaricare l'esempioDownload the sample

Questo articolo illustra il codice usato in integrate-dashboard-web-app su GitHub.This article shows the code used in the integrate-dashboard-web-app on GitHub. Per proseguire con questa procedura dettagliata, è possibile scaricare l'esempio.To follow along with this walkthrough, you can download the sample.

Passaggio 1: Registrare un'app in Azure ADStep 1 - register an app in Azure AD

Sarà necessario registrare l'applicazione in Azure AD per effettuare chiamate all'API REST.You will need to register your application with Azure AD in order to make REST API calls. Per altre informazioni, vedere Registrare un'app di Azure AD per incorporare il contenuto di Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Se è stato scaricato l'esempio di integrazione di un dashboard, usare l'ID Client e il segreto client ottenuti dopo la registrazione in modo che l'esempio possa autenticarsi con 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. Per configurare l'esempio, modificare l'ID client e il Segreto client nel file cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.config file.

Passaggio 2: Ottenere un token di accesso da Azure ADStep 2 - get an access token from Azure AD

Nell'applicazione è prima di tutto necessario ottenere un token di accesso da Azure AD prima di effettuare chiamate all'API REST di 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. Per altre informazioni, vedere Autenticare gli utenti e ottenere un token di accesso di Azure AD per l'app Power BI.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Passaggio 3: Ottenere un dashboardStep 3 - get a dashboard

Per ottenere un dashboard di Power BI, usare l'operazione Get Dashboards che recupera un elenco di report di dashboard di Power BI.To get a Power BI dashboard, you use the Get Dashboards operation which gets a list of Power BI dashboards. Dall'elenco dei dashboard è possibile ottenere un ID dashboard.From the list of dashboards, you can get a dashboard id.

Ottenere dashboard con un token di accessoGet dashboards using an access token

Con il token di accesso recuperato al Passaggio 2 è possibile chiamare l'operazione Get Dashboards.With the access token you retrieved in step 2, you can call the Get Dashboards operation. L'operazione Get Dashboards restituisce un elenco di dashboard.The Get Dashboards operation returns a list of dashboards. Dall'elenco dei dashboard è possibile ottenere un singolo dashboard.You can get a single dashboard from the list of dashboards. Di seguito è riportato un metodo C# completo per ottenere un dashboard.Below is a complete C# method to get a dashboard.

Per effettuare la chiamata all'API REST, è necessario includere un'intestazione Authorization con formato Bearer {token di accesso}.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Ottenere dashboard con 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; }
}

Ottenere dashboard con .NET SDKGet dashboards using the .NET SDK

È possibile usare .NET SDK per recuperare un elenco di dashboard invece di chiamare direttamente l'API REST.You can use the .NET SDK to retrieve a list of dashboards 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
}

Passaggio 4: Caricare un dashboard con JavaScriptStep 4 - load a dashboard using JavaScript

È possibile usare JavaScript per caricare un dashboard in un elemento div nella pagina 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/>";
    });
}

Se è stato scaricato ed eseguito l'esempio di integrazione di un dashboard, avrà un aspetto simile al seguente.If you downloaded and ran the Integrate a dashboard sample, the sample will look similar to below.

Eventi selezionati nel riquadroTile clicked events

Nell'esempio precedente, si sarà notato che è possibile gestire gli eventi quando si fa clic sul riquadro nel dashboard.In the sample above, you may have noticed that you can handle events when the tile is clicked on the dashboard. Per altre informazioni sugli eventi, vedere Gestione degli eventi all'interno dell'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/>";
});

Se è stato scaricato ed eseguito l'esempio di integrazione di un dashboard,facendo clic in un riquadro verrà generato del testo sotto al dashboard.If you downloaded and ran the Integrate a dashboard sample, clicking on a tile will output text below the dashboard. Il testo dovrebbe essere simile a quello indicato di seguito.The text will look similar to the following. Ciò consente di registrare che è stato fatto clic su un riquadro e quindi l'utente potrà passare alla posizione appropriata.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" }
---------

Utilizzo dei gruppi (aree di lavoro dell'app)Working with groups (app workspaces)

Per incorporare un dashboard da un gruppo (area di lavoro dell'app), è consigliabile ottenere l'elenco di tutti i dashboard disponibili in un gruppo tramite la chiamata seguente all'API REST.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. Per altre informazioni su questa chiamata all'API REST, vedere Get Dashboards (Ottenere dashboard).To find more information about this REST API call, see Get Dashboards. Per consentire alla richiesta di restituire risultati, sarà necessaria l'autorizzazione per il gruppo.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 precedente restituisce l'elenco dei dashboard disponibili.The above API returns the list of the available dashboards. Ogni dashboard presenta una proprietà EmbedUrl che è già concepita per supportare l'incorporamento del gruppo.Each dashboard has an EmbedUrl property which is already constructed to support group embedding.

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

LimitazioniLimitations

  • Gli utenti finali che accedono ai dashboard incorporati devono avere un account Power BI e devono avere l'accesso al dashboard.The end users who access the embedded dashboards must have a Power BI account and have access to the dashboard. Gli utenti devono essere proprietari del dashboard o il dashboard deve essere stato condiviso con l'utente.Either they own the dashboard or the dashboard was shared with the user.
  • Attualmente, Domande e risposte non è supportato nei dashboard incorporati.Currently Q&A is not supported in embedded dashboards.
  • Come limitazione temporanea, quando si condivide un dashboard con gruppi di sicurezza, l'utente deve accedere ai dashboard in PowerBI.com prima di poterlo visualizzare incorporato.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.

Passaggi successiviNext steps

Un'applicazione di esempio è disponibile su GitHub per gli utenti.A sample application is available on GitHub for you to review. Gli esempi precedenti sono basati su di essa.The above examples are based on that sample. Per altre informazioni, vedere integrate-dashboard-web-app.For more information, see integrate-dashboard-web-app.

Per altre informazioni sull'API JavaScript, vedere Power BI JavaScript API (API JavaScript di Power BI).More information is available for the JavaScript API, see Power BI JavaScript API.

Altre domande?More questions? Provare a rivolgersi alla community di Power BITry asking the Power BI Community