Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.
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.
Solved! Go to Solution.
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>
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>
User | Count |
---|---|
13 | |
5 | |
2 | |
1 | |
1 |
User | Count |
---|---|
24 | |
3 | |
3 | |
2 | |
2 |