Can I Create or Modify Power BI Report Visuals from React?

Thanks for the detailed question. please check the answers below.

1. Can you create or modify visuals from React using powerbi-client-react?

Yes, when the report is embedded in Edit mode, the Power BI JavaScript Authoring APIs support:

• Creating and deleting visuals
• Moving and resizing visuals
• Changing supported visual types
• Updating the data fields used by a visual
• Applying filters
• Saving report changes via report.save()

2. Is there a Microsoft API/SDK to save changes back?

Yes, the same Power BI JavaScript SDK Authoring APIs. After making supported changes, call await report.save().

3. Recommended approach

• Visual authoring (create, delete, move, resize, change type, update fields, filters, save) -> JS Authoring APIs in Edit mode.
• Report appearance ->report themes, where applicable.
• Semantic model changes (measures, tables, relationships) -> not supported through the Authoring APIs; use the appropriate Power BI development tools.

Please note the Authoring APIs provide a supported subset of report editing and are not intended to replicate the full Power BI Desktop authoring experience.

Minimum setup:

import { useRef } from "react";
import { PowerBIEmbed } from "powerbi-client-react";
import { models } from "powerbi-client";

const embeddedReportRef = useRef();

<PowerBIEmbed
  embedConfig={{
    type: "report",
    id: reportId,
    embedUrl: embedUrl,
    accessToken: accessToken,
    tokenType: models.TokenType.Embed,
    viewMode: models.ViewMode.Edit,
    permissions: models.Permissions.All
  }}
  getEmbeddedComponent={(report) => { embeddedReportRef.current = report; }}
/>

Example: add a visual and save:

const report = embeddedReportRef.current;
const page = await report.getActivePage();

await page.createVisual(
  "columnChart",
  { x: 0, y: 0, width: 400, height: 300 },
  true // autoFocus
);

await report.save();

Please ensure the embedding scenario, user permissions, and licensing meet the requirements for editing and saving embedded reports as described in the Microsoft documentation.

References:

• Report authoring in Power BI Embedded
• Power BI JavaScript SDK
• Power BI JavaScript Playground
• powerbi-client-react on GitHub

Thanks,
C Srikanth
Community Support Team

Thank you for testing the sample and for sharing the SDK versions along with the available methods from the Page object.

You're correct based on your testing with powerbi-client 2.24.1 and powerbi-client-react 2.0.2, page.createVisual() is not available. I apologize for the confusion in my earlier reply.

Based on the current Microsoft documentation, there is no documented public API that supports creating new report visuals programmatically from an embedded React application using the Power BI JavaScript SDK.

The Power BI JavaScript SDK provides a supported subset of report authoring capabilities for embedded reports, but it does not provide the same authoring capabilities as Power BI Desktop or the Power BI Service.

If your requirement is to allow users to create entirely new visuals and save them back to the report from a React application, this capability is not currently supported through the public JavaScript SDK.

For the latest supported authoring capabilities, please refer to the official documentation:

• Report authoring for Power BI Embedded: https://learn.microsoft.com/power-bi/developer/embedded/report-authoring

• Power BI JavaScript SDK: https://learn.microsoft.com/javascript/api/overview/powerbi/

• powerbi-client-react GitHub repository: https://github.com/microsoft/powerbi-client-react

Thank you again for pointing this out. Your findings help clarify the current capabilities of the SDK for other community members as well.

Thanks.