Power BI is a strong data visualization platform and embedding Power BI content within SharePoint Framework (SPFx) allows users to get actionable insights directly in their workflow. In this blog, we are going to learn how to:

Configure Power BI with SPFx
Retrieve Power BI Workspaces
List Reports within a Workspace
Retrieve Groups (Power BI workspaces) with member details

Now let’s get going with integrating Power BI + SPFx using Microsoft Graph and Power BI REST APIs.

Step 1: Setup SPFx for Power BI Integration

Start by creating a new SPFx solution

yo @microsoft/sharepoint

What is your solution name? PowerBIIntegration
Which type of client-side component to create? WebPart
What is your Web part name? PowerBiReportEmbed
Which template would you like to use? React

Step 2: Register Azure AD App for Power BI Access

Go to Azure Portal ? App registrations.
Register a new app (or use the SPFx app).
Expose API Permissions:

Microsoft Graph:

Group.Read.All
User.Read

Power BI Service:

Dataset.Read.All
Report.Read.All
Workspace.Read.All

Generate a Client Secret.
In API permissions, click Grant admin consent.

Step3: Install Required Packages

npm install powerbi-client powerbi-models --save

Step 4: Add this graph Power BI API to package-solution.json

"webApiPermissionRequests": [
  {
    "resource": "Power BI Service",
    "scope": "Group.Read.All"
  },
  {
    "resource": "Power BI Service",
    "scope": "Dataset.Read.All"
  },
  {
    "resource": "Power BI Service",
    "scope": "Report.Read.All"
  },
  {
    "resource": "Power BI Service",
    "scope": "Dashboard.Read.All"
  }
]

Don't forget to approve the permissions from the SharePoint Admin Center. The above permissions are required. After deploying the web these permission must be approved by global tenant admin. Please refer here for more information.

Step 5: Add models to web part component folder

export interface PowerBiWorkspace {
  id: string;
  name: string;
  isReadOnly: boolean;
}

export interface PowerBiReport {
  id: string;
  name: string;
  embedUrl: string;
  webUrl: string;
  datasetId: string;
  accessToken: string;
}

Step 6: Add services to web part

The PowerBiService.ts file acts as a helper service that securely connects your SPFx solution to the Power BI REST API. It provides three key methods— GetWorkspaces, GetReports, and GetReportByReportId to retrieve workspaces, reports within a workspace, and a specific report by ID. Each method uses the WebPartContext to create an AadHttpClient for authenticated API calls. This approach keeps your API logic modular, reusable, and easier to manage when embedding or interacting with Power BI content.

import { WebPartContext } from "@microsoft/sp-webpart-base";
import { AadHttpClient } from "@microsoft/sp-http";
import { PowerBiWorkspace, PowerBiReport } from "../models/PowerBiModels";

export class PowerBiService {
  private static readonly powerbiApiResourceId = "https://analysis.windows.net/powerbi/api";
  private static readonly baseApiUrl = "https://api.powerbi.com/v1.0/myorg/groups/";
  private static readonly tokenKey = "adal.access.token.key" + PowerBiService.powerbiApiResourceId;

  private static async getClient(context: WebPartContext): Promise {
    return await context.aadHttpClientFactory.getClient(this.powerbiApiResourceId);
  }

  public static async getWorkspaces(context: WebPartContext): Promise {
    try {
      const client = await this.getClient(context);
      const response = await client.get(this.baseApiUrl, AadHttpClient.configurations.v1, {
        headers: { Accept: "application/json" },
      });

      if (!response.ok) throw new Error(`Failed to fetch workspaces: ${response.statusText}`);

      const data = (await response.json()) as { value: PowerBiWorkspace[] };
      return data.value;
    } catch (error) {
      console.error("PowerBiService.getWorkspaces Error:", error);
      return [];
    }
  }

  public static async getReports(
    context: WebPartContext,
    workspaceId: string
  ): Promise {
    try {
      const client = await this.getClient(context);
      const reportsUrl = `${this.baseApiUrl}${workspaceId}/reports/`;
      const response = await client.get(reportsUrl, AadHttpClient.configurations.v1, {
        headers: { Accept: "application/json" },
      });

      if (!response.ok) throw new Error(`Failed to fetch reports: ${response.statusText}`);

      const data = (await response.json()) as { value: PowerBiReport[] };

      return data.value.map((report) => ({
        ...report,
        accessToken: window.sessionStorage[this.tokenKey] || "",
      }));
    } catch (error) {
      console.error("PowerBiService.getReports Error:", error);
      return [];
    }
  }

  public static async getReport(
    context: WebPartContext,
    workspaceId: string,
    reportId: string
  ): Promise {
    try {
      const client = await this.getClient(context);
      const reportUrl = `${this.baseApiUrl}${workspaceId}/reports/${reportId}/`;
      const response = await client.get(reportUrl, AadHttpClient.configurations.v1, {
        headers: { Accept: "application/json" },
      });

      if (!response.ok) throw new Error(`Failed to fetch report: ${response.statusText}`);

      const report = (await response.json()) as PowerBiReport;

      return {
        ...report,
        accessToken: window.sessionStorage[this.tokenKey] || "",
      };
    } catch (error) {
      console.error("PowerBiService.getReport Error:", error);
      return null;
    }
  }
}

Step 7: Time to implement it in webpart

Get Power BI Workspaces:

const workspaces = await PowerBiService.getWorkspaces(context);
console.log('Workspaces:', workspaces );

Output Fields – Workspaces

Each workspace object includes:

id: Unique identifier of the workspace
name: Display name of the workspace
isOnDedicatedCapacity: Indicates if it's backed by Premium capacity (boolean)

Get Reports in a Workspace:

const reports = await PowerBiService.getReports(context, workspaceId);

Output Fields – Reports

Each report object includes:

id: Unique ID of the report
name: Display name of the report
embedUrl: URL used for embedding the report
webUrl: Direct link to view the report in Power BI
datasetId: ID of the dataset powering the report

Optional: Render in React

{reports.map(report => (
    Report ID: {report.id}
    View Report
))}

Step 8: Deploy and Test

Run gulp bundle --ship && gulp package-solution --ship
Upload .sppkg to SharePoint App Catalog
Approve the API permissions
Add your web part to a modern SharePoint page

Troubleshooting Tips

Make sure Azure app is granted correct Power BI permissions
Consent to Graph & Power BI permissions in Admin Center
Ensure user has access to workspaces/reports in Power BI Service
Use browser dev tools to inspect failed 403 or 401 errors

Helpful Resources

Summary

By integrating Power BI into SPFx with Microsoft Graph and REST APIs, you can:

Retrieve Workspaces
List Reports dynamically
Get Group Members behind Workspaces
Create powerful dashboards in SharePoint

Want More?

Feel free to connect or ask questions on LinkedIn. Next time, we’ll embed the actual Power BI report iframe with SSO using the powerbi-client-react package.

Happy coding!

Integrate Power BI with SPFx: Retrieve Reports, Workspaces & Groups