topic Re: Javascript api in Developer

Javascript api

GJDealogic — Mon, 14 Jan 2019 10:20:08 GMT

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

Re: Javascript api

TedPattison — Tue, 15 Jan 2019 13:31:52 GMT

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?

Re: Javascript api

v-jiascu-msft — Wed, 16 Jan 2019 07:23:49 GMT

Hi Gary,

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

Best Regards,

Re: Javascript api

GJDealogic — Wed, 16 Jan 2019 09:08:02 GMT

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

Re: Javascript api

TedPattison — Wed, 16 Jan 2019 11:50:19 GMT

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

Re: Javascript api

GJDealogic — Wed, 16 Jan 2019 13:30:12 GMT

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

Re: Javascript api

TedPattison — Wed, 16 Jan 2019 14:51:06 GMT

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.

Re: Javascript api

GJDealogic — Wed, 16 Jan 2019 14:57:40 GMT

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.