DEV Community

Cover image for A Comprehensive Guide to Publishing and Embedding Power BI Reports on the Web with IFrames
Sharon-nyabuto
Sharon-nyabuto

Posted on

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

#analytics #microsoft #tutorial #webdev

Microsoft PowerBI is one powerful tool when it comes to analyzing and visualizing data.

Power BI allows users to connect to different data sources, transform data, build interactive dashboards and share insights with others.

I have spent the last two weeks learning how to build queries, clean data on power query, use DAX functions, data modelling and relationships, as well as building dashboards and reports in Power BI.

Reports and dashboards in Power BI
Reports and dashboards are important for visualizing data.

While dashboards **are often a one-page summary of key insights, **reports are multiple pages and with a detailed analysis.
In the day to day operations, reports have to be shared with managers, teams and other stakeholders.
Instead of sending ‘.pbix’ files, which require Power BI desktop, embedding reports enables viewing them in browsers, interaction with filters and accessing live and updated data.

Embedding reports is a necessary move from static reports, to interactive web-based dashboards, that no one has a challenge accessing.

In this article, we will learn step by step how to;

  1. Create a Workspace in Power BI Services
  2. Upload and Publish a Power BI report from Power BI desktop
  3. Generate an Embed code
  4. Embed the report on a web page using an iframe.

Brief Overview of Power BI and the Publishing Process
Power BI consists of two components;

  1. - Power BI Desktop– Where the data is loaded, cleaned and transformed, relationships and visuals are built and reports designed.
  2. - Power BI Service- Where the reports are published, workspaces and embedded links are created, dashboards are shared and work is done in collaboration with others.

Creating a Workspace in Power BI Services

A Workspace is an online folder, that is dedicated to storing and organizing your dashboards and reports.

The default workspace is always ‘My Workspace’ which is often just for personal testing, and as a result, you cannot get a working public embed code if you generate your report here. Therefore, do NOT use My Workspace.

How to create a Workspace step-by-step;

  1. Open your browser and go to https://app.powerbi.com
  2. Log in using your Microsoft account
  3. On the left menu, click Workspaces
  4. Click the New Workspace button at the top right
  5. Enter a Workspace Name, e.g. Electronics Sales
  6. Click Apply

Creating a new Workspace

Once this is complete, your Workspace is ready. You can now publish your report.

Uploading and publishing a Power BI report from Power BI desktop.

Now we will upload the .pbix file to the workspace we just created.

How to publish a report to the Workspace step-by-step;

  1. Open your report in Power BI desktop.
  2. On the top right corner of the home ribbon, click ‘Publish’.
  3. Select the workspace you just crated, (e.g. Electronic Sales) from the list of Workspaces that Power BI will display.
  4. Click Select
  5. Power BI will now upload your report. It may take a few seconds to 2 minutes, so give it some time.
  6. You will see a message that shows you have successfully published your report to Power BI Services.

Notification for successful publishing

Until you have confirmed that the report has been published, do not close your Power BI Desktop.
If you close and there’s something wrong, you may have to start the process all over again.

To confirm if the report has been uploaded to the Power BI Service;

  1. Go back to https://app.powerbi.com
  2. Open your Workspace and refresh. You should see your report

Uploaded Report on Workspace

Generating the Embed Code.

Embedding allows the report to be displayed inside a website.
Power BI provides an embed code, that can be copied and pasted in a website.

How to generate a code, step-by-step;

  1. Open your report in the Workspace.
  2. Click ‘File’ at the top of the page.
  3. Select ‘Embed Report’, then click on Website or portal
  4. Click on create Embed code.
  5. Then click Confirm.
  6. Copy the embed code to be used later.

You will now see a pop-up window with the link to embed, and a box with the embed code needed, this is the only correct place to get your embed code from.

Popup with the Iframe

The embed code, is an Iframe (inline frame) which is a HTML tag that allows you to display another webpage inside your webpage.

A typical iframe will look like this;

<iframe title="Electronic_Data" width="1140" height="541.25" src="https://app.powerbi.com/reportEmbed?reportId=1e766837-7d75-4a37-bc3d-3e0ea1f56073&autoAuth=true&ctid=c95984e8-6a70-4512-a440-1c79bca9cc37" frameborder="0" allowFullScreen="true"></iframe>
Enter fullscreen mode Exit fullscreen mode

The width and height parts of the code are flexible, and you can change those to whatever you like. All the other parts however, should remain exactly as they are.

A common mistake often made is using the Share button to embed a report.
The share button generates links accessible only to those that have accounts in your organization. It will therefore not generate an appropriate embed code.

Embedding the report on a webpage

Embedding codes allow integration into websites.

How to do it, step-by-step;

  1. Open any plain text editor, such as VS code or Notepad. Do not use Microsoft Word.
  2. Create an empty .html file.
  3. Add basic HTML structure; 
html
<!DOCTYPE html>
<html>
<head>
<title>Title of report e.g. Electronic Sales Data</title>
</head>
<body>
<h1>Heading e.g. Electronic Sales Dashboard</h1>
<Power BI iframe goes here>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Click file > Save as, and name the file Index.html

That is it, if you double click on the saved html file, it will open on any browser and you can load your report, and see all the interactive report running perfectly.

Successfully embedded Report

Troubleshooting common Issues

If something is not working, it could be one of the following;

Problem: Report requires users to log in
Fix: New workspaces are sometimes set to private by default. Go back to your workspace, click manage access, and add Everyone as Viewer.

Problem: Blank Screen after the publishing and embedding
Fix: Give it time. This is a normal occurrence, as Power BI can take a few minutes for the embed code to work, after publishing.

Problem: The report works on your end but no one else can see it.
Fix:It is possible you used ‘Share’ Button, when embedding, instead of generating the embed code. You might need to generate the embed code anew.

Key Insights and Conclusion

Now that you have learnt this process, you can go ahead and use it for your student projects, portfolios, and for work, absolutely free.

You do not need a paid premium license to embed your Power BI reports.
Every singe feature of your report will work exactly as it does on Power BI Desktop, the slicers, filters and interactions will work just fine inside the Iframe.

In conclusion, you could build the best Power BI report, but if you cannot publish it and share it with other people, it's use may not be maximized, and a lot of insight could be lost.

Top comments (0)