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

Next up in the FabCon + SQLCon recap series: The roadmap for Microsoft SQL and Maximizing Developer experiences in Fabric. All sessions are available on-demand after the live show. Register now

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
New to Fabric survey Carousel

New to Fabric Survey

If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Join our Fabric User Panel

Join our Fabric User Panel

Share feedback directly with Fabric product managers, participate in targeted research studies and influence the Fabric roadmap.

March Power BI Update Carousel

Power BI Community Update - March 2026

Check out the March 2026 Power BI update to learn about new features.