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

[toy]

hi everyone

right now in an embedded report - there are 2 ways to SAVE AS

1. thru the JS lib report.saveAs()

2. thru allowing SaveAs and Edit perms on a report and thereby allowing the user to use the power bi in-app UI to save it

my concern is with option 2.

option 1 when the user is hitting my button and *I* initiate the JS 

then i can do other things

however when i doing option 2

is there a callback from power bi to my code so that i can still do those other things?

so for example in option 1 i can do this

    var r = getContainer(c);
    r.saveAs(params);
    alert("saved");

how would i get that alert to pop up if the user used option 2 to save the report?

[Anonymous · Accepted solution]

Could this be what you are looking for?

// report.on will add an event handler .

report.on("saved", function(event) {

    alert('saved');

}

[TedPattison]

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

[Anonymous]

Ted, that's great. Just added this and it's working except for one thing. When the app redirects to the new report  it's not getting the rls attached to it, which matches the old report. If I log out of our embedded app and then log back in it's there. Any thoughts on why that could be? 

[TedPattison]

If you are using third-party embedding (app-owns-data), you must generate an embed token with the RLS roles(s) you want to enforce embedded inside. Try using something like this to generate the embed token using the EffectiveIdentity class.

public static NewReportEmbeddingData GetNewReportWithRlsEmbeddingData() {

  string embedUrl = "https://app.powerbi.com/reportEmbed?groupId=" + workspaceId;

  PowerBIClient pbiClient = GetPowerBiClient();

  GenerateTokenRequest generateTokenRequestParameters =
    new GenerateTokenRequest(accessLevel: "create",
                             datasetId: datasetId,
                             identities: new List<EffectiveIdentity> {
                              new EffectiveIdentity(username: "username@goes.here",
                                                    datasets: new List<string> { datasetId },
                                                    roles: new List<string> { "Your RLS Role" }));


  string embedToken = pbiClient.Reports.GenerateTokenForCreateInGroup(workspaceId,
                                                                      generateTokenRequestParameters).Token;

  return new NewReportEmbeddingData {
    workspaceId = workspaceId,
    datasetId = datasetId,
    embedUrl = embedUrl,
    accessToken = embedToken
  };

}

[toy]

thx @ted we havent even gotten this far but im glad you pointed it out

because it was clearly going to have to be something to be done