Integrar um dashboard do Power BI em um aplicativo para sua organizaçãoIntegrate a dashboard into an app for your organization

Saiba como integrar ou inserir um dashboard em um aplicativo Web usando chamadas à API REST, junto com a API JavaScript do Power BI durante a inserção para a organização.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 inserido

Para começar este passo a passo, você precisará de uma conta do Power BI.To get started with this walkthrough, you need a Power BI account. Caso você não tenha uma conta, inscreva-se em uma conta gratuita do Power BI ou crie seu próprio locatário do Azure Active Directory para fins de teste.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.

Observação

Você está buscando inserir um dashboard para os clientes, usando um embedtoken, em vez disso?Looking to embed a dashboard for your customers, using an embedtoken, instead? Consulte Integrar um dashboard, bloco ou relatório no aplicativo para os clientes.See, Integrate a dashboard, tile, or report into your application for your customers.

Para integrar um dashboard em um aplicativo Web, use a API REST do Power BI ou o SDK do C# do Power BI e um token de acesso de autorização do Azure AD (Active Directory) para obter um 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. Em seguida, carregue o dashboard usando o mesmo token de acesso.Then, you load the dashboard using the same access token. A API do Power BI fornece acesso programático a determinados recursos do Power BI.The Power BI API provides programmatic access to certain Power BI resources. Para obter mais informações, consulte Visão geral da API REST do Power BI e a API JavaScript do Power BI.For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

Baixe o exemploDownload the sample

Este artigo mostra o código usado no integrate-dashboard-web-app no GitHub.This article shows the code used in the integrate-dashboard-web-app on GitHub. Para acompanhar esse passo a passo, baixe a amostra.To follow along with this walkthrough, you can download the sample.

Etapa 1 – registrar um aplicativo no Azure ADStep 1 - register an app in Azure AD

Você precisará registrar seu aplicativo no Azure AD para fazer chamadas à API REST.You will need to register your application with Azure AD in order to make REST API calls. Para obter mais informações, consulte Registrar um aplicativo do Azure AD para inserir o conteúdo do Power BI.For more information, see Register an Azure AD app to embed Power BI content.

Se você baixou a amostra Integrar um dashboard, use a ID do Cliente e o Segredo do Cliente obtidos, após o registro, para que a amostra seja autenticada no 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. Para configurar a amostra, altere a ID do Cliente e o Segredo do Cliente no arquivo cloud.config.To configure the sample, change the Client ID and Client Secret in the cloud.config file.

Etapa 2 – Obter um token de acesso do Azure ADStep 2 - get an access token from Azure AD

No aplicativo, primeiro você precisará obter um token de acesso do Azure AD antes de poder fazer chamadas à API REST do 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. Para obter mais informações, consulte Autenticar usuários e obter um token de acesso do Azure AD para o aplicativo do Power BI.For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

Etapa 3 – Obter um dashboardStep 3 - get a dashboard

Para obter um dashboard do Power BI, você usa a operação Obter Dashboards que obtém uma lista de dashboards do Power BI.To get a Power BI dashboard, you use the Get Dashboards operation which gets a list of Power BI dashboards. Na lista de dashboards, é possível obter uma ID de dashboard.From the list of dashboards, you can get a dashboard id.

Obter dashboards usando um token de acessoGet dashboards using an access token

Com o token de acesso recuperado na etapa 2, chame a operação Obter Dashboards.With the access token you retrieved in step 2, you can call the Get Dashboards operation. A operação Obter Dashboards retorna uma lista de dashboards.The Get Dashboards operation returns a list of dashboards. É possível obter um dashboard individual na lista de dashboards.You can get a single dashboard from the list of dashboards. Veja abaixo um método do C# completo para obter um dashboard.Below is a complete C# method to get a dashboard.

Para fazer a chamada à API REST, você deve incluir um cabeçalho Autorização no formato Portador {token de acesso}.To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

Obter dashboards com a 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; }
}

Obter dashboards usando o SDK do .NETGet dashboards using the .NET SDK

Use o SDK do .NET para recuperar uma lista de dashboards, em vez de chamar a API REST diretamente.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
}

Etapa 4 – Carregar um dashboard usando o JavaScriptStep 4 - load a dashboard using JavaScript

Você pode usar o JavaScript para carregar um dashboard em um elemento div na sua página da 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 você baixou e executou a amostra Integrar um painel, a amostra será parecida com a mostrada abaixo.If you downloaded and ran the Integrate a dashboard sample, the sample will look similar to below.

Eventos clicados em blocoTile clicked events

Talvez você tenha observado no exemplo acima que é possível manipular eventos quando o bloco é clicado no dashboard.In the sample above, you may have noticed that you can handle events when the tile is clicked on the dashboard. Para obter mais informações sobre eventos, consulte Manipulação de eventos na API de 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 você baixou e executou o Exemplo de integrar um dashboard, clicar em um bloco produzirá um texto abaixo do dashboard.If you downloaded and ran the Integrate a dashboard sample, clicking on a tile will output text below the dashboard. O texto será semelhante ao seguinte.The text will look similar to the following. Isso permitirá registrar que um bloco recebeu um clique e, em seguida, conduzir o usuário para o local apropriado.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" }
---------

Trabalhando com grupos (espaços de trabalho de aplicativo)Working with groups (app workspaces)

Para inserir um dashboard por meio de um grupo (espaço de trabalho de aplicativo), obtenha a lista de todos os dashboards disponíveis em um grupo usando a chamada à API REST a seguir.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. Para obter mais informações sobre essa chamada à API REST, consulte Obter painéis.To find more information about this REST API call, see Get Dashboards. Você precisará ter permissão no grupo à solicitação para retornar os resultados.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

A API acima retorna a lista de painéis disponíveis.The above API returns the list of the available dashboards. Cada painel tem uma propriedade EmbedUrl que já é construída para oferecer suporte a inserção de grupo.Each dashboard has an EmbedUrl property which is already constructed to support group embedding.

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

LimitaçõesLimitations

  • Os usuários finais que acessam os dashboards inseridos devem ter uma conta do Power BI e ter acesso ao dashboard.The end users who access the embedded dashboards must have a Power BI account and have access to the dashboard. Eles possuem o dashboard ou o dashboard foi compartilhado com o usuário.Either they own the dashboard or the dashboard was shared with the user.
  • Atualmente não há suporte para P e R nos painéis inseridos.Currently Q&A is not supported in embedded dashboards.
  • Como uma limitação temporária, ao compartilhar um painel com grupos de segurança, o usuário precisa primeiro acessar os painéis no PowerBI.com antes de vê-lo inserido.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.

Próximas etapasNext steps

Um aplicativo de exemplo está disponível no GitHub para você examinar.A sample application is available on GitHub for you to review. Os exemplos acima baseiam-se nessa amostra.The above examples are based on that sample. Para obter mais informações, consulte integrate-dashboard-web-app.For more information, see integrate-dashboard-web-app.

Mais informações estão disponíveis sobre a API JavaScript em API JavaScript do Power BI.More information is available for the JavaScript API, see Power BI JavaScript API.

Mais perguntas?More questions? Experimente perguntar à Comunidade do Power BITry asking the Power BI Community