cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
andriikubrak
Frequent Visitor

Some API functions don't work using TypeScipt

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?

4 REPLIES 4
Eric_Zhang
Microsoft
Microsoft


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

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?

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

    // ...

  }

);

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

Helpful resources

Announcements
June 2022 update 768X460.jpg

Check it out!

Click here to read more about the June 2022 updates!

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power BI Dev Camp Session 23 768x460.jpg

Check it Out!

Mark your calendars and join us on Thursday, June 30 at 11a PDT for a great session with Ted Pattison!

June 20 episode 7 with aka link 768x460.jpg

The Power BI Community Show

Join us on June 20 at 11 am PDT when Kim Manis shares the latest on Azure Synapse analytics, the Microsoft Intelligent Data Platform, and notable Power BI Updates from Microsoft Build 2022.