topic Re: Power BI Embedded and Angular for webpage in Developer

Power BI Embedded and Angular for webpage

Anonymous — Fri, 24 Mar 2017 14:30:30 GMT

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:

Being new to HTML, what should I do with HTML and JS? Do I just create overall HTML file and combine them?
Is the website ran through the VS solution, or can I just use equivalent code, with my own credentials to make it run?
Is there an easier solution?(Seriously, Why do I have to go through downloading and installing packages just to embed something).

I'm hoping someone in this community can enliehgthen me with a sucessful solution. A code sample would be great.

Thanks.

Re: Power BI Embedded and Angular for webpage

Anonymous — Sun, 26 Mar 2017 15:27:25 GMT

Anyone???

Re: Power BI Embedded and Angular for webpage

Eric_Zhang — Thu, 30 Mar 2017 10:00:20 GMT

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>

Re: Power BI Embedded and Angular for webpage

MawashiKid — Fri, 31 Mar 2017 19:22:03 GMT

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

Re: Power BI Embedded and Angular for webpage

Anonymous — Fri, 31 Mar 2017 19:52:44 GMT

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

Re: Power BI Embedded and Angular for webpage

Anonymous — Fri, 31 Mar 2017 20:03:32 GMT

MawashiKid, Thanks for the information I will into this as well! This clarified a lot.

Thanks,

bdiouf

Re: Power BI Embedded and Angular for webpage

PowerBINoob123 — Wed, 13 Sep 2017 17:37:34 GMT

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: Power BI Embedded and Angular for webpage

MawashiKid — Wed, 13 Sep 2017 19:03:36 GMT

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

Re: Power BI Embedded and Angular for webpage

Tech123 — Thu, 12 Oct 2017 16:33:40 GMT

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

Re: Power BI Embedded and Angular for webpage

mijerg11 — Thu, 12 Jul 2018 08:52:53 GMT

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