angular 4/5

[tal]

Hi all,

I've been trying to embed PowerBi in an Angular 5 app to no avail.

I'm experiencing multiple issues.

The documentation is extremely poor and all the examples either use straight Javascript or Angular 1. The ones that claim to use Angular 2 are using the Angular 1 powerbi-client module which is outdated and fails to work in a new Angular project. Also, nowhere does it say in a straight forward manner what are the correct urls to be used for all the different actions e.g. Authenticate, Resource URL for PowerBI, retrieve a report and/or report list and/or dashboard, etc.

I found a module ng4-adal to do the Authentication and after much headache I've managed to get it to log in. However, when attempting to aquireToken for my PowerBI resource it fails. (resource url used:

https://analysis.windows.net/powerbi/api

)

Further more from all the reading and googling I've done I still haven't managed to find instructions on the process to follow to embed a report using Angular 2 and up which utilise the latest methodoligies and none that explain how to get the embeded report and display it either.

I have however found a module angular2-powerbi for which documentations and/or example are non existent.

I find the lack of proper resources both frustrating and dissappointing.

Please would anyone help with some guidance on the issue and help with examples or detailed explanation on how to do this?

Regards,

Tal Orlik.

[ashleymartin]

Please share what was discovered for this I am trying to do this in Angular 4 and can still find nothing on it. Thanks!

[montylee]

I have written a wrapper for Angular 6 for Power BI, maybe you can give it a try: https://www.npmjs.com/package/ngx-powerbi

Also, refer my embedding how-to article for the same: https://medium.com/@ramandeep.singh.1983/power-bi-overview-and-angular-embedding-how-to-f73390f4a399...

[v-ljerr-msft]

Hi @tal,

Here is a smilar thread about Angular 2 and Power BI Embedded, in which some solutions are mentioned. Could you go to check if it works in your scenario? 

If anybody wants, you can use following libraries to do this.

* powerbi-cli
* powerbi-client

You will need the following also:

1. Azure Cloud access to create a Workspace Collection and Workspace with Power BI Embedded by logging into Azure Cloud

2. Then using powerbi-cli command on your prompt, config the workspace with its Access Key. Like:

     powerbi config -c <workspace-name> -k <workspace-access-key>

3. Create an actual workspace using using following command. This will give you workspace-id.

    powerbi create-workspace

4. Add the above generated workspace-id to the configuration as below:

    powerbi config -w <workspace-id>

5. Go to the directory where you have your Power BI report (.pbix). Import the report file from your local to the workspace on Azure using following command. You would create this file using Power BI Desktop.

    powerbi import -f <./report-file-name.pbix> -n <report-name>

6. Run following command to get the report-id of the report(s) you have imported in the previous steps.

    powerbi get-reports

7. And finally, using the following command, create a secured token for the report(s) you want to embed in your app by providing the report's report-id.

    powerbi create-embed-token -r <report-id>

Once the above steps are done, you will use the secured token created in step #7, the report-id and the embed URL with report-id (https://embedded.powerbi.com/appTokenReportEmbed?reportId=<report-id>) for the report to be embedded in your app.

HTML code:

<div id="reportContainer" style="height:500px;"></div>

TypeScript/JS code:

import * as pbi from 'powerbi-client';

showReport() {
    // Report's Secured Token
    let accessToken = '<ADD-THE-SECURED-TOKEN-FOR-REPORT-HERE>';

    // Embed URL
    let embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=<YOUR-REPORT-ID>';

    // Report ID
    let embedReportId = '<YOUR-REPORT-ID>';

    // 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.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    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");
    });
}

I spent quite a lot of time figuring this out. Hope this will save some time for somebody! 

P.S. - Your secured token for the report expires after some time. Don't know the default.

---

Regards

[talorlik]

On a side note: I had to re-register as I was unable to reset my password as I also didn't remember the username I used.

[Anonymous]

Did you managed to get the solution and get it working? Can you please post the entire steps followed by you and share some sample code, it would be of great help to us?

[talorlik]

Hi,

Thank you for getting back to me so quick.

I've already seen online, the explanation you've sent. Unfortunately, it doesn’t at all meet my needs.

A few things:

1. It is completely unnecessary to execute anything in command line for it to work. That whole section is redundant. The installation of powerbi-cli is not needed either.
2. The code example makes use of native Javascript and is not in Angular. Not even in AngularJS (Angular 1).
3. There is an existing module namely: angular-powerbi for AngularJS (Angular 1) but it doesn't work with the new Angular.
4. There is also an Angular 2 & 4 module namely: angular2-powerbi but there's little to no documents on it and I've yet to figure out how to make use of it.
5. I've tried to re-engineer the existing AngularJS example: https://github.com/Azure-Samples/powerbi-angular-client and convert it to the new Angular 5 but it has been an uphill battle and again, I'm working blind as there's insufficient, poor documentation.

So what have I managed to get right so far?

1. I've managed to, after much work, get the adal login process working; again the documentation does not provide for the new Angular. I've used a module that I found called: ng4-adal in case you want to check it out.
2. I've managed to use the powerbi-client module to get a report list (out of which I generate a menu).
3. I've managed to "get" the report (the json object IEmbedConfiguration) when you click on a menu item.

My main struggles currently:

1. To find out how to display it (embed it).
2. Figure out how to send in dynamically built embed configurations for filtering purposes i.e. feed outside filters into the fetch report.
3. Execute the adal login process (the "login handshake") in the background (I've seen it referred to as: "silent login") on an app level (using single credentials for the app) not a per user level. This is because we already have a Single Sign On service that we use throughout all the company’s apps and we wouldn't want to have to ask the user to then login again with their MS credentials and furthermore we wouldn't want to have to add all our user's MS loggings to our account and have to manage it.

I hope this gives you a better picture of what I've done so far and what I'm still tryig to do.

If you can help or point me to someone who can it'll be highly appreciated.

Regards,

Tal.

[vi354258]

Regarding your third struggle:

1. Create a task account in your organisation and assign power BI license to it. Remove the Multi Factor Authenticatin for that account (if any).

2.You can use resource owner flow to get the access token ( You can do it in the backend with nodejs)

3. With the accesstoken, you have to get the embed token.

4. For embedding the power bi report your organisation's azure team should enable embedding. This will be done by azure admin.

5. Create a DL and add the task account to the created DL. The Azure admin has to add this DL to the embedding permission list.

6. Report which are not inside a specific group are not fit for embedding..So, create a workspace (dont use myWorkspace) in Power BI desktop and  publish a report in it.

7. Get the groupID and reportID from the powerBI pro account

8.Get the embed Token using below reference

Post request

https://api.powerbi.com/v1.0/myorg/groups/<groupID>/reports/<reportID>/GenerateToken

9. Replace the embedToken, reportID and embedURL in the power BI playground ( Power BI playgroud ) and click Run. You will be able to find the report below. Yow copy the js code to use it your project.

Hope it gave you a better understanding.

Regards,

VJ.

[vi354258]

Can you share you code if possible ?

Thanks in Advance