SAVE AS in embedded power bi - callback for in-app power bi button

When the user saves a new report, there is nothing that happens automatically to navigate from the new report to the exisitng report that has been saved in the target Power BI workspaces. Therefore, you must typically add client-side code for an embedded new report that looks like this.  

// Get data required for embedding
var embedWorkspaceId = "@Model.workspaceId";
var embedDatasetId = "@Model.datasetId";
var embedUrl = "@Model.embedUrl";
var accessToken = "@Model.accessToken";

// Get models object to access enums for embed configuration
var models = window['powerbi-client'].models;

var config = {
  datasetId: embedDatasetId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed,
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.createReport(embedContainer, config);

// add event handler to load existing report afer saving new report
report.on("saved", function (event) {
  console.log("saved");
  console.log(event.detail);
  window.location.href = "/Home/Reports/?reportId=" + event.detail.reportObjectId;
});

The idea is that you must redirect the user to a page that will then load in the report that has just been saved. If you do not do this, the user will just stay in the New Form object and things will not work correctly.I can then redirect the user who just saved a report to this MVC controller. So then I redirect the user to another MVC controler passing the new report ID as a query string parameter.

public async Task<ActionResult> Reports(string reportId) {
      ReportEmbeddingData embeddingData =
          await PbiEmbeddedManager.GetEmbeddingDataForReport(reportId);
      return View(embeddingData);
}

This controller calls a method in a service class I created which calls back to the Power BI Service to get the embedding data,

public static async Task<ReportEmbeddingData> GetEmbeddingDataForReport(string currentReportId) {
  PowerBIClient pbiClient = GetPowerBiClient();
  var report = await pbiClient.Reports.GetReportInGroupAsync(workspaceId, currentReportId);
  var embedUrl = report.EmbedUrl;
  var reportName = report.Name;

  GenerateTokenRequest generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "edit");
  string embedToken =
        (await pbiClient.Reports.GenerateTokenInGroupAsync(workspaceId,
                                                            currentReportId,
                                                            generateTokenRequestParameters)).Token;

  return new ReportEmbeddingData {
    reportId = currentReportId,
    reportName = reportName,
    embedUrl = embedUrl,
    accessToken = embedToken
  };

}

Then I return the embedding data to an MVC razor view to embed the saved report.

@model EmbeddedLab.Models.ReportEmbeddingData

@section toolbar {
  <div id="toolbar" class="btn-toolbar bg-dark" role="toolbar">
    <button type="button" id="toggleEdit" class="btn btn-sm">Toggle Edit Mode</button>
    <button type="button" id="fullScreen" class="btn btn-sm">Full Screen</button>
    <button type="button" id="print" class="btn btn-sm">Print</button>
  </div>
}

<div id="embedContainer" />

<script src="~/Scripts/powerbi.js"></script>

<script>

  // Data required for embedding Power BI report
  var embedReportId = "@Model.reportId";
  var embedUrl = "@Model.embedUrl";
  var accessToken = "@Model.accessToken";

  // Get models object to access enums for embed configuration
  var models = window['powerbi-client'].models;

  var config = {
    type: 'report',
    id: embedReportId,
    embedUrl: embedUrl,
    accessToken: accessToken,
    tokenType: models.TokenType.Embed,
    permissions: models.Permissions.All,
    viewMode: models.ViewMode.Edit,
    settings: {
      filterPaneEnabled: false,
      navContentPaneEnabled: true,
    }
  };

  // Get a reference to HTML element that will be embed container
  var reportContainer = document.getElementById('embedContainer');

  // Embed the report and display it within the div container.
  var report = powerbi.embed(reportContainer, config);

  var viewMode = "edit";

  $("#toggleEdit").click(function () {
    // toggle between view and edit mode
    viewMode = (viewMode == "view") ? "edit" : "view";
    report.switchMode(viewMode);
    // show filter pane when entering edit mode
    var showFilterPane = (viewMode == "edit");
    report.updateSettings({
      "filterPaneEnabled": showFilterPane
    });
  });

  $("#fullScreen").click(function () {
    report.fullscreen();
  });

  $("#print").click(function () {
    report.print();
  });

</script>

Yes, I agree it's a lot more work then most people expect to provide the new report experience in Power BI embedding.

If you are interested in learning how to program this pattern, here is a set of lab exercises you can workthrough to create this type of Power BI embedding application from scratch.

Developer Quick Start into Power BI Embedding