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