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:
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsInR5cGUiOi
JlbWJlZCIsIndjbiI6InJrcGJpIiwid2lkIjoiMjY0MTJlNGQtNmQ0YS00ZTE1LTk3MzEtOTMxNzdkNT
U1ODNmIiwicmlkIjoiNDdlM2UxMTctNjViOS00YmI0LTgyODMtOTg1MjVlNWI3YzU5Iiwic2NwIjoiUm
Vwb3J0LlJlYWRXcml0ZSIsImlzcyI6IlBvd2VyQklTREsiLCJhdWQiOiJodHRwczovL2FuYWx5c2lzLn
dpbmRvd3MubmV0L3Bvd2VyYmkvYXBpIiwiZXhwIjoxNDk0NDY5ODY5LCJuYmYiOjE0OTQ0NjYyNjl9.n
ZW5lcop9VNLf1mWzc3-QUN2L1WaMe_b5bI5SQ6CojU

Create or use an existing web application. For myself, I created a new ASP .NET web application with Single Page Application template

I add the Power BI JavaScript nugget package into my project.

Thus, I see the powerbi.js file added

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

bundles.Add(newScriptBundle("~/bundles/app").Include(
"~/Scripts/sammy-{version}.js",
"~/Scripts/app/common.js",
"~/Scripts/powerbi.js",
"~/Scripts/app/app.datamodel.js",
"~/Scripts/app/app.viewmodel.js",
"~/Scripts/app/home.viewmodel.js",
"~/Scripts/app/_run.js"));

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.off("loaded");
// Report.on will add an event handler which prints to Log window.
    report.on("loaded", function () {
        Log.logText("Loaded");
    });
    report.off("error");
    report.on("error", function (event) {
        Log.log(event.detail);
    });
    report.off("saved");
    report.on("saved", function (event) {
        Log.log(event.detail);
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
<divid="reportContainer"style="height:600px"></div>

Run the application in preferably Chrome browser

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.

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.