Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

Javascript api

HI

 

I am a web developer new to PowerBI. The team I am in looks after the company CRM which includes financial and analytics data. We are starting to use PowerBI to embed reports in our pages. Across the site we have a common theme with our own filters, dropdowns, customised date pickers etc. We want to keep a consistant look and feel and use these custom filters in conjunction with the embedded report so need to know 

a) If this is possible - I'm assuming it is

b) How to use the javascript api to do this.

 

Can anyone point me in the direction of some examples and relevant documentation.

 

Thanks

 

Gary

Need Help
Tutorial Requests
  • TedPattison's avatar
    TedPattison
    7 years ago

    Yes, you can set filters uisng JavaScript and your kendo UI controls. Begin by embedding a report by calling powerbi.embed and holding on to the reference to the report object.

     

    var config = {
  type: 'report',
  id: embedReportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);

    After that, you can set a filter on the embedded report by calling report.setFilters.

     

    let states = ["FL","GA","NC"]

const basicStateFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Customers",
    column: "State"
  },
  operator: "In",
  values: states
}

// apply filter to report
report.setFilters([basicStateFilter]);

     

7 Replies

  • TedPattison's avatar
    TedPattison
    Microsoft Employee
    7 years ago

    It is not clear to me what you are asking. Are you trying to match up the styling of what is inside the report with report themes with the UI experience you have created next to the report on the hosting page? Or are you asking whether the UI experience you have built outside of a Power BI embedded report and interact with the report and apply filters interactively?

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      Hi Ted,

       

      Yes to interact with the report. We use kendo ui controls on our pages and have customised them to our own liking eg our Client dropdown has selections

       

      All Clients

      -----------

      My Clients

      -----------

      EMEA Clients

      APAC CLients

      -----------

      Client 1

      Client 2

      etc etc

       

      Id want to select one of those options and then (depending on what client id(s) the selection resolves to in our code) filter the embedded repport by either 1 or more clients.

       

      Regards

       

      Gary

      • TedPattison's avatar
        TedPattison
        Microsoft Employee
        7 years ago

        Yes, you can set filters uisng JavaScript and your kendo UI controls. Begin by embedding a report by calling powerbi.embed and holding on to the reference to the report object.

         

        var config = {
  type: 'report',
  id: embedReportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.embed(embedContainer, config);

        After that, you can set a filter on the embedded report by calling report.setFilters.

         

        let states = ["FL","GA","NC"]

const basicStateFilter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Customers",
    column: "State"
  },
  operator: "In",
  values: states
}

// apply filter to report
report.setFilters([basicStateFilter]);