概要

「タイルをアプリに統合する」の手順 3Power BI タイルを取得するで、Power BI タイルを取得します。 この手順で、タイルを IFrame に読み込みます。

IFrame にタイルを読み込むには、IFramesrc 属性をタイル埋め込み URL プロパティに設定し、視覚的なタイルへアクセスするためのアクセス トークンでメッセージを投稿する onload ハンドラーを作成します。 以下は、タイルを IFrame に読み込むための JavaScript コードです。

タイルを IFrame に読み込む

//Configure IFrame for the tile after you have an Access Token. See Default.aspx.cs to learn how to get an Access Token
window.onload = function () {
    if ("" != document.getElementById('MainContent_accessToken').value)
    {
        var iframe = document.getElementById('iFrameEmbedTile');

        // To load a tile do the following:
        // Set the IFrame source to the EmbedUrl from the Get Tiles operation
        iframe.src = document.getElementById('MainContent_tileEmbedUrl').value;

        // Add an onload handler to submit the access token
        iframe.onload = postActionLoadTile;
    }
};

// Post the access token to the IFrame
function postActionLoadTile() {

    // Construct the push message structure
    // This is where you assign the Access Token to get access to the tile visual
    var messageStructure = {
        action: "loadTile",
        accessToken: document.getElementById('MainContent_accessToken').value,
        height: 500,
        width: 500
    };
    message = JSON.stringify(messageStructure);

    // Push the message
    document.getElementById('iFrameEmbedTile').contentWindow.postMessage(message, "*");;
}

タイルの統合サンプルをダウンロードして実行する場合、サンプルは次のようになります。

まとめ

このチュートリアルでは、ダッシュボードにタイルを取得することにより、さらに IFrame にタイルを読み込むすることによりタイルをアプリに統合する方法について学びました。 ASP.NET Web アプリにタイルを埋め込むためのすべての作業パーツを表示するタイルの統合サンプルの完全版をダウンロードすることができます。 アプリのコード リストにタイルを統合するの完全版を表示することもできます。

参照

Power BI にサインアップする
タイルをアプリに統合するチュートリアル
タイルの統合サンプル
タイルの統合サンプルを構成する
ダッシュボードの取得操作
タイルの取得操作
他にわからないことがある場合は、 Power BI コミュニティを利用してください