Embed with API REST

[Marrafeiro]

Hi everyone,

I already saw posts with this problem, but all of them was a little old.

I'm embeding my power bi reports in a Angular project. I already can embed and show the report. 

But now i want change pages with a button. I already search everywhere and everything i found didn't work.

Anyone with this problem recently?

thank you in advance.

[Anonymous]

HI @Marrafeiro 

I have this working with a couple of projects, 1 plain JS site - and 1 using React JS.
Assume you have tried something along the lines of the notes in the JavaScript Wiki? https://github.com/Microsoft/PowerBI-JavaScript/wiki/Page-Navigation

One thing to keep in mind is that the page name you need to supply is the internal name and not the page display name.
It is a good idea to use the 'report.GetPages' function in order to get the array of pages, before using one of the array items and setting it to be 'isActive'.

[Marrafeiro]

Yes, i already tried it. But it give an error in getPages. Says i'm working in an Embed type.

just for testing i have this:

var embedConfiguration: IEmbedConfiguration = {

      type: 'report',

      id: "21c52b89-c19d-4df8-.........................",

      embedUrl:

      'https://app.powerbi.com/reportEmbed?' +

      'reportId=21c52b89-c19d-4df8....................' +

      '&groupId=387dda6b-d685-4243-8a................',

      settings: {

        filterPaneEnabled: false,

        navContentPaneEnabled: false

      },

      accessToken: this.embed

    };

this.powerBiService.embed(this.pbiContainerElement, embedConfiguration)

if i create a report with type Report

it don't let me do that:

report = this.powerBiService.embed(this.pbiContainerElement, embedConfiguration)

[Anonymous · Accepted solution]

The call to powerBiService.embed(...) will return an object type of pbi.Embed by default.

In the React & Typescript project I am developing with - I can safely cast the output as type 'pbi.Report';
This object then has the function 'getPages' - which is not available on the more generic pbi.Embed object.

report = pbiService.embed(container, embedConfiguration) as pbi.Report;

You can safely cast embed objects to the expected type (Dashboard/Report/Tile) as long as it matches the configuration.

Unfortunately I dont have an Angular project to confirm if there is something else going on.

[Marrafeiro]

Thank you very much. showing your example helped me a lot. 

I was missing the casting in Embed object to Report Object.

Now i already can get the pages and change it.

Thank you a lot

[Anonymous]

Excellent - Glad you got it working!