topic Re: Filtering an Embedded Power BI Report via HTML inputs in Developer

Filtering an Embedded Power BI Report via HTML inputs

Anonymous — Thu, 09 Feb 2023 18:39:56 GMT

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?

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:47:41 GMT

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:

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:47:59 GMT

1. Embed the Power BI report in your React application using the Power BI JavaScript API.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:48:13 GMT

2. Create an HTML input text box in your React application.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:48:27 GMT

3. Listen to the "change" event of the input text box and retrieve its value.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:48:40 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:49:16 GMT

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;

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:49:45 GMT

This is just a basic example. You can modify it according to your needs.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:49:55 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:50:38 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:50:48 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:51:27 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:51:42 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:51:57 GMT

This can be especially useful for filtering reports programmatically as it provides a more secure and scalable solution compared to client-side embedding.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:52:51 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:53:08 GMT

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.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:53:23 GMT

Power BI provides several performance monitoring and optimization tools that can help you identify and resolve performance issues.

Re: Filtering an Embedded Power BI Report via HTML inputs

Sahir_Maharaj — Thu, 09 Feb 2023 19:54:00 GMT

If you have any other questions or if there is anything else I can assist with, please let me know.

Re: Filtering an Embedded Power BI Report via HTML inputs

RaphaëlGargie — Thu, 02 Mar 2023 18:54:33 GMT

Dankie,!