Reply
Highlighted
Frequent Visitor
Posts: 8
Registered: ‎02-24-2017
Accepted Solution

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.


Accepted Solutions
Moderator
Posts: 1,284
Registered: ‎03-06-2016

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

[ Edited ]

@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


All Replies
Moderator
Posts: 1,284
Registered: ‎03-06-2016

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

[ Edited ]

@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>
Frequent Visitor
Posts: 8
Registered: ‎02-24-2017

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

Thank you @v-lvzhan-msft, Now the filter get works,