Solved: Re: Addling filter using javascript API (Power BI ...

aroyappan · ‎02-27-2017

Hi All,

I'm new to power BI. I added a basic filter to to the report but it doesn't seem to work.

var config = {
    type: 'report',
    accessToken: txtAccessToken,
    embedUrl: txtEmbedUrl,
    id: txtEmbedReportId,
    settings: {
        filterPaneEnabled: true,
    }
};

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

var report = powerbi.embed(reportContainer, config);

var basicFilter = {
    $schema: "http://powerbi.com/product/schema#basic",
    target: {
        table: "Query1",
        column: "Email"
    },
    operator: 'In',
    values: "['test@domain.com']"
};

report.getFilters().then(function (allTargetFilters) {
    allTargetFilters.push(basicFilter);

    // Set filters
    // https://microsoft.github.io/PowerBI-JavaScript/interfaces/_src_ifilterable_.ifilterable.html#setfilters
    report.setFilters(allTargetFilters);
});

Please advice.

Eric_Zhang · ‎02-27-2017

@aroyappan

It is the brakets([]) wrapped by quotes that leads to error.

values: ['test@domain.com'] //remove the quotes

A demo which works perfect in my test, just for your reference. Check more details on PowerBI-JavaScript wiki.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>
 
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 
<script type="text/javascript">
window.onload = function () { 
  var  IamAFilter = {
        $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Questions",
    column: "site"
  },
  operator: "In",
  values: ["stackoverflow"]
}
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'YOUR TOKEN HERE',
    id: 'b7441d21XXXXXXXc5bd6426d',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=b7441d21-XXXXXXXX7c5bd6426d',
	filters:[IamAFilter], // the filters is an array here, you can add more filter like [filter1,filter2,filter3]
	settings: {
        filterPaneEnabled: true //hide the filterPane so that your user can't change the filter to see more data, this is not a strong security, anyone who's familar with javascript can bypass it
    }

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration); 


}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

</html>

View solution in original post

Eric_Zhang · ‎02-27-2017

@aroyappan

It is the brakets([]) wrapped by quotes that leads to error.

values: ['test@domain.com'] //remove the quotes

A demo which works perfect in my test, just for your reference. Check more details on PowerBI-JavaScript wiki.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>
 
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 
<script type="text/javascript">
window.onload = function () { 
  var  IamAFilter = {
        $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Questions",
    column: "site"
  },
  operator: "In",
  values: ["stackoverflow"]
}
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'YOUR TOKEN HERE',
    id: 'b7441d21XXXXXXXc5bd6426d',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=b7441d21-XXXXXXXX7c5bd6426d',
	filters:[IamAFilter], // the filters is an array here, you can add more filter like [filter1,filter2,filter3]
	settings: {
        filterPaneEnabled: true //hide the filterPane so that your user can't change the filter to see more data, this is not a strong security, anyone who's familar with javascript can bypass it
    }

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration); 


}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

</html>

khushbu123 · ‎10-04-2019

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

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]);

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

Addling filter using javascript API (Power BI Service)

Helpful resources

Power BI DataViz World Championships - June 2026

Join our Fabric User Panel

Power BI Community Update - March 2026