Javascript api

[GJDealogic]

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

[v-jiascu-msft]

Hi Gary,

Please refer to the live demo. It would be easy for you with the demo. 

Best Regards,

[TedPattison]

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?

[GJDealogic]

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 · Accepted solution]

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

[GJDealogic]

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

[TedPattison]

There are many reason why you might get this type of performance hit when refreshing a page with an embedded object but I cannot really say what you issue is. I would try using fiddler to see if the hold up is with acquirng the access token from Azure AD or calling the Power BI Service API to retrieve embed tokens and embedding data for a report. However, you should NOT ever require a dedicated capacity when developing. I don't think moving the Power BI report you are embedding into a app workspace in a dedicated capacity will speed things up as I suspect your performance issues lie elsewhere.

[GJDealogic]

Ok Ted, Thanks that eliminates one avenue of figuring it out. I'll take a closer look at Fiddler, will all the excitiment of getting up and going with this I've not yet got down and dirty with Fiddler.