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

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Pitchaimuthu
Helper II
Helper II

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.

1 ACCEPTED SOLUTION
Eric_Zhang
Employee
Employee

@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

2 REPLIES 2
Eric_Zhang
Employee
Employee

@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>

Thank you @Eric_Zhang, Now the filter get works, 

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.