Power BI Embedded Walk Through Part 3 of 3

Power BI Embedded Walk Through Part 1 of 3
Power BI Embedded Walk Through Part 2 of 3

In the previous 2 blog articles, I have shown how to create a Power BI Embedded       Workspace collection, import a Power BI desktop file and get generated embed details.

To recap from the last post, I obtained the embed Url Embed Url: https://embedded.powerbi.com/appTokenReportEmbed?reportId=47e3e117-65b9-4bb4-8283-98525e5b7c59
Embed Token:

Create or use an existing web application. For myself, I created a new ASP .NET web application with Single Page Application template
Power BI Embedded Walk Through Part 3 of 3-1

I add the Power BI JavaScript nugget package into my project.
Power BI Embedded Walk Through Part 3 of 3-2
Thus, I see the powerbi.js file added
Power BI Embedded Walk Through Part 3 of 3-3

The following places to put the code.
In App_Start\BundleConfig.cs, add the Power BI script reference


In Scripts\app\home.viewmodel.js, add the PowerBI embedded JavaScript code snippet. Note the configuration needed for the accessToken, embedUrl, and id. You can get this in my post of part 2 of 3. As for the accessToken, it has a short expiry. In the ProvisionSample App, there is a call to createEmbedToken, and you can pass an expiry date to control the lifetime of the token. As for some refresh token mechanism, I have yet figure out how that would happen.

As or KnockoutJS conventions, I could have not used JQuery on the reportContainer div and did proper binding.

functionHomeViewModel(app, dataModel) {
var self = this;
    self.myHometown = ko.observable("");

    Sammy(function () {
// Removed function code for brevity

var models = window['powerbi-client'].models;

var PBIconfig = {
        type: 'report',
accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsInR5cGUiOiJlbWJlZCIsIndjbiI6InJrcGJpIiwid2lkIjoiMjY0MTJlNGQtNmQ0YS00ZTE1LTk3MzEtOTMxNzdkNTU1ODNmIiwicmlkIjoiMDYxODlkYmQtYWRhZS00YWRiLTljMDQtZTNkMGNkZmIxZmQ3Iiwic2NwIjoiUmVwb3J0LlJlYWRXcml0ZSIsImlzcyI6IlBvd2VyQklTREsiLCJhdWQiOiJodHRwczovL2FuYWx5c2lzLndpbmRvd3MubmV0L3Bvd2VyYmkvYXBpIiwiZXhwIjoxNDk0NjQwMzM3LCJuYmYiOjE0OTQ1NTM5Mzd9.VroIsYUxVDzbgHl0HyJ2sJTPRWWtQ6wjzZkrRXP8SmQ',
embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=06189dbd-adae-4adb-9c04-e3d0cdfb1fd7',
id: '06189dbd-adae-4adb-9c04-e3d0cdfb1fd7',
        permissions: models.Permissions.All /*gives maximum permissions*/,
        viewMode: models.ViewMode.Edit,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true

var reportContainer = $('#reportContainer')[0];
var report = powerbi.embed(reportContainer, PBIconfig);
// Report.off removes a given event handler if it exists.
// Report.on will add an event handler which prints to Log window.
    report.on("loaded", function () {
    report.on("error", function (event) {
    report.on("saved", function (event) {
if (event.detail.saveAs) {
            Log.logText('In order to interact with the new report, create a new token and load the new report');

return self;

Go to Views\Home\_Home.cshtml and the div container for the iFrame to display the Power BI report

Run the application in preferably Chrome browser
Power BI Embedded Walk Through Part 3 of 3-4

Since this is in Edit mode, the user can interactively edit the chart, add to it as if you were in Power BI Service or Power BI desktop. Also, the ability save or save as. I find this quite neat and serves DIY analytical scenarios.

Going back to Azure Portal, since a user had started a session with this report, you can see the one embed session.
Power BI Embedded Walk Through Part 3 of 3-5

Final Remarks
My experience to learn about Power BI Embedded was quite challenging and time-consuming as each online documentation told part of the entire developer story. I hope I have shown a good end to end walkthrough to understand what is involved.

One thought on “Power BI Embedded Walk Through Part 3 of 3

  1. Pingback: Power BI Embedded Walk Through Part 2 of 3 – Roy Kim on SharePoint, Azure, BI, Office 365

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s