While trying to get the Visuals from a Embedded Power BI report in .Net MVC Application, I tried the below mentioned code from Embedded Power BI Playground site. But I am not able to get the Visuals. On debugging, I could see values for getPages property of Report as:

getPages: ƒ ()arguments: null caller: null length: 0 name: ""

Also the console.log(report.getPages()); gives

[[PromiseStatus]]: "pending" [[PromiseValue]]: undefined

PF the code which I tried:

// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

// Retrieve the page collection and get the visuals for the first page.
report.getPages()
    .then(function (pages) {
        // Retrieve active page.
        var activePage = pages.filter(function (page) {
            return page.isActive
        })[0];

        activePage.getVisuals()
            .then(function (visuals) {
                Log.log(
                    visuals.map(function (visual) {
                        return {
                            name: visual.name,
                            type: visual.type,
                            title: visual.title,
                            layout: visual.layout
                        };
                    }));
            })
            .catch(function (errors) {
                Log.log(errors);
            });
    })
    .catch(function (errors) {
        Log.log(errors);
    });

While trying to get the Visuals from a Embedded Power BI report in .Net MVC Application, I tried the below mentioned code from Embedded Power BI Playground site. But I am not able to get the Visuals. On debugging, I could see values for getPages property of Report as:

getPages: ƒ ()arguments: null caller: null length: 0 name: ""

Also the console.log(report.getPages()); gives

[[PromiseStatus]]: "pending" [[PromiseValue]]: undefined

PF the code which I tried:

// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

// Retrieve the page collection and get the visuals for the first page.
report.getPages()
    .then(function (pages) {
        // Retrieve active page.
        var activePage = pages.filter(function (page) {
            return page.isActive
        })[0];

        activePage.getVisuals()
            .then(function (visuals) {
                Log.log(
                    visuals.map(function (visual) {
                        return {
                            name: visual.name,
                            type: visual.type,
                            title: visual.title,
                            layout: visual.layout
                        };
                    }));
            })
            .catch(function (errors) {
                Log.log(errors);
            });
    })
    .catch(function (errors) {
        Log.log(errors);
    });

• javascript
• powerbi
• powerbi-embedded

Share Improve this question Follow edited Jun 30, 2020 at 10:02 Hakan Dilek 2,25622 gold badges2424 silver badges3636 bronze badges asked Jun 30, 2020 at 8:19 ShilpaShilpa 5111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You have a timing issue. Use the PowerBI event handler and don't apply changes to the report unless you know is fully loaded, rendered and available. To do this you can make sure of the Rendered event.

https://github./Microsoft/PowerBI-JavaScript/wiki/Handling-Events

Here is an example getting a page, getting a visual from the page, and exporting the data from the visual.

var report = powerbi.embed(reportContainer, config);

report.on("rendered", function (event) {
  // do stuff here like get pages, export data, apply filters or whatever it is you want to do to manipulate the report

  report.getPages().then((pages) => {
    pages[0].getVisuals().then((visuals) => (d = visuals));
  });

  var v = d[1].exportData(models.ExportDataType.Summarized, 100);
});