Forum Discussion
Power bi embed html "This content isn't available."
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
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>
9 Replies
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