Bookmarks API not working as expected when embedded for Customers

[PeterMar]

Power BI Service bookmarks work well and I can save filters and personalise visual and once bookmark is applied - both filters and personalised view is presented.

When embedding same single page report in Power Apps portal for our Customers (non-AD users), I'm using Bookmarks API in JavaScript to Save and Load bookmarks state. As a result I can see that only Filters are applied, not Personalised visual. 

Can this be fixed to work properly and apply both filters and personalised visual state. 

JavaScript code used to Save and Load bookmarksManager state:

var yourGlobalVariable;

let btn = document.createElement("button");
btn.innerHTML = "Save";
btn.onclick = async function () {
  var embedContainer = $(".powerbi")[0];
  var report = powerbi.get(embedContainer);
    let capturedBookmark = await report.bookmarksManager.capture({
        allPages: true,
        personalizeVisuals: true
    });
    yourGlobalVariable = capturedBookmark;
    console.log(JSON.stringify(capturedBookmark));
};
document.body.appendChild(btn);

let btn2 = document.createElement("button");
btn2.innerHTML = "Load";
btn2.onclick = async function () {
  var embedContainer = $(".powerbi")[0];
  var report = powerbi.get(embedContainer);
  report.bookmarksManager.applyState(yourGlobalVariable.state);
};
document.body.appendChild(btn2);

$(document).ready(function () {
    console.log("starting power bi Config");
    var embedContainer = $(".powerbi")[0];
    if (embedContainer) {
        var report = powerbi.get(embedContainer);
        report.on("loaded", function () {
            report.updateSettings({
                panes: {
                    filters: {
                        visible: true
                    },
                    pageNavigation: {
                        visible: false
                    }
                }
            }).catch(function (errors) {
                console.log(errors);
            });
        })
    }
    console.log("finished power bi Config");   
});

[v-chuncz-msft]

@PeterMar 

I tried the sample at Power BI Playground and it seems to work fine.

[PeterMar]

@v-chuncz-msft 

I'm still unable to save/apply all customisations for embedded that are working fine in Power BI Service. 

Personalizations NOT being saved, only filters.

Please find evidence that it doesn't work in your Playground either:

1. below code saves state on button click in variable if not previously saved and applies one if there is saved one:

// Insert here the code you want to run after the report is rendered
// report.off removes all event handlers for a specific event
report.off("buttonClicked");
var globalState;
// report.on will add an event listener.
report.on("buttonClicked", async function (event) {
    let data = event.detail;
    console.log("Event - buttonClicked:\n", data);
    // Capture the current bookmark and prints the bookmark's
    // state string to Log window.
    try {
        if (!globalState) {
            const capturedBookmark = await report.bookmarksManager.capture();
            globalState = capturedBookmark.state;
            let log = "Captured bookmark state: " + capturedBookmark.state;
            console.log(log);
        }
        else {

            // bookmarksManager.applyState will apply the bookmark which
            // represented by the given state string.
            try {
                let log = "Applying bookmark state: " + globalState;
                console.log(log);
                await report.bookmarksManager.applyState(globalState);
                console.log("Bookmark applied from given state.");
            }
            catch (error) {
                console.log(error);
            }
        }
    }
    catch (error) {
        console.log(error);
    }
});

2. Initial state:

3. Modified visual to change from Matrix to Table, Removed 3 columns, filtered down to 1 item:

4. Save current state by clicking Button

5. Reset state following save using "Reset this visual button" results in initial state:

6. Apply State by clicking Button

7. See that only Filter is applied, Table view NOT applied, Columns NOT removed:

[v-chuncz-msft]

@PeterMar 

I simply drag the bookmarks operations and all seem to be working fine.

// Capture the current bookmark and prints the bookmark's
// state string to Log window.
try {
    const capturedBookmark = await report.bookmarksManager.capture({
        allPages: true,
        personalizeVisuals: true
    });
    let log = "Captured bookmark state: " + capturedBookmark.state;
    console.log(log);
}
catch (error) {
    console.log(error);
}

// bookmarksManager.applyState will apply the bookmark which
// represented by the given state string.
try {
    await report.bookmarksManager.applyState("xxxxxxxxxxxxxxxxxxxxx");
    console.log("Bookmark applied from given state.");
}
catch (error) {
    console.log(error);
}

[PeterMar]

Hi @v-chuncz-msft ,

Appreciate your help to clarify the issue.

Good news it works indeed in playground with these 2 flags, which I missed when replicating Power Apps portals problem: 

allPages: true,
        personalizeVisuals: true

Bad news it doesn't work in Power Apps portals since I did use these 2 flags as per my original submission.

When trying to find root cause I found that Power Apps portals are using 

/*! powerbi-client v2.6.5 | (c) 2016 Microsoft Corporation MIT */

while Power BI Playground

// powerbi-client v2.18.2
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

1. Can you confirm that v2.6.5 is the root cause of the bookmarks not working properly in Power Apps portals?

2. If that is the case, could you help facilitate the fix so that other Power Platform apps (portals, Model apps) using latest Power BI libraries?