Bookmark state is not applied correctly on load

[Piloos]

Hi,

I am using the most recent version of the powerbi-client (2.18.0) and I am encountering the following issue:

When you specify a bookmark state in the embed configuration, the bookmark state is not applied correctly.  Certain visuals are sliced correctly.

When you apply the same bookmark state after the report has rendered, the state is correcty applied.

The issue can be reproduced easily on the Power BI embedded playground with the following PBIX (https://bizzcontrol-public.s3.eu-central-1.amazonaws.com/report_429.pbix) and the following snippets:

Apply bookmark state on load.

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
        },
        bookmark: {
            state: "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"
        } 
    };

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

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

// Insert here the code you want to run after the report is rendered

Apply state after render:

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
        },
    };

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

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        report.bookmarksManager.applyState("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");
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

// Insert here the code you want to run after the report is rendered

[v-chuncz-msft]

@Piloos 

I tried https://playground.powerbi.com/dev-sandbox and all seem to be working fine. Try powerbi-client v2.17.2.

[Piloos]

Hi @v-chuncz-msft 

Thanks for taking this up.  In my system I am using v2.18.0.  How do you see which version the playground is using?

Nevertheless is the bug is still perfectly reproducible on https://playground.powerbi.com/dev-sandbox 

You can cleary see a difference between the NOT OK result when the state was applied on load (in the embed configuration) versus the OK result when the state was applied after the first render.

See the follow screenshots

State applied on load --> not ok

State applied after first render --> ok

[v-chuncz-msft]

@Piloos 

Try the latest version of Power BI Desktop and check https://playground.powerbi.com/app/powerbi.min.js.

[Piloos]

I did some further research and I could find some interesting information and I also found out the reason why we didn’t have this issue in the past.

In our latest developments we switched from powerbi-client 2.14.0 to 2.18.0 and the issue appeared.  So I thought that this was the reason of the issue.  However, we also switched from a single-page PBIX to a multi-page PBIX at the same time.  With the tests I did, it turns out that this is the issue.  If I remove all-but-one page from my PBIX the issue disappears!

So to summarize:

Powerbi-client 2.14.0 + single-page PBIX --> OK, no issue, the state is correctly applied on load  (This was the old version of our software)

Powerbi-client 2.18.0 + single-page PBIX --> OK, no issue, the state is correctly applied on load

Powerbi-client 2.14.0 + multi-page PBIX --> NOT OK, issue present, the state is NOT correctly applied on load

Powerbi-client 2.18.0 + multi-page PBIX --> NOT OK, issue present, the state is NOT correctly applied on load (This is the current version of our software)

So good news that we could narrow down the issue, however it is not solved yet 😃.  Can you take this up with the appropriate teams?

[v-chuncz-msft]

@Piloos 

A similar issue has been reported internally, so stay tuned.

CRI 249399223

[Piloos]

Hi,

Any update on this issue?

Kind regards,

Lode