cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Zuv Frequent Visitor
Frequent Visitor

Phased Embedding API with Preload error

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!

1 ACCEPTED SOLUTION

Accepted Solutions
TedPattison
Advisor

Re: Phased Embedding API with Preload error

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");
});
13 REPLIES 13
TedPattison
Advisor

Re: Phased Embedding API with Preload error

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

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

 

TedPattison
Advisor

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);
    });
});
Dan_Cundy Frequent Visitor
Frequent Visitor

Re: Phased Embedding API with Preload error

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 Frequent Visitor
Frequent Visitor

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

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

Re: Phased Embedding API with Preload error

Can you post the code that is not working?

nikitarathi Frequent Visitor
Frequent Visitor

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

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

Helpful resources

Announcements
Community News & Announcements

Community News & Announcements

Get your latest community news and announcements.

Summit North America

Power Platform Summit North America

Register by September 5 to save $200

Virtual Launch Event

Microsoft Business Applications Virtual Launch Event

Watch the event on demand for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

MBAS Gallery

Watch Sessions On Demand!

Continue your learning in our online communities.

Top Kudoed Authors
Users Online
Currently online: 122 members 1,831 guests
Please welcome our newest community members: