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;
