Reply
Highlighted
Zuv Frequent Visitor
Frequent Visitor
Posts: 13
Registered: ‎04-26-2016
Accepted Solution

Phased Embedding API with Preload error

[ Edited ]

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!


Accepted Solutions
Advisor
Posts: 136
Registered: ‎11-11-2015

Re: Phased Embedding API with Preload error

[ Edited ]

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

View solution in original post


All Replies
Advisor
Posts: 136
Registered: ‎11-11-2015

Re: Phased Embedding API with Preload error

[ Edited ]

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");
});
Frequent Visitor
Posts: 6
Registered: ‎09-25-2018

Re: Phased Embedding API with Preload error

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

 

Advisor
Posts: 136
Registered: ‎11-11-2015

Re: Phased Embedding API with Preload error

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);
    });
});
Frequent Visitor
Posts: 6
Registered: ‎09-25-2018

Re: Phased Embedding API with Preload error

[ Edited ]

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

Frequent Visitor
Posts: 6
Registered: ‎09-25-2018

Re: Phased Embedding API with Preload error

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");
    });
Frequent Visitor
Posts: 9
Registered: ‎11-26-2018

Re: Phased Embedding API with Preload error

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.
Advisor
Posts: 136
Registered: ‎11-11-2015

Re: Phased Embedding API with Preload error

Can you post the code that is not working?

Frequent Visitor
Posts: 9
Registered: ‎11-26-2018

Re: Phased Embedding API with Preload error

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");
	});
Advisor
Posts: 136
Registered: ‎11-11-2015

Re: Phased Embedding API with Preload error

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