Forum Discussion

andriikubrak's avatar
andriikubrak
Frequent Visitor
8 years ago

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.factori...
Need Help
Eric_Zhang's avatar
Eric_Zhang
Microsoft Employee
8 years ago
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's avatar
    sdaviesnz
    Frequent Visitor
    8 years ago

    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's avatar
      sdaviesnz
      Frequent Visitor
      8 years ago

      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's avatar
        sdaviesnz
        Frequent Visitor
        8 years ago

        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