Iframe and <div> as a container not displaying data
2
Hi, We are currently in the process of adding power bi to our project and need to use embedded iFrame for the report. We have used iFrame but it does not display anything, We then used <div> as a container in a htmlsnippet but it is still not displaying the data. We have used the exact code in a html emulator and the data displays fine in both instances. Any ideas why the data will not be showing in mendix? <div> container <html> <body> <div id="reportContainer" style="height:768px;width:1024px;"></div> <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script> <script> (function () { var embedToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsIndjbiI6IlBvd2VyQmlBenVyZVNhbXBsZXMiLCJ3aWQiOiJmODFjMTk2Ni1lZGVlLTQxMWItOGY4YS1mODQ0NjAxOWIwNDQiLCJyaWQiOiJjNTJhZjhhYi0wNDY4LTQxNjUtOTJhZi1kYzM5ODU4ZDY2YWQiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTg5MzQ0ODgwMCwibmJmIjoxNDgxMDM3MTY5fQ.m4SwqmRWA9rJgfl72lEQ_G-Ijpw9Up5YwmBOfXi00YU"; var reportId = "c52af8ab-0468-4165-92af-dc39858d66ad"; var embedUrl = "https://embedded.powerbi.com/appTokenReportEmbed?reportId=c52af8ab-0468-4165-92af-dc39858d66ad"; var config = { type: "report", accessToken: embedToken, embedUrl: embedUrl, id: reportId, settings: { filterPaneEnabled: false, navContentPaneEnabled: false } }; powerbi.embed(document.getElementById('reportContainer'), config); })(); </script> </body> </html> IFrame <html> <body> <script type="text/javascript"> window.onload = function () { // 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) { } } } var valB = false; // update embed report function updateEmbedReport() { //check if the embed url was selected; 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 }; 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></html>
asked
Vincent Grobler
1 answers
1
Hi Vincent,
Are you using the HTML snippet widget or the iframe widget? Neither will work in your situation. Because the code you posted consists of HTML and javascript. Unfortunately the HTML widget does not allow a hybrid option by default. And the javascript seems to be triggered in part by the window onload event. Which in Mendix never happens because only the loading if the Mendix application is an actual page load.
You could try adjusting the javascript code and load two instances of the HTML widget the first with the HTML part and the second with the javascript part.
If you would like expert assistance with these kind of cases you can always contact me via my developer profile.