Forum Discussion
Phased Embedding API with Preload error
- 7 years ago
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"); });
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
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_Cundy7 years agoFrequent Visitor
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_Cundy7 years agoFrequent Visitor
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"); });
- Anonymous7 years agoNot applicableHi, 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.
- TedPattison7 years ago
Microsoft Employee
Can you post the code that is not working?
- Anonymous7 years agoNot applicable
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"); });
- Anonymous7 years agoNot applicable
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.