タイルをアプリに統合する (ユーザーがデータを所有)Integrate a tile into an app (user owns data)

REST API の呼び出しと Power BI JavaScript API を使って組織向けの Web アプリにタイルを統合する (埋め込む) 方法を説明します。Learn how to integrate, or embed, a tile into a web app using REST API calls along with the Power BI JavaScript API when embedding for your organization.

Web アプリケーションに埋め込まれたタイル

このチュートリアルを開始するには、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 tile for your customers, using an embedtoken, instead? 顧客のためにダッシュボード、タイル、レポートをアプリケーションに統合する方法に関する記事をご覧ください。See, Integrate a dashboard, tile, or report into your application for your customers.

タイルを Web アプリに統合するには、Power BI REST API または Power BI C# SDK と、Azure Active Directory (AD) 承認アクセス トークンを使って、タイルを取得します。To integrate a tile 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 tile. そして、同じアクセス トークンを使って、タイルを読み込みます。Then, you load the tile using the same access token. Power BI API は、特定の Power BI リソースへのプログラムによるアクセスを提供します。The Power BI API provides programmatic access to certain Power BI resources. 詳しくは、「Power BI REST API の概要」と「Power BI JavaScript API」(Power BI の JavaScript API) をご覧ください。For more information, see Overview of Power BI REST API and the Power BI JavaScript API.

サンプルをダウンロードするDownload the sample

この記事では、GitHub の integrate-tile-web-app で使用されているコードを示します。This article shows the code used in the integrate-tile-web-app on GitHub. このチュートリアルの手順を試してみるには、サンプルをダウンロードできます。To follow along with this walkthrough, you can download the sample.

ステップ 1 - Azure AD にアプリを登録するStep 1 - register an app in Azure AD

REST API の呼び出しを行うには、Azure AD にアプリケーションを登録する必要があります。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.

integrate-tile-web-app をダウンロードした場合は、登録した後で取得するクライアント IDクライアント シークレットを使います。そうすることにより、サンプルは Azure AD で認証できるようになります。If you downloaded the integrate-tile-web-app, you use the Client ID and Client Secret you get, after registration, so that the sample can authenticate to Azure AD. サンプルを構成するには、cloud.config ファイルでクライアント IDクライアント シークレットを変更します。To configure the sample, change the Client ID and Client Secret in the cloud.config file.

ステップ 2 - Azure AD からアクセス トークンを取得するStep 2 - get an access token from Azure AD

アプリケーションでは、Power BI REST API の呼び出しを行う前に、まず、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. 詳しくは、「ユーザーを認証し、Power BI アプリ用の Azure AD アクセス トークンを取得する」をご覧ください。For more information, see Authenticate users and get an Azure AD access token for your Power BI app.

ステップ 3 - タイルを取得するStep 3 - get a tile

Power BI タイルを取得するには、タイルの取得操作を使って、指定したダッシュボードから Power BI タイルの一覧を取得します。To get a Power BI tile, you use the Get Tiles operation which gets a list of Power BI tiles from a given dashboard. タイルの一覧から、タイル ID を取得し、URL を埋め込むことができます。From the list of tiles, you can get a tile id and embed URL.

タイルを取得する前に、ダッシュボード ID を取得する必要があります。A dashboard ID will need to be retrieved first before you can get the tile. ダッシュボードを取得する方法については、「ダッシュボードをアプリに統合する (ユーザーがデータを所有)」をご覧ください。For information on how to retrieve a dashbaord, see Integrate a dashboard into an app (user owns data).

アクセス トークンを使ってタイルを取得するGet tiles using an access token

ステップ 2 で取得したアクセス トークンを使って、タイル取得操作を呼び出すことができます。With the access token you retrieved in step 2, you can call the Get Tiles operation. タイル取得操作は、タイルの一覧を返します。The Get Tiles operation returns a list of tiles. タイルの一覧から 1 つのタイルを取得できます。You can get a single tile from the list of tiles. タイルを取得するための完全な C# メソッドを以下に示します。Below is a complete C# method to get a tile.

REST API 呼び出しを行うには、Authorization ヘッダーを "ベアラー {アクセス トークン}" の形式で含める必要があります。To make the REST API call, you must include an Authorization header in the format of Bearer {access token}.

REST API でタイルを取得するGet tiles with the REST API

Default.aspx.csDefault.aspx.cs

using Newtonsoft.Json;

//Get a tile from a dashboard. In this sample, you get the first tile.
protected void GetTile(string dashboardId, int index)
{
    //Configure tiles request
    System.Net.WebRequest request = System.Net.WebRequest.Create(
        String.Format("{0}Dashboards/{1}/Tiles",
        baseUri,
        dashboardId)) as System.Net.HttpWebRequest;

    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken.Value));

    //Get tiles 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()))
        {
            //Deserialize JSON string
            PBITiles tiles = JsonConvert.DeserializeObject<PBITiles>(reader.ReadToEnd());

            //Sample assumes at least one Dashboard with one Tile.
            //You could write an app that lists all tiles in a dashboard
            if (tiles.value.Length > 0)
                tileEmbedUrl.Text = tiles.value[index].embedUrl;
        }
    }
}

//Power BI Tiles used to deserialize the Get Tiles response.
public class PBITiles
{
    public PBITile[] value { get; set; }
}
public class PBITile
{
    public string id { get; set; }
    public string title { get; set; }
    public string embedUrl { get; set; }
}

.NET SDK を使ってタイルを取得するGet tiles using the .NET SDK

REST API を直接呼び出すのではなく、.NET SDK を使ってダッシュボードの一覧を取得することもできます。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 tiles = client.Dashboards.GetDashboards();

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

    Dashboard dashboard = dashboards.Value.FirstOrDefault();

    // Get the first tile from the above dashbaord
    ODataResponseListTile tiles = client.Dashboards.GetTiles(dashboard.Id);

    Tile tile = tiles.Value.FirstOrDefault();
}

ステップ 4 - JavaScript を使ってタイルを読み込むStep 4 - load a tile using JavaScript

JavaScript を使って、Web ページの div 要素にタイルを読み込むことができます。You can use JavaScript to load a tile into a div element on your web page.

Default.aspxDefault.aspx

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

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

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

Site.masterSite.master

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

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

// update embed tile
function updateEmbedTile() {

    // 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: 'tile',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

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

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

    // tile.on will add an event handler which prints to Log window.
    tile.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/>";
    });
}

integrate-tile-web-app をダウンロードして実行する場合、サンプルは次のようになります。If you downloaded and ran the integrate-tile-web-app, the sample will look similar to below.

Web アプリケーションに埋め込まれたタイル

グループの使用 (アプリ ワークスペース)Working with groups (app workspaces)

グループ (アプリ ワークスペース) からタイルを埋め込むには、次の REST API 呼び出しを使って、グループのダッシュボードで使用可能なすべてのタイルの一覧を取得する必要があります。For embedding a tile from a group (app workspace), you will want to get the list of all available tiles within a group's dashboard using the following REST API call. この REST API 呼び出しについて詳しくは、「タイルを取得する」をご覧ください。To find more information about this REST API call, see Get Tiles. 要求から結果が返るようにするには、グループでのアクセス許可が必要です。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/{dashboard_id}/tiles

上記の API は、使用可能なタイルの一覧を返します。The above API returns the list of the available tiles. 各タイルには EmbedUrl プロパティがあり、グループの埋め込みをサポートするように既に構成されています。Each tile has an EmbedUrl property which is already constructed to support group embedding.

https://app.powerbi.com/embed?dashboardId={dashboard_id}&tileId={tile_id}&groupId={group_id}

次の手順Next steps

タイルの埋め込み (PowerBI-JavaScript Wiki)Tile Embed on PowerBI-JavaScript Wiki

Power BI JavaScript APIPower BI JavaScript API.

integrate-tile-web-app サンプル (GitHub)。integrate-tile-web-app sample on GitHub.

他にわからないことがある場合は、More questions? Power BI コミュニティで質問してみてくださいTry asking the Power BI Community