Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.
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!
Solved! Go to 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"); });
Change the code like this
var element = powerbi.preload(config_pre); $(element).on('preloaded', function() { var report = powerbi.embed(reportContainer, config); });
The above the woking, but report is not loaded in power bi playground
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); }); });
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.
Can you post the code that is not working?
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"); });
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); });
Hi,
According to the example, event handler of powerbi.preload( config) is not getting fired. Is there any solution to it?
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.
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
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..
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"); });
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"); });
User | Count |
---|---|
15 | |
4 | |
2 | |
1 | |
1 |