Enhanced Reporting Solutions: A Guide to Integrating Microsoft Power BI into Your Web Projects

A recent Dataworks project involved a client who needed a way to display data visualizations on their website/web app. The primary function of the application was to assist in recording various daily data sets. The client desired a visualization of this data and, given their existing use of Power BI in other areas, wanted to integrate it into this application as well.
The following will give you a step-by-step guide in how to integrate a Power BI report into your website.
How to Integrate a Power BI report into your Website
- In PowerBI, click File, Embed, Website or Portal.
- A dialog will open with a link to the Report, and also an iframe that you could paste into the website’s html. This alone is fine if you just want to show the Report (ids have been obfuscated).

For an example we will use the iFrame and URL that is provided as the src here, and expand on it within our angular app, so that we can pass up a filter when we load the report.
In a new angular component, I paste the iframe and provide it with src that is bound, and programmatically generated.

The typescript angular code that drives this for the example is as follows:

Here, the Power BI BaseLink is just the connection to the report, as provided in the dialog from Power BI. The report id points it to the report. Ctid is the Customer Tenant ID and is required to allow external users to access the correct tenant.
This link to the report could be provided from a config file or from a database. Its coded here for example.
The function that is defined “transform” takes in a string and will use the Dom Sanitize to Sanitizer ensure that any url passed to the iFrame, will not have scripts, preventing XSS attack. The iframe would return an error if the trust isn’t bypassed.
Best Practices for URL Sanitization and Dynamic Content Handling
It is good practice to sanitize the URL, as it can be user modified as if you see in the constructor, we are getting the part name from the URL. If one is provided it is appended onto the baseLink as a filter. This comes from the page url only as an example, it could come from a service or some other form of user input. When the application is run we get the following page featuring the example PowerBI dashboard, which we generated the embed code for.

If we navigate to Dashboard/Part A, via page url, we can see the filter being set when the page loads.

Conclusion
In conclusion, the integration of a Power BI dashboard into the Dataworks project not only met the client’s requirement for data visualization but also provided an efficient solution for dynamic updates without altering the application code. By following the step-by-step guide outlined in this blog, you can seamlessly integrate a Power BI report into your website or web application, offering enhanced reporting capabilities and flexibility to meet evolving client needs.
Get in Touch
If would like to learn more about Power Bi and discuss how we can help deliver real benefits to your business, please contact us today or call us on 051 878555.
To stay up to date with Dataworks Limited news and events, connect with us via the links below: