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 Community,
I have tried to implement a Power BI Embdeed webpage via this simple HTML sample below:
<html> <script type="text/javascript"> window.onload = function () { // client side click to embed a selected report. // handle server side post backs, optimize for reload scenarios // show embedded report if all fields were filled in. var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox'); if(null !== accessTokenElement){ var accessToken = accessTokenElement.value; if ("" !== accessToken) updateEmbedReport(); } }; // The embedded report posts message for errors to parent window. listen and handle as appropriate function receiveMessage(event) { if (event.data) { try { messageData = JSON.parse(event.data); if (messageData.event === "reportPageLoaded") { } } catch (e) { // do something smart } } } var valB = false; // update embed report function updateEmbedReport() { // check if the embed url was selected //var embedUrl = document.getElementById('tb_EmbedURL').value; var embedUrl="https://embedded.powerbi.com/appTokenReportEmbed?reportId=9xxxxx9c18" if ("" === embedUrl) return; // to load a report do the following: // 1: set the url // 2: add a onload handler to submit the auth token iframe = document.getElementById('iFrameEmbedReport'); iframe.src=embedUrl; iframe.onload = postActionLoadReport; } // post the auth token to the iFrame. function postActionLoadReport() { // get the access token. accessToken = document.getElementById('MainContent_accessTokenTextbox').value; // return if no a if ("" === accessToken) return; // construct the push message structure // this structure also supports setting the reportId, groupId, height, and width. // when using a report in a group, you must provide the groupId on the iFrame SRC var m = { action: "loadReport", accessToken: accessToken //oDataFilter: "Table/id eq 'B'", //filterPaneEnabled: "false" }; //var m = { action: "loadReport", accessToken: accessToken }; message = JSON.stringify(m); // push the message. iframe = document.getElementById('iFrameEmbedReport'); iframe.contentWindow.postMessage(message, "*");; } </script> <input id="MainContent_accessTokenTextbox" type="hidden" value="replace a valid token here"> <iframe id="iFrameEmbedReport" src="" height="768px" width="1024px" frameborder="1" seamless></iframe><body></body></html>
-Have already have the EmbedToken, and the Embed URL from the Github Demo, However when I try to open the HTML file in a web browser I get the result below: "This content isn't available. Learn more about Power BI."
How can I resolve this?
NOTE:
-Report is imported into workspace.
-Report works fine in the workspace collection
Thanks,
bdiouf
Solved! Go to Solution.
@Anonymous
I use the embed url and token in the same sample and the html loads report without problem.
When apply the html to your reports, ensure both embed url and token are valid.
<html> <script type="text/javascript"> window.onload = function () { // client side click to embed a selected report. // handle server side post backs, optimize for reload scenarios // show embedded report if all fields were filled in. var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox'); if(null !== accessTokenElement){ var accessToken = accessTokenElement.value; if ("" !== accessToken) updateEmbedReport(); } }; // The embedded report posts message for errors to parent window. listen and handle as appropriate function receiveMessage(event) { if (event.data) { try { messageData = JSON.parse(event.data); if (messageData.event === "reportPageLoaded") { } } catch (e) { // do something smart } } } var valB = false; // update embed report function updateEmbedReport() { // check if the embed url was selected //var embedUrl = document.getElementById('tb_EmbedURL').value; var embedUrl="https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad" if ("" === embedUrl) return; // to load a report do the following: // 1: set the url // 2: add a onload handler to submit the auth token iframe = document.getElementById('iFrameEmbedReport'); iframe.src=embedUrl; iframe.onload = postActionLoadReport; } // post the auth token to the iFrame. function postActionLoadReport() { // get the access token. accessToken = document.getElementById('MainContent_accessTokenTextbox').value; // return if no a if ("" === accessToken) return; // construct the push message structure // this structure also supports setting the reportId, groupId, height, and width. // when using a report in a group, you must provide the groupId on the iFrame SRC var m = { action: "loadReport", accessToken: accessToken //oDataFilter: "Table/id eq 'B'", //filterPaneEnabled: "false" }; //var m = { action: "loadReport", accessToken: accessToken }; message = JSON.stringify(m); // push the message. iframe = document.getElementById('iFrameEmbedReport'); iframe.contentWindow.postMessage(message, "*");; } </script> <input id="MainContent_accessTokenTextbox" type="hidden" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6IlBvd2VyQmlBenVyZVNhbXBsZXMiLCJ3aWQiOiJmODFjMTk2Ni1lZGVlLTQxMWItOGY4YS1mODQ0NjAxOWIwNDQiLCJyaWQiOiJjNTJhZjhhYi0wNDY4LTQxNjUtOTJhZi1kYzM5ODU4ZDY2YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTg5MzQ0ODgwMCwibmJmIjoxNDgxMDM3MTY5fQ.m4SwqmRWA9rJgfl72lEQ_G-Ijpw9Up5YwmBOfXi00YU"> <iframe id="iFrameEmbedReport" src="" height="768px" width="1024px" frameborder="1" seamless></iframe><body></body></html>
@Anonymous wrote:
Hello Community,
I have tried to implement a Power BI Embdeed webpage via this simple HTML sample below:
-Have already have the EmbedToken, and the Embed URL from the Github Demo, However when I try to open the HTML file in a web browser I get the result below: "This content isn't available. Learn more about Power BI."
How can I resolve this?
NOTE:
-Report is imported into workspace.
-Report works fine in the workspace collection
Thanks,
bdiouf
@Anonymous
The HTML works fine when I put an valid token and embed URL.
Where do you get the URL and token? Do remember that a token can expire(1 hour by default), so ensure that you're always using a valid token.
I got the access token by using Power BI CLI and typing on the command prompt with applicable credentials
"powerbi create-embed-token -c <workspacecollectionname> -k <accesskey> -w <workspacename> -r <reportID>"
Which then outputs an embed token:
I get the embedURL from the power from the workspace collection example:
It seems even though I am getting a new Embed token when I request one. I am still getting the same result.
Thanks,
bdiouf
@Anonymous
I use the embed url and token in the same sample and the html loads report without problem.
When apply the html to your reports, ensure both embed url and token are valid.
<html> <script type="text/javascript"> window.onload = function () { // client side click to embed a selected report. // handle server side post backs, optimize for reload scenarios // show embedded report if all fields were filled in. var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox'); if(null !== accessTokenElement){ var accessToken = accessTokenElement.value; if ("" !== accessToken) updateEmbedReport(); } }; // The embedded report posts message for errors to parent window. listen and handle as appropriate function receiveMessage(event) { if (event.data) { try { messageData = JSON.parse(event.data); if (messageData.event === "reportPageLoaded") { } } catch (e) { // do something smart } } } var valB = false; // update embed report function updateEmbedReport() { // check if the embed url was selected //var embedUrl = document.getElementById('tb_EmbedURL').value; var embedUrl="https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad" if ("" === embedUrl) return; // to load a report do the following: // 1: set the url // 2: add a onload handler to submit the auth token iframe = document.getElementById('iFrameEmbedReport'); iframe.src=embedUrl; iframe.onload = postActionLoadReport; } // post the auth token to the iFrame. function postActionLoadReport() { // get the access token. accessToken = document.getElementById('MainContent_accessTokenTextbox').value; // return if no a if ("" === accessToken) return; // construct the push message structure // this structure also supports setting the reportId, groupId, height, and width. // when using a report in a group, you must provide the groupId on the iFrame SRC var m = { action: "loadReport", accessToken: accessToken //oDataFilter: "Table/id eq 'B'", //filterPaneEnabled: "false" }; //var m = { action: "loadReport", accessToken: accessToken }; message = JSON.stringify(m); // push the message. iframe = document.getElementById('iFrameEmbedReport'); iframe.contentWindow.postMessage(message, "*");; } </script> <input id="MainContent_accessTokenTextbox" type="hidden" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6IlBvd2VyQmlBenVyZVNhbXBsZXMiLCJ3aWQiOiJmODFjMTk2Ni1lZGVlLTQxMWItOGY4YS1mODQ0NjAxOWIwNDQiLCJyaWQiOiJjNTJhZjhhYi0wNDY4LTQxNjUtOTJhZi1kYzM5ODU4ZDY2YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTg5MzQ0ODgwMCwibmJmIjoxNDgxMDM3MTY5fQ.m4SwqmRWA9rJgfl72lEQ_G-Ijpw9Up5YwmBOfXi00YU"> <iframe id="iFrameEmbedReport" src="" height="768px" width="1024px" frameborder="1" seamless></iframe><body></body></html>
@Eric_Zhang, I can confirm the embed token is still valid. I am not sure how to check if the Embed URL is still valid. How can I check this?
Update: Also, if the embed URL is not valid, how can I make it valid? it seems like the Embed URL consists of the reportID and Embed ID via:
Thanks,
bdiouf
@Anonymous wrote:
@Eric_Zhang, I can confirm the embed token is still valid. I am not sure how to check if the Embed URL is still valid. How can I check this?
Update: Also, if the embed URL is not valid, how can I make it valid? it seems like the Embed URL consists of the reportID and Embed ID via:
Thanks,
bdiouf
What are the appended embedIDxxxxxxxxx? Try to remove the embedId part.
Normally a valid embedded url is like
https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad
One way to find a valid embeded reportid is from this github demo.
I have removed the embed chunk fro you URL resulting in my embedURL to be:
https://embedded.powerbi.com/appTokenReportEmbed?reportId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
*with my report ID credentials of course.
However, I am still recieving the same issue:
"This content isn't available.
Learn more about Power BI."
Could this be a network issue?
Thanks,
bdiouf
@Anonymous : How were you able to solve this? I have the same problem.
It just says 'Content isnt available'. I have generated the token using the below command:
powerbi create-embed-token -c <collection> -k <accessKey> -w <workspaceId> -r <reportId> -u [username] --roles [roles1,roles2,...] -s [scope1 scope2 ...] -e <expiration> Please suggest.
Thanks,
Tech123
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 |