Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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"); });
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
16 | |
2 | |
2 | |
1 | |
1 |