Advance your Data & AI career with 50 days of live learning, dataviz contests, hands-on challenges, study groups & certifications and more!
Get registeredJoin us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM. Register now.
how to create custom filters for power bi embedded reports using javascript
I have created asp.net application, in that I had embedded power bi report in my application, but my requirements is I want to create custom filters in asp.net application for power bi reports. report should be filter by web application's filter.
Solved! Go to Solution.
The Power BI Javascript support set filter when embedding. Check this wiki. You can find a more integrated live demo by clicking Custom Filter Pane.
A simple demo I use to test for your reference.
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'token',
embedUrl: 'embedURL'
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
var Filter1 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "Table1",
column: "T1id"
},
logicalOperator: "OR",
conditions: [
{
operator: "Contains",
value: "id1"
}
]
}
report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
return report.setFilters(filters);
});
});
}
function reloadreport(){
var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);
};
</script>
<div id="reportContainer"></div>
</html>
The Power BI Javascript support set filter when embedding. Check this wiki. You can find a more integrated live demo by clicking Custom Filter Pane.
A simple demo I use to test for your reference.
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'token',
embedUrl: 'embedURL'
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
var Filter1 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "Table1",
column: "T1id"
},
logicalOperator: "OR",
conditions: [
{
operator: "Contains",
value: "id1"
}
]
}
report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
return report.setFilters(filters);
});
});
}
function reloadreport(){
var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);
};
</script>
<div id="reportContainer"></div>
</html>
Join the Fabric FabCon Global Hackathon—running virtually through Nov 3. Open to all skill levels. $10,000 in prizes!
Check out the October 2025 Power BI update to learn about new features.