set active page in report with JavaScript API.

[skancharla]

Hi,

I have two pages in my report. I want to set the second page as active page with api.

Tried doing it in embed config and also separately with the page name.But the second page is not set as active.

Any ideas. 

var embedConfiguration = {
type: reportType,
id: reportId,
accessToken: accessToken,
embedUrl: embedUrl,
//pageName: pageName
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

const page = report.page(pageName);
page.setActive();

Thanks.

[TedPattison]

You are calling page.setActive() to early before the report has loaded. You must wait until the report loaded event has fired. Also, you should use phased loading so you can set the active page to page 2 before the report is first displayed to the user. Try something like this.

// preload preload pbie scripts on this page
var preloadConfig = {
  type: 'report',
  baseUrl: 'https://embedded.powerbi.com/reportEmbed',
};

var preloadElement = powerbi.preload(preloadConfig);

preloadElement.onload(function () {
  console.log("pbie scripts now preloaded into this page");
});


// data required for embedding Power BI report
var embedReportId = "2cf7c5c5-4e1a-4df7-a2a6-21...";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c5-...";
var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o8076K...";

// Get models object to access enums for embed configuration
var models = window['powerbi-client'].models;

var config = {
  type: 'report',
  id: embedReportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed,
};

// Get a reference to the embedded report HTML element
var reportContainer = document.getElementById('embedContainer');

// call load() instead of embed() to load the report while delaying the rendering process
var report = powerbi.load(embedContainer, config);

// when loaded event occurs, set current page then call render()
report.on("loaded", function () {
  console.log("loaded event executing");
  // call to get Pages collection
  report.getPages().then(
    function (pages) {
      // inspect pages in browser console
      console.log(pages);
      // display specific page in report
      var startPage = pages[1]; // this selects the second page
      config.pageName = startPage.name;
      // Call report.render() to display report
      report.render(config);
    });
});

[slawek1151]

The simpliest solution is:

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

    report.on('loaded', function () {
        report.getPages().then(function (pages) {
            pages[1].setActive();
        });
    });

or even simpler in ES6

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

    report.on('loaded', () => {
        report.getPages().then(pages => pages[1].setActive());
    });

report.getPages() at the beginning is not working because report itself is not fully loaded yet. Just for people who whant to set a page at the start.

[Anonymous]

the problem is that this is not user friendly, the first page loads ... then gets changed to page x.

I don't understand why the documentation says something and when you can to implement it, it doesn't work.

updateSettings for locale doesn't work also ... 😕

[Eric_Zhang]

@skancharla

The documentaion introduces the feature as you did in your code, however I'm not able to set a default page as well.
Based on my search, there's an online demo,  which shows this feature actually working.
You can check what the demo does in the js file
https://microsoft.github.io/PowerBI-JavaScript/demo/app/defaults.js

I'm researching on this and would share any update I get.

[skancharla · Accepted solution]

Thanks @Eric_Zhang.

I was able to resolve this and set the page dynamically.

Instead of fetching the page using page name as mentioned in my intial post, I got an array of all the pages and then set whichever page needs to be active.This worked.

My previous code:

const page = report.page(pageName);
page.setActive();

My current code:

var pages = [];

report.getPages().then(function (reportPages) {
pages = reportPages;
});

pages[1].setActive();

Hope this helps someone visiting here for the same issue.

[Anonymous]

Great response!
Setting the active page is required in order to use: 

await visual.getSlicerState() since this request only works with the active page.
Thank you. 
Vincent
 

[bensalemc]

Hello, 

I'm facing the same problem and this is not working for me. 
I get an error saying "Property 'getPages' does not exist on type 'Embed'." 

Do you have any idea how to solve this? 

Thank you.
Cyrine.

[daweins]

Resurrecting this old post, but I hit this myself, and found a reasonable solution. The pageName setting does work, but the value required is not the "display name" you see in PowerBI, but actually an internal section ID. You can get this value by accessing the report in the web version of PowerBI and examining the URL. 
Ex, for my report below, my groupID is b5801...a4f, my reportID is 634f...054b, and my pageName is ReportSection50033...a22c

https://dave.powerbi.com/groups/b5801af2-7111-4b4a-b3c2-603b49af7a4f/reports/634f02e3-0f39-4fcb-8936...

While a little ugly, this lets you skip a double page load - I was having trouble with your solution above, as it's dependent on the timing of the report load. I achieved a workable solution by putting the page setter in a report loaded event, but I didn't like the user experience, as the default page (whatever I happened to edit last) would have to load before the desired page would load. Using the direct method with the internal ReportSection{ID} worked a lot cleaner. 

[DanT]

Thanks for sharing. This works for me perfectly.

Also, for someone who has the same issue with bookmark, I'd like to add that the bookmark setting works the same way! Bookmark name setting just doesn't work when loading. I've been searching for the solutions. And it finally worked when I tried also with the GUID in the url, instead of the bookmark name. Like this

embedConfig={

...

'bookmark':{
                 "name":"Bookmarkfdc07f*******120"
}

You can get the GUID in the url with your target bookmark on. 

app.powerbi.com/groups/.../ReportSectiond...?bookmarkGuid=Bookmark6...1