DEV Community

grace wambua
grace wambua

Posted on

A Comprehensive Guide to Publishing and Embedding Power BI Reports on the Web with IFrames

#embedpowerbi #datavisualization #iframes

Introduction

Power BI is Microsoft's business analytics platform that helps you turn data into actionable insights. Whether you're a business user, report creator, or developer, Power BI offers integrated tools and services to connect, visualize, and share data across your organization.

Power BI is made up of 3 main elements:

  1. Power BI Desktop: a free desktop application for building and designing reports
  2. Power BI Service: the online publishing service for viewing and sharing reports and dashboards.
  3. Power BI mobile apps: for viewing reports and dashboards on the go.

The purpose of BI is to track Key Performance Indicators (KPIs) and uncover insights in business data to better inform decision-making across the organization.

Publishing Reports to Power BI Service

Reports and dashboards can be shared with others by users who have a Power BI pro license and have published them to a PBI workspace where others can view them.
A workspace is essentially a centralized location for collaboration.
Reports and dashboards can be distributed in many different ways including being downloaded as .pbix files, shared via teams, etc.

Here are step-by-step instructions on how to publish a Power BI report and embed it on a website using iframes, with an Electronic Sales Data report.

Publish Report to Power BI Service

  • Navigate to Workspaces on the BI Service

Image to Navigate to Workspaces

  • Create a workspace where you will publish your report.

Image to Create a workspace

  • Open your report in Power BI Desktop.

  • Click Publish on the Home ribbon.
    Image to Click Publish on Home ribbon

  • Select the workspace and click Select.

Image to select workspace

Generate Embed Code

  • Log in to the Power BI Service and navigate to your report.
    Image to navigate to report

  • Go to File > Embed report > Website or portal (for secure embedding)
    Image to embed file

Embed in Website

  • Copy the <iframe> HTML code provided in the dialog box.
    Image to copy iframe code

  • Paste this code into the HTML editor of your website.

Image to paste code on HTML editor

  • Open the HTML file on a web browser and your BI report will successfully be embedded on a website

Image to show successful embed on website

Conclusion

Mastering the art of embedding BI reports not only enhances user experience but also positions your organization to thrive by transforming data into actionable strategies.

Top comments (0)