Introduction

In step 3 of Integrate a tile into an app, Get a Power BI tile, you get a Power BI tile. In this step, you load a tile into an IFrame.

To load a tile into an IFrame, you set the src attribute of an IFrame to the embedUrl property of a tile, and create an onload handler to post a message with an access token to get access to the tile visual. Below is JavaScript code to load a tile into an IFrame.

Load a tile into an 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, "*");;
}

If you downloaded and ran the Integrate a tile sample, the sample will look similar to below.

Conclusion

In this walkthrough you learned how to integrate a tile into an app by getting the tile in a dashboard, and then loading the tile into an IFrame. You can download the complete Integrate a tile sample which shows all the parts working to embed a tile into an ASP.NET web app. You can also view the complete Integrate a tile into an app code listing.

See also

Sign up for Power BI
Integrate a tile into an app walkthrough
Integrate a tile sample
Configure the integrate a tile sample
Get Dashboards operation
Get Tiles operation
More questions? Try the Power BI Community