Introduction

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

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

Load a report into an IFrame

//Configure IFrame for the report 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('iFrameEmbedReport');

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

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

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

    // Construct the push message structure
    // this structure also supports setting the reportId, groupId, height, and width.
    // when using a report in a group, you must provide the groupId on the iFrame SRC
    var m = {
        action: "loadReport",
        accessToken: document.getElementById('MainContent_accessToken').value
    };
    message = JSON.stringify(m);

    // push the message.
    iframe = document.getElementById('iFrameEmbedReport');
    iframe.contentWindow.postMessage(message, "*");;
}

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

Conclusion

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

See also

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