React application that has lot of Power BI embedded as an iframe?

[hacayjlc]

Has anyone worked with React and Power BI embedded as an iframe? I’ve mostly embedded Power BI into Power Platform (like Power Apps), but I’m wondering if it works the same way in React.

For example, if I have a React app where users can upload a dataset to a database connected to Power BI, can I embed tiles/charts in iframes on the frontend? And if users upload new data, will the visuals update automatically in the embedded charts? Also, can React handle custom slicers/filters that interact with Power BI visuals?

I know Power BI lets you create dropdowns and filters in the report itself, but I’m curious if React can do something similar on its side. Lastly, is it possible to have a custom dropdown in React where users can pick different chart types to display? I was thinking about maybe showing/hiding visuals in the same spot depending on the selection. This might mean using multiple iframes, but from what I’ve seen, performance with iframe embedding shouldn’t be an issue. Anyone tried something like this or have tips?

[v-mengmli-msft · Accepted solution]

Hi @hacayjlc ,

You can embed Power BI reports directly into web pages using the iframe tag. Simply place the embed URL of the report into the src attribute of the iframe and set the appropriate height and width. For scenarios that require more advanced functionality and customization, such as Embedded tiles or dashboards, you can use Power BI Embedded Analytics to embed dashboards into applications via API. 

Links:

How to embed a Power BI item in a React app | Microsoft Learn

Embed a dashboard in Power BI embedded analytics | Microsoft Learn

For Import mode datasets, you need to configure a refresh of the dataset on the PowerBI to get the latest data. You can then use JavaScript in the web page embedded with the report to periodically refresh the iframe to display the latest data.

Links:

Data refresh in Power BI - Power BI | Microsoft Learn

To implement the filter of embedded Power BI report in the web page, you can use the following methods:

1. URL parameter filtering. Filter a report using query string parameters in the URL - Power BI | Microsoft Learn

<iframe src="https://app.powerbi.com/reportEmbed?reportId=<ReportId>&groupId=<GroupId>&filter=Table/Column eq 'Value'" width="800" height="600"></iframe>

2. JavaScript API: Using the Power BI JavaScript API, filters can be set dynamically in web pages. 

3. Customize the filter pane: You can create your own custom filter panes and apply these filters to embedded reports using JavaScript. For example, create a filter form where the user can select filters and then apply those criteria to the report through JavaScript.

Best regards,

Mengmeng Li