Save Power BI embedded report in Database after making changes

Question

I am using power bi embedded package to embed power bi report - https://github.com/microsoft/powerbi-client-react

Report is embedded in the edit mode so user can create or edit the report. Now I have a save button and once the user makes changes to the power bi report, I would like to save the report in the database. Can you tell me how can I trigger the report event. It looks like allowed events of save does not work.

Also, if I have to get instance of the report after user has made changes or created the report, how can I get the instance of the report again to reflect new changes?

<PowerBIEmbed
    embedConfig = {{
        type: 'report',   // Supported types: report, dashboard, tile, visual and qna
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed,
        viewMode: models.ViewMode.Edit,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    eventHandlers = { 
        new Map([
            ['loaded', function () {console.log('Report loaded');}],
            ['rendered', function () {console.log('Report rendered');}],
            ['error', function (event) {console.log(event.detail);}]
        ])
    }
        
    cssClassName = { "report-style-class" }

    getEmbeddedComponent = { (embeddedReport) => {
        this.report = embeddedReport as Report;
    }}
/>

Report is being embedded correctly but now after someone has made changes, how do I get the updated report instance again so I can get visuals and store it in the database?

Answer 1

Currently, power-client-react does not support creating a fresh report. But, you can edit an existing report and save it as a new report using this library. To do this, you need to implement the following steps:

1. Generate embed token:

   • If report changes are to be saved as a new report, pass the following JSON body in the generate embed token request:

     {
       "accessLevel": "Edit",
       "allowSaveAs": "true",
     }
     

   • If report changes are to be saved in the same report, pass the following JSON body in the generate embed token request:

     {
       "accessLevel": "Edit",
     }
     

2. Embed report - add these configs in your embedConfig object:

   viewMode: models.ViewMode.Edit,
   permissions: models.Permissions.All,
   

3. Handle "saved" event:

   • If report changes are to be saved as a new report, add the following event handler in your eventHandlers map to get the new report Id and then embed the new report to get its instance:

     ['saved', function (event) {
         var newReportId = event.detail.reportObjectId);
     }]
     

   • If report changes are to be saved in the same report, add the following event handler in your eventHandlers map just to make sure the changes have been saved:

     ['saved', function (event) {
         console.log("Report saved");
     }]
     

4. Save the report:

   • Programmatically: Add a save button in your application if you want to save the changes on button click event and call the following function in the click listener:

     1. If report changes are to be saved as a new report

        function saveReport() {
          var saveAsParameters = {
              name: "<name_of_new_report>"
            };
          this.report.saveAs(saveAsParameters);
        }
        

     2. If report changes are to be saved in the same report

        this.report.save();
        

   • Power BI embedded experience:

     1. If report changes are to be saved as a new report:
        • Click on 'File' dropdown at top-left corner > Click on 'Save as' > Enter the name your new report > Click on 'Save'
     2. If report changes are to be saved in the same report:
        • Click on 'File' dropdown at top-left corner > Click on 'Save'

Note: "saved" event is fired when the save operation is complete and it returns a Json object containing the new reportId, report name, the old reportId (if there was one) and if the operation was saveAs or save. Then you can use this newReportId to generate embed url and embed token to embed the report and get the instance of the report.

You can refer to GitHub wiki to create a fresh report.

Find full article in Microsoft Docs.