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

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:

1. Configure Power BI with SPFx

2. Retrieve Power BI Workspaces

3. List Reports within a Workspace

4. 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

Select:

• 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

1. Go to Azure Portal ? App registrations.

2. Register a new app (or use the SPFx app).

3. Expose API Permissions:Microsoft Graph:Group.Read.AllUser.ReadPower BI Service:Dataset.Read.AllReport.Read.AllWorkspace.Read.All

4. Generate a Client Secret.

5. In API permissions, click Grant admin consent.

Step3: Install Required Packages

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

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

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.

Step 7: Time to implement it in webpart

Get Power BI 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:

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

Step 8: Deploy and Test

1. Run gulp bundle --ship && gulp package-solution --ship

2. Upload .sppkg to SharePoint App Catalog

3. Approve the API permissions

4. 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

• Power BI REST API Reference

• Microsoft Graph API Explorer

• Set up Power BI In SPFx

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!