Forum Discussion

aroyappan's avatar
aroyappan
Frequent Visitor
9 years ago
Solved

Addling filter using javascript API (Power BI Service)

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: "['[email protected]']"
};

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.

Need Help
  • Eric_Zhang's avatar
    Eric_Zhang
    9 years ago

    aroyappan

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

    values: ['[email protected]'] //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>

     

2 Replies

Replies have been turned off for this discussion
  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago

    aroyappan

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

    values: ['[email protected]'] //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's avatar
      khushbu123
      Frequent Visitor
      6 years ago

      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