How to Embed Power BI Reports in Web Apps: Step-by-Step Guide for 2024

Power BI Embedded Analytics transforms how businesses present data. It offers developers the tools to embed Power BI reports, dashboards, and tiles directly into websites or apps. With this feature, you can white-label Power BI, giving your users a seamless, branded experience without them even knowing Power BI is in the background.

Whether you're embedding for your own organization or for customer-facing apps, this guide will walk you through the differences, setup, and steps to get started.

Power BI Embedded: What Is It?

Power BI Embedded is a tool for incorporating Power BI directly into your applications. Think of it as giving your data a new stage, but without needing users to interact with Power BI's native interface.

Instead of pointing users to Power BI with its branding, you display reports within your own app or website. This is especially valuable for customer-facing tools where customization and branding are crucial.

Key Benefits of Power BI Embedded:

• Custom Branding: You deliver analytics that appear as if they’re part of your product, not Power BI.

• Customer Simplicity: Your users don’t need Power BI accounts to access these insights.

• Control Report Behavior: Through APIs, you control features like which tabs users see first or what filters apply.

Two Scenarios for Embedding Power BI

Before diving in, it’s essential to understand the two main ways to embed Power BI: Embed for Organizations and Embed for Customers. Each approach is designed for different use cases.

Scenario 1: Embed for Organization

This option is for internal use. You’re embedding Power BI in tools like Microsoft Teams, SharePoint, or even PowerPoint, giving employees easy access to reports.

• Authentication: Users must have Power BI accounts. Each viewer logs in with their credentials.

• Capacity: If users have Pro licenses, no extra capacity is required unless the workspace or app needs premium capabilities.

Scenario 2: Embed for Customers

Here, you’re building customer-facing applications. This scenario is common for independent software vendors (ISVs) who use Power BI to power dashboards within their apps.

• Authentication: The app authenticates, not the users. This makes things simpler for users, as they don’t need Power BI accounts.

• Capacity: Premium capacity is mandatory. Azure SKUs are often recommended for cost-effective scaling.

Differences Between Organization and Customer Embedding

Understanding these differences will help you choose the right approach for your project.

Authentication:

• Organization: Each user must log in with a Power BI account.

• Customer: Authentication is handled via an app using service principals or master accounts.

Report Location:

• Organization: Reports can reside in any workspace, including personal ones.

• Customer: Reports must exist in app workspaces.

Capacity:

• Organization: You don’t need premium capacity unless unlicensed users view the reports.

• Customer: Premium capacity (either Office SKU or Azure SKU) is always required.

Setting Up Azure Active Directory (Azure AD) for Power BI Embedded

Let’s start building your Power BI Embedded solution by registering an app in Azure Active Directory.

Steps to Register Your App:

Log in to the Azure portal.

1. Navigate to Azure Active Directory > App Registrations.

2. Click New Registration and fill out:

   • Name: Choose a meaningful identifier for your app.

   • Platform: If prompted, select the platform type.

   • Redirect URL: Enter your callback URL (often an app or function URL).

3. Save the app and note these critical details:

   • Application (Client) ID.

   • Directory (Tenant) ID.

Granting Power BI API Permissions

Your app needs permission to call Power BI APIs. Here’s how to set those:

1. Go to API Permissions in the app registration overview.

2. Add Power BI Service permissions:

   • Read and Write All Workspaces

   • Generate Embed Tokens

3. Grant admin consent to apply for the permissions.

An alternative to manually updating these permissions is using the Power BI Playground, which simplifies app setup and lets you test embedded features interactively.

Enabling Service Principals in Power BI

Service principals are crucial for embedding reports in customer-facing apps. Follow these steps in the Power BI Admin Portal:

1. Open Settings > Tenant Settings.

2. Locate Allow service principals to use Power BI APIs.

3. Assign the permission to a specific security group rather than allowing access to the entire organization.

Creating and Configuring Workspaces for Reports

For customer scenarios, your reports must go into an app workspace. Here’s how to set that up:

1. Create a new workspace in Power BI.

2. Upload or create the reports you want to embed.

3. Grant your Azure AD app admin rights to this workspace via the Workspace Access settings.

Generating Embed Tokens and URLs

To embed a Power BI report, you need two key elements: the embed token and the embed URL.

How to Get These:

1. Use the Power BI REST API to generate an embed token.

   • This grants temporary access to the report.

2. Extract the report’s embed URL and associated dataset by querying the workspace and report IDs.

Useful Tools:

• Power BI Playground.

• API Docs for Power BI.

Embedding the Report in a Sample App

Microsoft provides sample code to help you learn Power BI embedding. You can download it from their GitHub repository.

Configuring the Sample App:

1. Open the project in Visual Studio.

2. Edit the web.config file to include:

   • Authentication Type: Service Principal.

   • Your app’s Client ID, Secret, Tenant, Report ID, and Workspace ID.

3. Compile the project and test to ensure everything works.

Setting Up and Deploying an Azure Function

Azure Functions simplify generating embed tokens and URLs dynamically. They act as a backend to handle authentication and token generation.

Steps to Set Up the Azure Function:

1. Create an Azure Function App in the Azure portal.

2. Write a function using the .NET SDK to generate embed URLs and tokens.

3. Test locally before publishing.

After publishing, configure Cross-Origin Resource Sharing (CORS) in the Azure portal to allow your front-end app to call the function.

Hosting the Embedded Report

You’ll need a web server to host your front-end app. Azure Blob Storage works well for this.

Steps to Deploy:

1. Upload your JavaScript files and HTML app to an Azure Blob Storage container.

2. Generate and use a shared access signature (SAS) token for secure access.

3. Use the URL from the blob to test your embedding setup in a browser.

Customizing Report Behavior with the Power BI Playground

The Power BI Playground is a powerful testing tool for refining embedded behavior. Use its Developer Sandbox to experiment with features like:

• Loading specific report pages by default.

• Applying filters or slicers dynamically.

It speeds up development by letting you test changes before deploying them.

Conclusion: Making Embedded Analytics Work for You

Power BI Embedded makes it possible to create interactive, branded analytics experiences in your apps. Whether you’re streamlining internal reporting or building customer-facing dashboards, embedding Power BI gives you the data insights users need without the hassle of teaching them Power BI.

With the right tools and setup, embedding Power BI can become a smooth, repeatable process, empowering you to focus on delivering data-driven solutions. So, why wait? Dive in and make your data shine!