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.
I'm not a coder, so this could be a silly question...
I've read al the steps to be taken to get an EmbedURL, EmbedID and token. I've found a samplescript to embed the report which I've used, but I'm getting the message "Content is not available".
PowerBi is started and loading (the logo is visable), but the report is not showing up.
On the testsite on github it works (https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html).
the code I'm using is a singlepage tester:
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script type="text/javascript"> window.onload = function () { var embedConfiguration = { type: 'report', accessToken: 'H4sIAAAAAAAEACWVxQ7t--------bla----ThignOLIUBiiF4JPYp9H_IP5__4fXjzlxZoKAAA=', id: '0eb3674a-xxxx-xxxx-xxxx-xxxx1fb6b17d', embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=0eb36741461fb6b17d&groupId=1928fd4564' }; var $reportContainer = $('#reportContainer'); var report = powerbi.embed($reportContainer.get(0), embedConfiguration); <!--validateReportLoad incorrectly returns schema errors for valid filters #16https://github.com/Microsoft/powerbi-models/issues/16--> report.on('loaded', function() { console.log('report.on - loaded'); }); } </script> <div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true" powerbi-settings-filter-pane-enabled="true"></div> </html>
Has any got an idea what I've done wrong? permissions, public in stead of private, etc...
Thanks for all the help you can provide
Jordy
Solved! Go to Solution.
@jvondermans wrote:
I'm not a coder, so this could be a silly question...
I've read al the steps to be taken to get an EmbedURL, EmbedID and token. I've found a samplescript to embed the report which I've used, but I'm getting the message "Content is not available".
PowerBi is started and loading (the logo is visable), but the report is not showing up.
On the testsite on github it works (https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html).
the code I'm using is a singlepage tester:
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script type="text/javascript"> window.onload = function () { var embedConfiguration = { type: 'report', accessToken: 'H4sIAAAAAAAEACWVxQ7t--------bla----ThignOLIUBiiF4JPYp9H_IP5__4fXjzlxZoKAAA=', id: '0eb3674a-xxxx-xxxx-xxxx-xxxx1fb6b17d', embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=0eb36741461fb6b17d&groupId=1928fd4564' }; var $reportContainer = $('#reportContainer'); var report = powerbi.embed($reportContainer.get(0), embedConfiguration); <!--validateReportLoad incorrectly returns schema errors for valid filters #16https://github.com/Microsoft/powerbi-models/issues/16--> report.on('loaded', function() { console.log('report.on - loaded'); }); } </script> <div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true" powerbi-settings-filter-pane-enabled="true"></div> </html>
Has any got an idea what I've done wrong? permissions, public in stead of private, etc...
Thanks for all the help you can provide
Jordy
See below sample, it shall work. Note that the embedded token is dedicated for the reportid, see GenerateToken. Since you're not a coder, I'm curious how you got the embedded token and what you'd like to do with this static HTML. As I can recall, the sample in your post shall be from one of my previous posts, which is supposed for testing purpose. The static HTML is very limited as the token can be expired and needs to be updated dynamically in a programming way.
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script type="text/javascript"> window.onload = function () { // Read embed application token from Model var accessToken = "H4sIAAAAAAxxxxxxxxxxxxxxxxmA-to_mf_3fwvmOUYCCwAA"; // Read embed URL from Model var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=bd851208-5592-4e3e-ba72-5cfdfc39f41c&groupId=9166cf8d-d5fc-405e-bdc7-47e414da08fe"; // Read dashboard Id from Model var embedReportId = "bd851208-5592-4e3e-ba72-5cfdfc39f41c"; // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, viewMode: models.ViewMode.View, id: embedReportId, }; console.log(models); // Get a reference to the embedded dashboard HTML element var reportContainer = $('#reportContainer')[0] ; // Embed the dashboard and display it within the div container. var report = powerbi.embed(reportContainer, config); } </script> <div id="reportContainer"></div> </html>
@jvondermans wrote:
I'm not a coder, so this could be a silly question...
I've read al the steps to be taken to get an EmbedURL, EmbedID and token. I've found a samplescript to embed the report which I've used, but I'm getting the message "Content is not available".
PowerBi is started and loading (the logo is visable), but the report is not showing up.
On the testsite on github it works (https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html).
the code I'm using is a singlepage tester:
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script type="text/javascript"> window.onload = function () { var embedConfiguration = { type: 'report', accessToken: 'H4sIAAAAAAAEACWVxQ7t--------bla----ThignOLIUBiiF4JPYp9H_IP5__4fXjzlxZoKAAA=', id: '0eb3674a-xxxx-xxxx-xxxx-xxxx1fb6b17d', embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=0eb36741461fb6b17d&groupId=1928fd4564' }; var $reportContainer = $('#reportContainer'); var report = powerbi.embed($reportContainer.get(0), embedConfiguration); <!--validateReportLoad incorrectly returns schema errors for valid filters #16https://github.com/Microsoft/powerbi-models/issues/16--> report.on('loaded', function() { console.log('report.on - loaded'); }); } </script> <div id="reportContainer" powerbi-settings-nav-content-pane-enabled="true" powerbi-settings-filter-pane-enabled="true"></div> </html>
Has any got an idea what I've done wrong? permissions, public in stead of private, etc...
Thanks for all the help you can provide
Jordy
See below sample, it shall work. Note that the embedded token is dedicated for the reportid, see GenerateToken. Since you're not a coder, I'm curious how you got the embedded token and what you'd like to do with this static HTML. As I can recall, the sample in your post shall be from one of my previous posts, which is supposed for testing purpose. The static HTML is very limited as the token can be expired and needs to be updated dynamically in a programming way.
<html> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script type="text/javascript"> window.onload = function () { // Read embed application token from Model var accessToken = "H4sIAAAAAAxxxxxxxxxxxxxxxxmA-to_mf_3fwvmOUYCCwAA"; // Read embed URL from Model var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=bd851208-5592-4e3e-ba72-5cfdfc39f41c&groupId=9166cf8d-d5fc-405e-bdc7-47e414da08fe"; // Read dashboard Id from Model var embedReportId = "bd851208-5592-4e3e-ba72-5cfdfc39f41c"; // Get models. models contains enums that can be used. var models = window['powerbi-client'].models; var config = { type: 'report', tokenType: models.TokenType.Embed, accessToken: accessToken, embedUrl: embedUrl, viewMode: models.ViewMode.View, id: embedReportId, }; console.log(models); // Get a reference to the embedded dashboard HTML element var reportContainer = $('#reportContainer')[0] ; // Embed the dashboard and display it within the div container. var report = powerbi.embed(reportContainer, config); } </script> <div id="reportContainer"></div> </html>
Hi Eric,
Thanks for your help, it works!
I've got this working by reading the documentiation, watching the video's of guyinacube, using the samples on github (and work through them by reading them logically). I've also have an Azure Power Bi Embed machine for the number of people that are working with the report (it is used internally to view in Sharepoint in stead of using the PowerBi web-part, for which everyone needs a Pro-account).
The last step was indeed getting the token renewed, for me that is the hardest step.
I was looking for a basic site-sample where I could fill in the variables and change the look with CSS. The JavaScript samples on Github are not that clear to me. So if you know any I would be very greatfull!
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 |
---|---|
13 | |
2 | |
2 | |
1 | |
1 |
User | Count |
---|---|
20 | |
3 | |
2 | |
2 | |
2 |