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
PBI User Groups

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Get Ready for Power BI Dev Camp

Power BI Dev Camp - June 24th

Mark your calendars and join us for our next Power BI Dev Camp!

Top Kudoed Authors