Phased Embedding API with Preload error

[Zuv]

Hello,

In last update MS announced Phased Embedding API (https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API), so I have tried it.

I am not sure how Preload (Warm start) really works.

As far as I understand first you do preload, after it finishes you can embed your report in your old way, or with new .load functionality.

so I have tried this:

var config_pre= {
  type: 'report',
  embedUrl: embedUrl,
};
var element = powerbi.preload(config_pre);
element.on('preloaded', function() {
  var report = powerbi.embed(reportContainer, config);
});

It doesn't work and throws me an error on js level:

303:547 Uncaught TypeError: element.on is not a function
    at Object.biResponse [as success] (303:547)
    at l (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at T (jquery.min.js:2)
    at XMLHttpRequest.r (jquery.min.js:2)

Do you think mine approach on that is a logical one, and maybe you do know anything about that error?

Thanks a lot!

[adamsaffi]

Change the code like this 

var element = powerbi.preload(config_pre);
$(element).on('preloaded', function() {
  var report = powerbi.embed(reportContainer, config);
});

[adamsaffi]

The above the woking, but report is not loaded in power bi playground

[Dan_Cundy]

For me neither method works.

The below throws : TypeError: element.on is not a function

element.on('preloaded', function() {});

 The below never fires.

element.onload(function() {});

Anyone else got this to work, or having the same issue?

The offical documentation states the following: "A ‘ready’ event will be fired once the preload is completed."

element.on('preloaded', function() {
   // do whatever you like here
});

 https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API

[TedPattison]

I just added the same code in another post today. But here is the basic structure that you should use.

// 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-2193...";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c..";
var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o80...";

// 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[0]; // this select first page
      config.pageName = startPage.name;
      // Call report.render() to display report
      report.render(config);
    });
});

[Anonymous]

I'm getting the same issues as everyone else. One thing I noticed in your code is that you use the baseUrl at "https://embedded.... not https://api as the docs suggest. Can you explain this? However even when I altered my url to "embedded" it still didn't work.

[Anonymous]

Hi, I tried this solution, but its not working. The official documentation states the following: "A ‘ready’ event will be fired once the preload is completed." but its not happening. I am not getting any error also.

[TedPattison]

Can you post the code that is not working?

[Anonymous]

Hi,

Please find code;

var preloadConfig = {
  type: 'report',
  baseUrl:'https://app.powerbi.com/reportEmbed',
};

var preloadElement = powerbi.preload(preloadConfig);

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

var accessToken = data.embededToken;
var embedUrl = data.embedUrl; 
var embedReportId = data.reportId;

var models = window['powerbi-client'].models;
var config = {
	type: 'report',
	tokenType: models.TokenType.Embed,
	accessToken: accessToken,
	embedUrl: embedUrl,
	viewMode: models.ViewMode.View,
	id: embedReportId,
	settings: {
		filterPaneEnabled: false,
		background: models.BackgroundType.Transparent
	}
};

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

// Embed the dashboard and display it within the div container.
var report = powerbi.load(reportContainer,config);
report.fullscreen();

// 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[0]; // this select first page
	  config.pageName = startPage.name;
	  // Call report.render() to display report
	  report.render(config);
	});
});

report.on('rendered', function () {
	  console.log("rendered event executing");
	});

[TedPattison]

I cannot see any problems with your code. However, I executedthe code below and the rendered event handler fires as expected. I am not able to reproduce the problem where the the rendered event handler does not fire.

// data required for embedding Power BI report
var embedReportId = "@Model.reportId";
var embedUrl = "@Model.embedUrl";
var accessToken = "@Model.accessToken";

// 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,
  permissions: models.Permissions.All,
  viewMode: models.ViewMode.View,
  settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: true,
  }
};

// Get a reference to HTML element that will be embed container
var reportContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.load(reportContainer, config);

console.log(report);

report.on("loaded", function (event) {
  console.log("loaded: " + event);
  report.getPages().then(
    function (pages) {
      // inspect pages in browser console
      console.log(pages);
      // display specific page in report
      var startPage = pages[0]; // this select first page
      config.pageName = startPage.name;
      // Call report.render() to display report
      report.render(config);
    });
});

report.on("rendered", function (event) {
  console.log("rendered: " + event);
});

[Anonymous]

Hi,

According to the example, event handler of powerbi.preload( config) is not getting fired. Is there any solution to it?

[Anonymous]

Hi,

Ok Thank you. I have one more doubt, what should I use instead of powerbi.embedNew()?

We are using embed.New() for Replacing the current embedded report with new one on same page.

[TedPattison]

To add a new embedded object into a div that already contains a exisitng embedded object, i have been using this code.

powerbi.reset(embedContainer);
powerbi.embed(embedContainer, config);

Add I looked at the Power BI JavaScript API today, I noticed there is a new method on root powerbi object named 

addOrOverwriteEmbed. I have not used that, but I am curious as to whether that can be used in this scenario as well.

[Dan_Cundy]

I can see your code differs from their example.

They are suggesting you create your config like this.

// Create embedding config
var config= {
    type: 'report',
    embedUrl: '.....',
};

Note that you are using baseUrl instead. 

I'm going to give that a go and see what happens.. 

[Dan_Cundy]

Okay so my problem was I needed to wrap the element object like below due to it not being JQuery object.

  $(PreloadElement).on('preloaded', function() {
         console.log("scripts now preloaded into this page");
    });

[TedPattison · Accepted solution]

Here is the basic structure I used for this technique.

// 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-21930aeb6fb6";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c5-4e1a-4df7-a2a...";
var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o8076K7qgn__WOkzzGn...";

// 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[0]; // this select first page
      config.pageName = startPage.name;
      // Call report.render() to display report
      report.render(config);
    });
});

report.on('rendered', function () {
  console.log("rendered event executing");
});