Integrieren eines Dashboards in eine App für Ihre OrganisationIntegrate a dashboard into an app for your organization

Hier erfahren Sie, wie Sie mithilfe von REST-API-Aufrufen zusammen mit der Power BI-JavaScript-API ein Dashboard in eine Web-App integrieren bzw. einbetten, wenn das Einbetten für Ihre Organisation erfolgt.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.

Eingebettetes Dashboard

Für diese exemplarische Vorgehensweise benötigen Sie ein Power BI-Konto.To get started with this walkthrough, you need a Power BI account. Wenn Sie kein Konto haben, können Sie sich für ein kostenloses Power BI-Konto registrieren, oder Sie können Ihren eigenen Azure Active Directory-Mandanten für Testzwecke erstellen.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.

Hinweis

Möchten Sie stattdessen mit einem Einbettungstoken ein Dashboard für Ihre Kunden einbetten?Looking to embed a dashboard for your customers, using an embedtoken, instead? Weitere Informationen hierzu finden Sie unter Integrieren eines Dashboards, einer Kachel oder eines Berichts in die Anwendung (die App ist Besitzer der Daten).See, Integrate a dashboard, tile, or report into your application for your customers.

Zum Integrieren eines Dashboards in eine Web-App verwenden Sie die Power BI-REST-API oder das Power BI-C#-SDK sowie ein Zugriffstoken für die AD-Autorisierung (Azure Active Directory), um ein Dashboard abzurufen.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. Dann laden Sie das Dashboard mithilfe desselben Zugriffstokens.Then, you load the dashboard using the same access token. Die Power BI-API bietet programmgesteuerten Zugriff auf bestimmte Power BI-Ressourcen.The Power BI API provides programmatic access to certain Power BI resources. Weitere Informationen finden Sie unter Übersicht über Power BI-REST-API und Power BI-JavaScript-API.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Beispiel herunterladenDownload the sample

Diesem Artikel liegt der im Beispiel zum Integrieren eines Dashboards in eine Web-App – integrate-dashboard-web-app auf GitHub verwendete Code zugrunde.This article shows the code used in the integrate-dashboard-web-app on GitHub. Laden Sie das Beispiel herunter, um die exemplarische Vorgehensweise nachvollziehen zu können.To follow along with this walkthrough, you can download the sample.

Schritt 1 – Registrieren einer App in Azure ADStep 1 - register an app in Azure AD

Sie müssen Ihre Anwendung bei Azure AD registrieren, um REST-API-Aufrufe ausführen zu können.You will need to register your application with Azure AD in order to make REST API calls. Weitere Informationen finden Sie unter Registrieren einer Azure AD-App zum Einbetten von Power BI-Inhalten.For more information, see Register an Azure AD app to embed Power BI content.

Wenn Sie das Beispiel zum Integrieren eines Dashboards heruntergeladen haben, verwenden Sie die Client-ID und das Clientgeheimnis, das Sie nach der Registrierung erhalten haben, damit das Beispiel in Azure AD authentifiziert werden kann.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. Ändern Sie zum Konfigurieren des Beispiels die Client-ID und das Clientgeheimnis in der Datei cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.config file.

Schritt 2: Abrufen eines Zugriffstokens aus Azure ADStep 2 - get an access token from Azure AD

In der Anwendung müssen Sie zunächst ein Zugriffstoken aus Azure AD abrufen, ehe Sie die Power BI-REST-API aufrufen können.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. Weitere Informationen finden Sie unter Authentifizieren von Benutzern und Abrufen eines Azure AD-Zugriffstokens für die Power BI-App.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Schritt 3: Abrufen eines DashboardsStep 3 - get a dashboard

Zum Abrufen eines Power BI-Dashboards verwenden Sie den Vorgang Get Dashboards (Dashboards abrufen), um eine Liste der Power BI-Dashboards abzurufen.To get a Power BI dashboard, you use the Get Dashboards operation which gets a list of Power BI dashboards. Aus dieser Dashboardliste können Sie dann eine Dashboard-ID abrufen.From the list of dashboards, you can get a dashboard id.

Abrufen von Dashboards mit einem ZugriffstokenGet dashboards using an access token

Mit dem Zugriffstoken, das Sie in Schritt 2 abgerufen haben, können Sie den Vorgang Get Dashboards (Dashboards abrufen) aufrufen.With the access token you retrieved in step 2, you can call the Get Dashboards operation. Der Vorgang Get Dashboards (Dashboards abrufen) gibt eine Liste von Dashboards zurück.The Get Dashboards operation returns a list of dashboards. Sie können aus dieser Liste von Dashboards dann ein einzelnes Dashboard abrufen.You can get a single dashboard from the list of dashboards. Im Folgenden finden Sie eine vollständige C#-Methode zum Abrufen eines Dashboards.Below is a complete C# method to get a dashboard.

Zum Ausführen des REST-API-Aufrufs müssen Sie einen Autorisierungsheader im Format Träger {Zugriffstoken} einschließen.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Abrufen von Dashboards mit der REST-APIGet 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; }
}

Abrufen von Dashboards mit dem .NET-SDKGet dashboards using the .NET SDK

Mithilfe des .NET-SDK können Sie eine Liste der Dashboards abrufen und müssen die REST-API nicht direkt aufrufen.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
}

Schritt 4: Laden eines Dashboards mit JavaScriptStep 4 - load a dashboard using JavaScript

Sie können mithilfe von JavaScript ein Dashboard in ein div-Element auf Ihrer Webseite laden.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/>";
    });
}

Wenn Sie das Beispiel zum Integrieren eines Dashboards heruntergeladen und ausgeführt haben, ähnelt das Beispiel dem in der folgenden Abbildung.If you downloaded and ran the Integrate a dashboard sample, the sample will look similar to below.

TileClicked-EreignisseTile clicked events

Im Beispiel oben haben Sie möglicherweise festgestellt, dass Sie Ereignisse behandeln können, wenn auf die Kachel im Dashboard geklickt wird.In the sample above, you may have noticed that you can handle events when the tile is clicked on the dashboard. Weitere Informationen zu Ereignissen finden Sie unter Behandeln von Ereignissen in der JavaScript-API.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/>";
});

Wenn Sie das Beispiel zum Integrieren eines Dashboards heruntergeladen und ausgeführt haben, wird beim Klicken auf eine Kachel Text unter dem Dashboard ausgegeben.If you downloaded and ran the Integrate a dashboard sample, clicking on a tile will output text below the dashboard. Der Text sollte ungefähr wie folgt aussehen.The text will look similar to the following. Dies ermöglicht es Ihnen, das Klicken auf eine Kachel zu protokollieren und den Benutzer an die entsprechende Adresse weiterzuleiten.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" }
---------

Arbeiten mit Gruppen (App-Arbeitsbereiche)Working with groups (app workspaces)

Zum Einbetten eines Dashboards aus einer Gruppe (App-Arbeitsbereich) muss die Liste aller verfügbaren Dashboards in einer Gruppe durch den folgenden REST-API-Aufruf abgerufen werden.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. Weitere Informationen zu diesem REST-API-Aufruf finden Sie unter Abrufen von Dashboards.To find more information about this REST API call, see Get Dashboards. Sie benötigen Berechtigungen in der Gruppe, damit die Anforderung Ergebnisse zurückgibt.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

Die oben genannte API gibt die Liste der verfügbaren Dashboards zurück.The above API returns the list of the available dashboards. Jedes Dashboard verfügt über eine EmbedUrl-Eigenschaft, die bereits so konstruiert ist, dass das Einbetten aus Gruppen unterstützt wird.Each dashboard has an EmbedUrl property which is already constructed to support group embedding.

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

EinschränkungenLimitations

  • Die Endbenutzer, die auf die eingebetteten Dashboards zugreifen, müssen über ein Power BI-Konto und Zugriff auf das Dashboard verfügen.The end users who access the embedded dashboards must have a Power BI account and have access to the dashboard. Das heißt, entweder sind sie Besitzer des Dashboards oder das Dashboard wurde für den betreffenden Benutzer freigegeben.Either they own the dashboard or the dashboard was shared with the user.
  • Q&A wird derzeit in eingebetteten Dashboards nicht unterstützt.Currently Q&A is not supported in embedded dashboards.
  • Zudem gilt eine vorübergehende Einschränkung: Beim gemeinsamen Nutzen eines Dashboards mit Sicherheitsgruppen müssen Benutzer zunächst die Dashboards auf „PowerBI.com“ aufrufen, um das eingebettete Dashboard zu sehen.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.

Nächste SchritteNext steps

Eine Beispielanwendung können Sie auf GitHub einsehen.A sample application is available on GitHub for you to review. Die obigen Beispiele basieren auf diesem Beispiel.The above examples are based on that sample. Weitere Informationen finden Sie im Beispiel zum Integrieren eines Dashboards in eine Web-App – integrate-dashboard-web-app.For more information, see integrate-dashboard-web-app.

Weitere Informationen sind für die JavaScript-API verfügbar; siehe Power BI-JavaScript-API.More information is available for the JavaScript API, see Power BI JavaScript API.

Weitere Fragen?More questions? Stellen Sie Ihre Frage in der Power BI-Community.Try asking the Power BI Community