Forum Discussion

Pitchaimuthu's avatar
Pitchaimuthu
Icon for Helper II rankHelper II
9 years ago
Solved

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 w...
Need Help
  • Eric_Zhang's avatar
    Eric_Zhang
    9 years ago

    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>
Eric_Zhang's avatar
Eric_Zhang
Icon for Microsoft Employee rankMicrosoft Employee
9 years ago

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>