topic Some API functions don't work using TypeScipt in Developer

Some API functions don't work using TypeScipt

andriikubrak — Wed, 15 Nov 2017 06:40:45 GMT

Hello

I am trying to embed report using TypeScript:

import * as pbi from 'powerbi-client';

let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report = powerbi.embed(reportContainer, config);

This works fine but I want to set or get filters:

report.getFilters();

And I am getting an error "Property 'getFilters' does not exist on type 'Embed'". It works well in JavaScript. Any ideas?

Re: Some API functions doesn't work using TypeScipt

Eric_Zhang — Wed, 15 Nov 2017 06:12:51 GMT

@andriikubrak wrote:

Hello

I am trying to embed report using TypeScript:
import * as pbi from 'powerbi-client';

let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report = powerbi.embed(reportContainer, config);
This works fine but I want to set or get filters:
report.getFilters();
And I am getting an error "Property 'getFilters' does not exist on type 'Embed'". It works well in JavaScript. Any ideas?

@andriikubrak

Thanks for your reporting. I've submitted an issue in the Power BI Javascript git lib. We may need more information from you to reproduce the issue.

Re: Some API functions doesn't work using TypeScipt

sdaviesnz — Wed, 11 Jul 2018 02:59:43 GMT

Hi,

I have the same issue with typescript and Angular 2+. Any response back on this? I installed the powerbi-client Javascript module and am getting the same thing.

import * as pbi from 'powerbi-client';

let reportContainer = <HTMLElement>document.getElementById("reportSdkEmbedded");
// Embed the report and display it within the div container. Should be injected as a service properly
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let report= powerbi.embed(reportContainer, config);

In Visual Studio 2017 with Intellisense, typing "report." doesn't offer you any options for .getFilters(), .setFilters(), .settings, etc. What's going on?

Re: Some API functions doesn't work using TypeScipt

sdaviesnz — Wed, 11 Jul 2018 04:03:26 GMT

Just to add further, I've done some research and it looks like there are problems with the Typescript typings for the PowerBI-Javascript node package. It seems like it's good with Javascript/JQuery but not so much Typescript.

I was able to get something going like this (notice, I'm not using the "embed" command):

let report2 = new pbi.Report(powerbi, reportContainer, config);
report2.getFilters()
.then(filters => {

// ...

}

);

Re: Some API functions doesn't work using TypeScipt

sdaviesnz — Thu, 12 Jul 2018 03:29:11 GMT

If anyone's still stuck on getting PowerBI-Javascript to work in Typescript, here's the hint that got it going for me.

in Typescript/Angular, you have to refer to the Report model, not the Embed model as in the Javascript examples
when you refer to your report container div, make sure it's as an <HTMLElement>, e.g

let reportContainer =<HTMLElement>document.getElementById("reportSdkEmbedded");

when you call powerbi.embed(..), make it <pbi.Report>powerbi.embed(...) instead

Pasting my example below to call report.getFilters

(note, I have an Angular component variable:

report: pbi.Report;

)

let reportContainer = <HTMLElement>document.getElementById("reportSdkEmbedded");
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

this.report = <pbi.Report>powerbi.embed(reportContainer, config);

this.report.on("loaded",
() =>

{

this.report.getFilters()
.then(allTargetFilters =>

{
console.log("allTargetFilters:");
console.log(allTargetFilters);
});
});

For more info, see the answers here:

https://community.powerbi.com/t5/Developer/Angular-2-and-Power-BI-Embedded/td-p/112226