topic Re: Phased Embedding API with Preload error in Developer

Phased Embedding API with Preload error

Zuv — Wed, 24 Oct 2018 23:07:46 GMT

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!

Re: Phased Embedding API with Preload error

TedPattison — Thu, 25 Oct 2018 11:56:35 GMT

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");
});

Re: Phased Embedding API with Preload error

Dan_Cundy — Wed, 31 Oct 2018 13:30:21 GMT

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

Re: Phased Embedding API with Preload error

TedPattison — Wed, 31 Oct 2018 13:47:25 GMT

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);
    });
});

Re: Phased Embedding API with Preload error

Dan_Cundy — Wed, 31 Oct 2018 14:23:17 GMT

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..

Re: Phased Embedding API with Preload error

Dan_Cundy — Wed, 31 Oct 2018 17:34:31 GMT

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");
    });

Re: Phased Embedding API with Preload error

Anonymous — Thu, 10 Jan 2019 14:06:52 GMT

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.

Re: Phased Embedding API with Preload error

TedPattison — Fri, 11 Jan 2019 16:40:31 GMT

Can you post the code that is not working?

Re: Phased Embedding API with Preload error

Anonymous — Tue, 15 Jan 2019 05:26:31 GMT

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");
	});

Re: Phased Embedding API with Preload error

TedPattison — Tue, 15 Jan 2019 13:21:31 GMT

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);
});

Re: Phased Embedding API with Preload error

Anonymous — Wed, 16 Jan 2019 14:16:12 GMT

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.

Re: Phased Embedding API with Preload error

TedPattison — Wed, 16 Jan 2019 14:45:24 GMT

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.

Re: Phased Embedding API with Preload error

Anonymous — Mon, 26 Aug 2019 19:26:30 GMT

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.

Re: Phased Embedding API with Preload error

Anonymous — Tue, 15 Oct 2019 10:35:36 GMT

Hi,

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

Re: Phased Embedding API with Preload error

adamsaffi — Fri, 24 Jun 2022 05:51:05 GMT

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

Re: Phased Embedding API with Preload error

adamsaffi — Fri, 24 Jun 2022 06:16:38 GMT

Change the code like this

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