Get all pages of a embedded power bi report

Question

I'm developing a embedded power bi application in angular 4. This application groups several reports (stored on Azure) and i would like to retrieve all pages of each report without having to load it into a container. The power bi api apparently doesn't allow this; is there a way to do it?

Answer 1

Unfortunately, there is no way to do so using the current REST APIs Power BI has. You would probably need to use preload (or Warm-starting) to load the metadata of the report without having to render it to screen.

See here for more info: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API

Answer 2

I know it's late but possible useful for others like me looking for some code snippets The following gets all report pages and creates buttons to embed them on a different page.

Note that this is from ASP.NET CORE MVC and I can render my secure embed information from the supplied model.

Hope this helps...

$(document).ready(function() {

        var preloadElement = powerbi.preload({ type: 'report', baseUrl: 'https://embedded.powerbi.com/reportEmbed' });

        $(preloadElement).on('preloaded', function () {
            setupEnhancedReportLinks("#enhanced-report-container", @Json.Serialize(Model.EnhancedReports));
        });

    });


function setupEnhancedReportLinks(containerName, reportsModel) {

        $.each(reportsModel, function () {

            const config = {
                type: 'report',
                id: this.id,
                embedUrl: this.embedUrl,
                accessToken: this.embedToken.token,
                tokenType: models.TokenType.Embed,
                permissions: models.Permissions.All,
                viewMode: models.ViewMode.View,
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false
                }
            };

            let elements = [];
            elements.push($("<h4> ").attr({ id: `title-for-${config.id}` }).text(this.displayName));
            elements.push($("<div>").attr({ id: `buttons-for-${config.id}` }));

            // Note this element is hidden; loading a report still requires a page element to contain it, so we hide it on creation
            elements.push($("<div>").attr({ id: `report-for-${config.id}` }).hide());

            // add all report information into the main dom element
            $(containerName).append(($("<div>").attr({ id: `container-for-${config.id}`, 'class': 'well col-lg-12' }).append(elements)));

            // Load the report
            // fetch, then iterate the pages to create the buttons which are added to the report's button container
            var report = powerbi.load($(`#report-for-${config.id}`)[0], config);
            report.on('loaded',function() {

                report.getPages().then(function (pages) {
                    $.each(pages, function() {
                        console.log("is this a page", this, config);
                        $(`#buttons-for-${config.id}`)
                            .append($('<a>')
                                .text(this.displayName)
                                .attr({
                                    href: `/EmbeddedReport/EmbedReport?reportId=${config.id}&reportSection=${this.name}`,
                                    class: 'enh-button' 
                                }
                        ));
                    });
                });
            });
        });
    }