Forum Discussion

v-vaaga's avatar
v-vaaga
Frequent Visitor
9 years ago

Can we add report level filter in power bi visuals from code (JavaScript)

Can we add report level filter in power bi visuals from code (JavaScript)

6 Replies

  • Eric_Zhang's avatar
    Eric_Zhang
    Microsoft Employee
    9 years ago
    v-vaaga wrote:

    Can we add report level filter in power bi visuals from code (JavaScript)

    v-vaaga

    Yes.

    You can check the JavaScript wiki Filters.

     

    Here's a simple demo to practise.

    <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  Filter = {
   $schema: "http://powerbi.com/product/schema#advanced",
  target: {
    table: "table Name",
    column: "column Name"
  },
  logicalOperator: "OR",
  conditions: [
    {
      operator: "Contains",
      value: "CN"
    },
    {
      operator: "Contains",
      value: "CO"
    }
  ]
}
 

var embedConfiguration = {
    type: 'report',
    accessToken: 'eyJ..YourTokenHere..w',
    id: 'report ID',
    embedUrl: 'yourEmbedUrlHere',

}; 
 

var $reportContainer = $('#reportContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
 
report.on('loaded', event => {
  report.getFilters()
    .then(filters => {
      filters.push(Filter);
      return report.setFilters(filters);
    });
});

}
</script>

<div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

</html>
    • v-vaaga's avatar
      v-vaaga
      Frequent Visitor
      9 years ago

      Thanks. This approach works fine if we are embedding PowerBI visuals into our html or aspx page. 

      But my requirement is to make it work in online PowerBI (msit.powerbi.com/groups/Some-Report-GUID). I have my custom visual and its corresponding JS. So there I need to add report level filter from code (JavaScript) i.e., without dragging and dropping that filter column.

    • bhanupowerbi's avatar
      bhanupowerbi
      Frequent Visitor
      9 years ago

      Hi Eric_Zhang,

       

      I tried your solution but when my application try to load report, it shows "The Content is not available", But when I load report using  @Html.PowerBIReportFor(m => m.Report, new { id = "pbi-report", style = "height:85vh", powerbi_access_token = Model.AccessToken }) with filter, It getting loadded.

      Is I am doing something wrong?

      Pleae help

      • Eric_Zhang's avatar
        Eric_Zhang
        Microsoft Employee
        9 years ago
        bhanupowerbi wrote:

        Hi Eric_Zhang,

         

        I tried your solution but when my application try to load report, it shows "The Content is not available@", But when I load report using  @Html.PowerBIReportFor(m => m.Report, new { id = "pbi-report", style = "height:85vh", powerbi_access_token = Model.AccessToken }) with filter, It getting loadded.

        Is I am doing something wrong?

        Pleae help

         

        "The Content is not available" is usually due to an invalid token. What do you get from the network traffic in a dev tool(F12 in Chrome).