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. Acr...
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]);

     

TedPattison's avatar
TedPattison
Icon for Microsoft Employee rankMicrosoft 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
      Icon for Microsoft Employee rankMicrosoft 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]);

       

      • Anonymous's avatar
        Anonymous
        Not applicable
        7 years ago

        Got it! I'm Away. many thanksTed!

         

        One thing. Perfomance. When I first load my .cshtnl page with the embedded report it flashed the power BI icon and the report loads into the iFram moments later. If I f5 the page to refresh the page reload but there is often a wait of up to a few mins for the emmeded report to load. Why the delay, it is that i'm just in dev and have to wait for powerBI.com to deliver me the report and if I had some dedicated capacity I'd get a quicker return?

         

        Rgds

         

        Gary