Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more.
Get startedGrow your Fabric skills and prepare for the DP-600 certification exam by completing the latest Microsoft Fabric challenge.
Hi. I have a React web application with a power bi report embedded in it. Is there a way to filter data in a report programatically by using an html input text box in the web application?
Solved! Go to Solution.
Here is a code example I have written in React:
import React, { useState, useEffect } from 'react';
import * as pbi from 'powerbi-client';
const Report = () => {
const [report, setReport] = useState(null);
const [inputValue, setInputValue] = useState('');
useEffect(() => {
const embedConfiguration = {
type: 'report',
id: '<REPORT_ID>',
embedUrl: '<REPORT_EMBED_URL>',
accessToken: '<ACCESS_TOKEN>',
tokenType: pbi.models.TokenType.Aad
};
const powerbi = new pbi.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
);
const reportContainer = document.getElementById('reportContainer');
const report = powerbi.embed(reportContainer, embedConfiguration);
setReport(report);
}, []);
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
const applyFilter = () => {
if (report) {
report.getFilters()
.then((filters) => {
const newFilters = [{
...filters,
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "<TABLE_NAME>",
column: "<COLUMN_NAME>"
},
operator: "In",
values: [inputValue]
}];
report.setFilters(newFilters)
.catch((error) => console.error(error));
})
.catch((error) => console.error(error));
}
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button onClick={applyFilter}>Filter</button>
<div id="reportContainer" />
</div>
);
};
export default Report;
If you have any other questions or if there is anything else I can assist with, please let me know.
It's also a good idea to monitor the performance of the report to ensure that it remains fast and responsive even as the volume of data grows over time.
Power BI provides several performance monitoring and optimization tools that can help you identify and resolve performance issues.
If you are interested in server-side embedding, you can make use of the Power BI .NET Client Library, which provides a convenient way to interact with the Power BI REST API from .NET applications.
In any case, I would recommend thoroughly testing the solution in a development environment before deploying it to production, to ensure that it meets your requirements and is working as expected.
This can be especially useful for filtering reports programmatically as it provides a more secure and scalable solution compared to client-side embedding.
Another thing to keep in mind is that Power BI offers both client-side and server-side embedding options. When embedding a report in a React web application, you can choose to either embed the report directly on a client-side component, or you can embed the report on a server-side component and have it rendered in the client-side component. Each option has its own advantages and disadvantages, and the choice will depend on your specific use case and requirements.
Hello @Anonymous,
Yes, you can programmatically filter data in a Power BI report that is embedded in a React web application. You can use the Power BI JavaScript API to interact with the embedded report and apply filters. Here is an outline of the steps:
Another option to filter data programmatically in Power BI is to use the Power BI REST API. You can programmatically set filters on a report by making a REST API request to the Power BI service and passing in the filter values that you want to apply.
This can be done using any programming language that can make HTTP requests, such as JavaScript. To get started, you can refer to the official Power BI REST API documentation, which provides information on how to authenticate, retrieve reports, and apply filters.
Note that you will need to replace the placeholders (e.g. <REPORT_ID>, <REPORT_EMBED_URL>, <ACCESS_TOKEN>, <TABLE_NAME>, <COLUMN_NAME>) with the actual values for your report.
This is just a basic example. You can modify it according to your needs.
Here is a code example I have written in React:
import React, { useState, useEffect } from 'react';
import * as pbi from 'powerbi-client';
const Report = () => {
const [report, setReport] = useState(null);
const [inputValue, setInputValue] = useState('');
useEffect(() => {
const embedConfiguration = {
type: 'report',
id: '<REPORT_ID>',
embedUrl: '<REPORT_EMBED_URL>',
accessToken: '<ACCESS_TOKEN>',
tokenType: pbi.models.TokenType.Aad
};
const powerbi = new pbi.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
);
const reportContainer = document.getElementById('reportContainer');
const report = powerbi.embed(reportContainer, embedConfiguration);
setReport(report);
}, []);
const handleInputChange = (event) => {
setInputValue(event.target.value);
};
const applyFilter = () => {
if (report) {
report.getFilters()
.then((filters) => {
const newFilters = [{
...filters,
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "<TABLE_NAME>",
column: "<COLUMN_NAME>"
},
operator: "In",
values: [inputValue]
}];
report.setFilters(newFilters)
.catch((error) => console.error(error));
})
.catch((error) => console.error(error));
}
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button onClick={applyFilter}>Filter</button>
<div id="reportContainer" />
</div>
);
};
export default Report;
4. Use the Power BI JavaScript API's "setFilters" method to apply a filter to the embedded report based on the value entered in the input text box.
3. Listen to the "change" event of the input text box and retrieve its value.
Dankie,!
2. Create an HTML input text box in your React application.
1. Embed the Power BI report in your React application using the Power BI JavaScript API.
Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.
Ask questions in Eventhouse and KQL, Eventstream, and Reflex.
User | Count |
---|---|
10 | |
3 | |
3 | |
2 | |
2 |