Introduction
Embedding Power BI reports into a web application can substantially enhance your application's ability to present data analytics and insights directly to your users. However, one common challenge faced by developers is embedding multiple Power BI reports within a single HTML page, especially when using global access tokens and HTML helpers. In this article, we'll dive into how you can overcome these hurdles by creating an embed token for each report and passing the generated token into each report embed as a custom attribute.
The Challenge: Rendering Multiple Reports
When attempting to embed multiple Power BI reports on a single HTML page using ASP.NET, many developers rely on the @Html.PowerBIAccessToken(Model.AccessToken)
HTML helper. While this approach works well for a single report, it encounters issues when multiple reports are involved. This is because the helper writes out a global JavaScript variable for the access token, which gets overridden with each subsequent report, causing only the last report in the list to render successfully.
The Solution: Custom Embed Tokens and Attributes
To successfully render multiple Power BI reports on a single page without the reports interfering with each other, a two-step solution is needed:
-
Create an Embed Token for Each Report: Generating a unique embed token for each report ensures that each report can be authenticated and loaded independently.
-
Pass the Generated Token into Each Report Embed as a Custom Attribute: By passing the access token as a custom attribute for each report, you can bypass the limitation of the global JavaScript variable and ensure each report is authenticated using its token.
Step-by-Step Guide
1. Generating Embed Tokens
Before you can embed your Power BI reports, you'll need to generate an embed token for each one. This can typically be done via the Power BI REST API. Each token should have permission to access the specific report it's associated with.
2. Embedding the Reports Using a Custom Attribute
Once you have your embed tokens, you can use them to embed your reports. Instead of using the @Html.PowerBIAccessToken
helper, utilize the @Html.PowerBIReport
helper with a custom attribute for the access token:
@Html.PowerBIReport(Model.Report.Name, Model.Report.EmbedUrl, new { @powerbi_access_token = yourEmbedToken })
Replace yourEmbedToken
with the actual token generated in the first step. This approach allows each report to utilize its unique token, ensuring that all reports can be rendered on the same page.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Understanding the Power BI JavaScript SDK
The process described above leverages the Power BI JavaScript SDK under the hood. The SDK provides a comprehensive set of functions to embed Power BI reports, dashboards, and tiles into your application. It handles the intricacies of authentication, embedding, and the interaction between your application and the Power BI reports. You can find more details and documentation on the Power BI JavaScript SDK on GitHub.
Example Usage:
Here is a simplified example demonstrating how to use the Power BI JavaScript SDK to embed a report into your web page:
// Load the Power BI JavaScript SDK
const powerbi = new window['powerbi-client'].service.Service(
window['powerbi-client'].factories.hpmFactory,
window['powerbi-client'].factories.wpmpFactory,
window['powerbi-client'].factories.routerFactory
);
// Embed configuration
const embedConfiguration = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: 'yourEmbedToken', // Use the embed token created for this report
embedUrl: 'yourReportEmbedUrl',
id: 'yourReportId'
};
// Get a reference to the HTML container
const reportContainer = document.getElementById('reportContainer');
// Embed the report
powerbi.embed(reportContainer, embedConfiguration);
By following these steps and utilizing the Power BI JavaScript SDK, you can effectively embed multiple Power BI reports on a single HTML page, each with its unique access token.
Conclusion
Embedding multiple Power BI reports on a single HTML page is a powerful feature for web applications that seek to provide comprehensive data insights. By generating individual embed tokens for each report and leveraging custom attributes, developers can overcome the limitations of using global tokens. Alongside the Power BI JavaScript SDK, this approach offers a robust solution for embedding and interacting with Power BI content seamlessly within your application.
For developers looking to dive deeper into understanding website user behavior and optimizing conversion rates, Flowpoint.ai offers analytics and AI-generated recommendations that help identify and rectify technical errors impacting your website's performance.