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

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more

Reply
khushbu123
Frequent Visitor

Adding Filter using JavaScript API

I have smilar issue but When I am adding Filter I have multiple parameter so if one of them is blank or null its not throwing filter at all.

 

 

following is prototype of my code

<script src="https://npmcdn.com/es6-promise@3.2.1"></script>
<script src="~/localpath/scripts/powerbi.js"></script>

 

 

<script>

const filter1= {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table1",
column: "column1",
},

operator: "In",
values: [$("#val1").val()]
};

const filter2 = {

$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table2",
column: "column2",
},

operator: "In",
values: [$("#val12").val()],
};

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
filters: [filter1, filter2],
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};


var reportContainer = $('#DivContainer')[0];

// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);

report.setFilters([filter1, filter2]);

</script>

 

so If filter2 is blank or null its not filtering Filter1 my charts ges blanks after this

2 REPLIES 2
Anonymous
Not applicable

Why dont you just put an if statement around the whole thing?  Check the values before even creating the filter object?  

 

<script>

if($("#val1").val() && $("#val12").val()] {

const filter1= {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table1",
column: "column1",
},

operator: "In",
values: [$("#val1").val()]
};

const filter2 = {

$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table2",
column: "column2",
},

operator: "In",
values: [$("#val12").val()],
};

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
filters: [filter1, filter2],
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};


var reportContainer = $('#DivContainer')[0];

// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);

report.setFilters([filter1, filter2]);
}
</script>

 

 You can aslo check that the .val() != "" if you wanted too.  If you want filter1 to run even if filter2 is not valid then 

 

<script>
let filter1 = null;
let filter2 = null;
if($("#val1").val() && $("#val1").val() != "") {

filter1= {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table1",
column: "column1",
},
}
operator: "In",
values: [$("#val1").val()]
};
if($("#val12").val() && && $("#val2").val() != "") {
filter2 = {

$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Table2",
column: "column2",
},

operator: "In",
values: [$("#val12").val()],
};
}

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};


var reportContainer = $('#DivContainer')[0];

// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);
if(filter1 && filter2) {
report.setFilters([filter1, filter2]);
} else if(filter1) {
report.setFilters([filter1]);
} else if(filter2) {
report.setFilters([filter2]);
}
</script>

The main thing is to set those only if there are values available,  do not set the fitlers in the config, and instead set them where you are below, but make sure the filter does not equal null before adding it. Hope that helps.

JoshoDotNZ
Frequent Visitor




Soooo, in theroy.

According to the Wiki https://github.com/Microsoft/PowerBI-JavaScript/wiki/Filters

report.removeFilters();

Will remove the filter, but have never managed to get that to work ?!?!

 

Also you shouldn't need this line in your code, as you have already applied it in the config

report.setFilters([filter1, filter2]);

So leading into that, you should be able to remove the filters from the config before pulling the report, saving more qureys to PowerBI Embedded

 

Just after var config{}
Stupid code

 if ($("#val1").val() == "" && $("#val12").val() == "") {
config.filters = [];
} else if ($("#val1").val() == "") {
config.filters = [filter2];
} else if ($("#val12").val() == "") {
config.filters = [filter1];
}

 Haven't tested or know if syntax is correct lol.

 

If it works solution it! if you change comment in what you did so others can learn!

Helpful resources

Announcements
Power BI DataViz World Championships

Power BI Dataviz World Championships

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!

December 2025 Power BI Update Carousel

Power BI Monthly Update - December 2025

Check out the December 2025 Power BI Holiday Recap!

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.