rosemutai

Posted on Apr 10

Publishing and Embedding Power BI Reports on the Web with IFrames

#analytics #beginners #website

Microsoft Power BI is a tool created by Microsoft to turn raw data into interactive insights.
The power of Microsoft Power BI lies in its ability to pull data from many sources, e.g., web, excel, clean the data and then create visuals that are easy to understand.

Key Components

Power BI Desktop
Power BI Service
Power BI Mobile

Why Publish and Embed Reports?

After creating reports, there is need to share with your teammates and stakeholders. Hence the need to publish these reports.
Publishing to the web allows users to make reports publicly available and accessible on the internet creating interactive visuals that anyone with a URL can view without signing in.

Iframe

This is a HTML element used to embed another document or website within a web page,
You will use iframes to embed your reports on the web.

Syntax

<iframe src="url" title="description"></iframe>

Use the height and width attributes to specify the size of the iframe. The height and width are specified in pixels by default.

Publishing Process

Create a report in Power BI Desktop
Publish it in Power BI Service
Generate an embedded code
Embed it in a website

Create a report in Power BI Desktop

First, start by building your report in Power BI Desktop.
You can include: KPI cards, trend visuals, category breakdowns, filters and slicers, etc.

Create a workspace

A workspace is a Power BI container for dashboards, reports, workbooks, datasets, and dataflows.

How to create a workspace

Go to Power Bi Service: https://app.powerbi.com
Click Workspaces in the left pane
Select on +New workspace button
Fill in the details: workspace name etc.

Publish your Report

Once your report is ready we will upload it in the Power BI Service by following these steps:

Open your report in Power BI Desktop
Click Publish
Sign into your account if not signed in
Select your workspace

Click select button After publishing the report, it is now available online.

Generate the Embedded Code

How to generate the Embedded Code us

To generate an embedded code, open the report in your workspace and follow these steps:
1.** Click File** --> Embed Report --> Publish to Web

Click Create Embed Code You will get code like this:

<iframe title="Electronics_Sales" width="1140" height="541.25" src="https://app.powerbi.com/reportEmbed?reportId=2bddbd15-9eb5-40c5-bea5-d196cd5f4ee2&autoAuth=true&ctid=c95984e8-6a70-4512-a440-1c79bca9cc37" frameborder="0" allowFullScreen="true"></iframe>

Copy the generated iframe code.

Embedding the report in a website

Now go to your favorite editor where your code is to embed the report.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electronic Sales</title>
</head>
<body>
    <iframe title="Electronics_Sales" width="1140" height="541.25" 
        src="https://app.powerbi.com/reportEmbed?reportId=2bddbd15-9eb5-40c5-bea5-d196cd5f4ee2&autoAuth=true&ctid=c95984e8-6a70-4512-a440-1c79bca9cc37" 
        frameborder="0" allowFullScreen="true">
    </iframe>
</body>
</html>

Test

Always test your report after embedding. You can check for things like:

Does the report load correctly?
Is it responsive on different screen sizes?

Conclusion

Publishing and embedding Power BI reports transforms your dashboards from static files into interactive and shareable web experiences.
Embedding enhances accessibility and presentations.

DEV Community