Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Join 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.

Reply
Pitchaimuthu
Helper II
Helper II

how to create custom filters for power bi embedded reports using javascript


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.

1 ACCEPTED SOLUTION
Eric_Zhang
Microsoft Employee
Microsoft Employee

@Pitchaimuthu

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>

View solution in original post

2 REPLIES 2
Eric_Zhang
Microsoft Employee
Microsoft Employee

@Pitchaimuthu

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>

Thank you @Eric_Zhang, Now the filter get works, 

Helpful resources

Announcements
FabCon Global Hackathon Carousel

FabCon Global Hackathon

Join the Fabric FabCon Global Hackathon—running virtually through Nov 3. Open to all skill levels. $10,000 in prizes!

October Power BI Update Carousel

Power BI Monthly Update - October 2025

Check out the October 2025 Power BI update to learn about new features.

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.