Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago
Solved

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 () { ...
Need Help
  • Eric_Zhang's avatar
    Eric_Zhang
    9 years ago

    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's avatar
Eric_Zhang
Icon for Microsoft Employee rankMicrosoft Employee
9 years ago
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.

 

Anonymous's avatar
Anonymous
Not applicable
9 years ago

Eric_Zhang

 

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's avatar
    Anonymous
    Not applicable
    9 years ago

     

    Eric_Zhang, Any insight on this?

     

    Thanks,

    bdiouf

  • Eric_Zhang's avatar
    Eric_Zhang
    Icon for Microsoft Employee rankMicrosoft Employee
    9 years ago

    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>