Интеграция панели мониторинга в приложение для организацииIntegrate a dashboard into an app for your organization

Узнайте, как интегрировать (внедрить) панель мониторинга в веб-приложение с помощью вызовов REST API и API JavaScript для Power BI для вашей организации.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.

Внедренная панель мониторинга

Для работы с руководством вам потребуется учетная запись Power BI.To get started with this walkthrough, you need a Power BI account. Если у вас нет учетной записи, вы можете зарегистрироваться для получения бесплатной учетной записи Power BI или создать собственный клиент Azure Active Directory для тестирования.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.

Примечание

Требуется внедрить панель мониторинга для клиентов с помощью embedtoken?Looking to embed a dashboard for your customers, using an embedtoken, instead? См. статью Интеграция в приложение панели мониторинга, плитки или отчета (данные принадлежат приложению).See, Integrate a dashboard, tile, or report into your application for your customers.

Для интеграции панели мониторинга в веб-приложение используется REST API Power BI или пакет SDK для C# в Power BI и маркер доступа проверки подлинности Azure Active Directory (AD) для получения панели мониторинга.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. Затем вы загружаете панель мониторинга, используя тот же маркер доступа.Then, you load the dashboard using the same access token. API Power BI обеспечивает программный доступ к определенным ресурсам Power BI.The Power BI API provides programmatic access to certain Power BI resources. Дополнительные сведения см. в обзоре интерфейса REST API Power BI и документации по API JavaScript для Power BI.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Скачивание примераDownload the sample

В этой статье показан код, используемый при интеграции панели мониторинга в веб-приложение на сайте GitHub.This article shows the code used in the integrate-dashboard-web-app on GitHub. Для работы с этим пошаговым руководством можно загрузить пример кода.To follow along with this walkthrough, you can download the sample.

Шаг 1. Регистрация приложения в Azure ADStep 1 - register an app in Azure AD

Необходимо зарегистрировать приложение в Azure AD, чтобы осуществлять вызовы REST API.You will need to register your application with Azure AD in order to make REST API calls. Дополнительные сведения см. в статье Регистрация приложения Azure AD для внедрения содержимого Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Если вы скачали пример интеграции панели мониторинга, можно использовать идентификатор клиента и секрет клиента, полученные после регистрации, чтобы настроить этот пример для проверки подлинности в 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. Для настройки примера измените идентификатор и секрет клиента в файле cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.config file.

Шаг 2. Получение маркера доступа из Azure ADStep 2 - get an access token from Azure AD

Перед выполнением вызовов в REST API Power BI в приложении потребуется получить маркер доступа из Azure AD.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. Дополнительные сведения см. в статье Authenticate users and get an Azure AD access token for your Power BI app (Проверка подлинности для пользователей и получение маркера доступа Azure AD для приложения Power BI).For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Шаг 3. Получение панели мониторингаStep 3 - get a dashboard

Для получения панели мониторинга Power BI используется операция Получение панелей мониторинга, возвращающая список панелей мониторинга Power BI.To get a Power BI dashboard, you use the Get Dashboards operation which gets a list of Power BI dashboards. В списке панелей мониторинга можно получить идентификатор панели мониторинга.From the list of dashboards, you can get a dashboard id.

Получение панели мониторинга с помощью маркера доступаGet dashboards using an access token

После получения маркера доступа на шаге 2 можно вызвать операцию Получение панелей мониторинга.With the access token you retrieved in step 2, you can call the Get Dashboards operation. Операция Получение панелей мониторинга возвращает список панелей мониторинга.The Get Dashboards operation returns a list of dashboards. В списке панелей мониторинга можно получить одну панель мониторинга.You can get a single dashboard from the list of dashboards. Ниже приведен полный метод C# для получения панели мониторинга.Below is a complete C# method to get a dashboard.

Для вызова REST API необходимо включить заголовок авторизации в формате Носитель {маркер доступа}.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Получение панелей мониторинга с помощью 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; }
}

Получение панелей мониторинга с помощью пакета SDK для .NETGet dashboards using the .NET SDK

Вы можете использовать пакет SDK для .NET, чтобы получить список панелей мониторинга, не вызывая REST API напрямую.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
}

Шаг 4. Загрузка панели мониторинга с помощью JavaScriptStep 4 - load a dashboard using JavaScript

Чтобы загрузить панель мониторинга в элемент div веб-страницы, вы можете использовать JavaScript.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/>";
    });
}

Если вы скачали и запустили пример интеграции информационной панели, он будет выглядеть аналогично приведенному ниже.If you downloaded and ran the Integrate a dashboard sample, the sample will look similar to below.

События щелчка плиткиTile clicked events

Из приведенного выше примера понятно, что вы можете обрабатывать события, когда кто-то щелкает плитку на панели мониторинга.In the sample above, you may have noticed that you can handle events when the tile is clicked on the dashboard. Дополнительные сведения о событиях см. в статье об обработке событий в 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/>";
});

Если вы скачали и запустили пример интеграции панели мониторинга, щелкните плитку, чтобы вывести текст под панелью мониторинга.If you downloaded and ran the Integrate a dashboard sample, clicking on a tile will output text below the dashboard. Текст будет выглядеть примерно так.The text will look similar to the following. Этот код позволит вам регистрировать щелчок плитки и переводить пользователя в соответствующее расположение.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" }
---------

Работа с группами (рабочими областями приложений)Working with groups (app workspaces)

Чтобы внедрить панель мониторинга из группы (рабочей области приложения), необходимо получить список всех доступных панелей мониторинга в группе, используя указанный ниже вызов интерфейса REST API.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. Дополнительные сведения о вызове интерфейса REST API см. в статье Get Dashboards (Получение информационных панелей).To find more information about this REST API call, see Get Dashboards. Для получения результатов запроса требуются разрешения в группе.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

Приведенный выше API возвращает список доступных информационных панелей.The above API returns the list of the available dashboards. У каждой информационной панели имеется свойство EmbedUrl, которое поддерживает внедрения группы по умолчанию.Each dashboard has an EmbedUrl property which is already constructed to support group embedding.

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

ОграниченияLimitations

  • Пользователи, работающие с внедренными панелями мониторинга, должны иметь учетные записи Power BI и доступ к панели мониторинга.The end users who access the embedded dashboards must have a Power BI account and have access to the dashboard. Панель мониторинга может принадлежать им или совместно использоваться с ними.Either they own the dashboard or the dashboard was shared with the user.
  • В настоящее время внедренные информационные панели не поддерживают функцию "Вопросы и ответы".Currently Q&A is not supported in embedded dashboards.
  • При совместном использовании информационной панели с группой безопасности в качестве временного ограничения пользователь сначала должен получить доступ к информационным панелям на сайте PowerBI.com и только потом сможет увидеть ее внедренной.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.

Дальнейшие действияNext steps

Пример приложения для проверки можно найти на сайте GitHub.A sample application is available on GitHub for you to review. Примеры выше основаны на этом образце.The above examples are based on that sample. Дополнительные сведения см. на странице integrate-dashboard-web-app.For more information, see integrate-dashboard-web-app.

Чтобы больше узнать об API JavaScript, ознакомьтесь с документацией по API JavaScript для Power BI.More information is available for the JavaScript API, see Power BI JavaScript API.

Появились дополнительные вопросы?More questions? Попробуйте задать вопрос в сообществе Power BI.Try asking the Power BI Community