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
So far I have been able to import my power BI report on Azure Workspace. Embedding the Embbdedd workspace report to a webpage however I am having trouble with. (I'm disappointed Microsoft does not have a simple way to do this).
I am essentially trying to implement this: http://azure-samples.github.io/powerbi-angular-client/#/scenario1
by referencing this forum: http://community.powerbi.com/t5/Developer/Angular-2-and-Power-BI-Embedded/m-p/144090#M4945
Can someone explain to me:
I'm hoping someone in this community can enliehgthen me with a sucessful solution. A code sample would be great.
Thanks.
Hi,
Power BI Embedded can be used in a lot of scenarios ranging from Asp.net MVC 5, which you may
build on Visual Studio 2015 as explained here:
http://www.mostafaelzoghbi.com/2016/04/power-bi-embedded-step-by-step.html
to JavaScript API as concisely explained on Jon Gallant blog
http://blog.jongallant.com/2017/01/powerbi-embedded-javascript-api-range-slider-filter/
and simple HTML embedding sample as provided below.
If you say you understand how to create Power BI Azure Collections on Azure portal and managed to import my power BI
report on Azure Workspace, then you're on a good path.
Still... before going any further, it's important to adopt a solution which you'll feel mostly comfortable with and therefore also that best fits your needs.
It's not just a matter of saying "Hey I've seen someone used Angular approach, maybe I should do the same" kind of thing...
Now based on your comments, it's essential to first make a clear distinction here.
The first link
http://azure-samples.github.io/powerbi-angular-client/#/scenario1
is a sample which was built using an AngularJS 1.x approach. If you want to take a look, the code is available on Github https://github.com/Azure-Samples/powerbi-angular-client
Now the second link
http://community.powerbi.com/t5/Developer/Angular-2-and-Power-BI-Embedded/m-p/144090#M4945
focuses mainly on a suggestion the author of a thread proposed as a solved solution using with Angular 2+ TypeScript -
which is somehow a bit different than the first Angular 1.x approach.
I've tried a pretty similar approach with few addins in Angular 2 CLI and can confirm the solved answer worked in my case.
So basically, the 2-7 steps listed in the tread mainly explains the stepped procedures the author took to manage Power BI Embedded workspace collections, using the powerbi-cli interface tools. You can find more details on
https://github.com/Microsoft/PowerBI-Cli
So in an Angular 2 + TypeScript scenario, you could either create a new Angular 2 CLI application on Visual Studio Code
or use an existing one.
You would then also need to make sure to install the two following libraries [node.js package manager in this case...]
1 - install the powerbi-cli interface you'll use to manage the Power BI Embedded workspace collections step procedures...
npm install --save powerbi-cli
2- install the powerbi-client library in your project
npm install --save powerbi-client
Then in your Angular 2 CLI application you could for example create a pbireport component in which you would host and manage infos you need to inject in the iFrame hosting your .pbix report
ng g component pbireport
which would scaffold similar following files
then in pbireport.component.ts - TypeScript file, based on provided thread solved solution - you could use a similar code to define all configuration paremeters you would inject into your iFrame container...
import { Component, OnInit } from '@angular/core'; import * as pbi from 'powerbi-client'; @Component({ selector: 'app-pbireport', templateUrl: './pbireport.component.html', styleUrls: ['./pbireport.component.css'] })
export class PbireportComponent implements OnInit { constructor() { } ngOnInit() { this.showReport() } showReport() { // Report's Secured Token let accessToken = '<Your Access Token Key1> '; // Embed URL let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=<Your embedReportID>'; // Report ID let embedReportId = <Your embedReportID>'; // Define a Configuration used to describe the what and how to embed. // This object is used when calling powerbi.embed. // This also includes settings and options such as filters. let config = { type: 'report', accessToken: accessToken, embedUrl: embedUrl, id: embedReportId, settings: { filterPaneEnabled: true, navContentPaneEnabled: true } }; // Grab the reference to the div HTML element that will host the report. let reportContainer = <HTMLElement>document.getElementById('reportContainer'); // Embed the report and display it within the div container. let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); let report = powerbi.embed(reportContainer, config); // Report.off removes a given event handler if it exists. report.off("loaded"); // Report.on will add an event handler which prints to Log window. report.on("loaded", function () { console.log("Loaded"); }); } }
then in pbireport.component.html, - html file, you could simply define a div id="reportContainer" section which will host your iFrame.
<!-- Main content--> <section class="content"> <div class="container-fluid"> <div class="row"> <div id="reportContainer" class="col-xs-12" ></div> <----- </div> </div> </section>
you could then add the component in a main app.component.html in a similar fashion
<!-- Wrapper--> <div class="wrapper"> <app-header></app-header> <app-navigation></app-navigation> <app-pbireport></app-pbireport> <------ </div>
Finally when running the app - if everything works as expected - you woud end up with similar rendered result
Thereare obviously more options to explore in Angular 2 scenario , but basically this should work.
Hope this helps
@MawashiKid, Thanks for the information I will into this as well! This clarified a lot.
Thanks,
bdiouf
Anyone???
@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
@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-app
Integrate Power BI into Your Application: Part 2 – Authenticate
http://radacad.com/integrate-power-bi-into-your-application-part-2-authenticate
Integrate Power BI into Your Application: Part 3 – Embed Content
http://radacad.com/integrate-power-bi-into-your-application-part-3-embed-content
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 |
---|---|
15 | |
1 | |
1 | |
1 | |
1 |
User | Count |
---|---|
25 | |
3 | |
2 | |
2 | |
2 |