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. Set up SPFx for Power BI Integration
Start by creating a new SPFx solution
yo @microsoft/sharepoint
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
- Go to Azure Portal → App registrations.
- Register a new app (or use the SPFx app).
- Expose API Permissions:
- Microsoft Graph:
- Power BI Service:
- Dataset.Read.All
- Report.Read.All
- Workspace.Read.All
- Generate a Client Secret.
- In API permissions, click Grant admin consent.
Step 3. 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 the 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 the 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<AadHttpClient> {
return await context.aadHttpClientFactory.getClient(this.powerbiApiResourceId);
}
public static async getWorkspaces(context: WebPartContext): Promise<PowerBiWorkspace[]> {
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<PowerBiReport[]> {
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<PowerBiReport | null> {
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 the 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 => (
<Card key={report.id} shadow="sm" p="md">
<Title order={4}>{report.name}</Title>
<Text>Report ID: {report.id}</Text>
<a href={report.webUrl} target="_blank" rel="noopener noreferrer">View Report</a>
</Card>
))}
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 the Azure app is granted the correct Power BI permissions
- Consent to Graph & Power BI permissions in Admin Center
- Ensure the user has access to workspaces/reports in the 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!