Some API functions don't work using TypeScipt

[andriikubrak]

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?

[Eric_Zhang]

---

@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.

[sdaviesnz]

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?

[sdaviesnz]

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 => {

    // ...

  }

);

[sdaviesnz]

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