Forum Discussion
Power BI Embedded and Angular for webpage
Anyone???
Anonymous
A very simple demo for Power BI Embedded can be using a HTML, if you've already got a valid token and embeded URL. You can open the HTML in IE or Chrome.
As to how to get the embedded url and token, you can check this demo in github.
<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>Thanks for this example Eric_Zhang. I am doing an analysis task for my company and I have a question that you can hopefully answer. Will the URL that is injected into the iFrame be authenticated? Our Use-Case is to have our reports available on the internet to users that have been authenticated within our web application. We do not want to expose the embedded URL in the iFrame to a crafty user who can retrieve the URL and then release it to the public without requiring authentication. I'm hoping Power BI Embed has authentication built around the URL it is exposing in the iFrame.
RE: I am doing an analysis task for my company ...
Note if you're at the analysis stage and haven't engaged into any concrete or existing Power BI Embedded project production yet, then I wouldn't invest much in the former Power BI Embedded approach if I were you...
Reason is the Power BI Embedded approach using Workspace Collections - Workspace topology has been listed as deprecated since June 2017 and is no longer available on Azure Portal. So it would be just as investing in moving all your new furnitures into an old condemned building which will be probably be completetely shaved from the map with bulldozers in few months as countdown has already started.So that being said, if I were you I would rather concentrate my analysis on the REST API approach.
If you understand the main logic behind the Power BI Client object, then you should be able to refactor the Angular code I provided above without reinventing the wheel. The main difference now is how and where you will provision your report.
Following links give an overview how to deal with new Power BI REST API approach.
Integrate Power BI into Your Application: Part 1 – Register your App
http://radacad.com/integrate-power-bi-into-your-application-part-1-register-your-appIntegrate Power BI into Your Application: Part 2 – Authenticate
http://radacad.com/integrate-power-bi-into-your-application-part-2-authenticateIntegrate Power BI into Your Application: Part 3 – Embed Content
http://radacad.com/integrate-power-bi-into-your-application-part-3-embed-content
Eric_Zhang, I have retrieved my Embed URL and AccessToken. Once I insert the following credenials t the HTML file as you showed. I get the result: "This content isn't available."
How can I address this?
Thanks,
-bdiouf
Hello bdiouf,
Have you been able to resolve this?
I created the Embed Token using the below command:
powerbi create-embed-token -c <collection> -k <accessKey> -w <workspaceId> -d <datasetId> -u [username] --roles [roles1,roles2,...] -s [scope1 scope2 ...] -e <expiration>
I have passed this token as the Access Token and an Embed Url but I see the same "This content isnt available". Please suggest.
Thanks,
tech123
Tech123 Anonymous Hi Guys have you found a solution on how to embed the report? mine also says "This content isn't available".
Eric_Zhang is your way still applicable to date? i need simple embedding like this i dont have to create a whole project just to show the report. I need to put it in a single page and that page load to an iframe.
Thanks,
JP
