Search Results :

Ă—
Sign Up Contact Us

Contents

How to Embed Microsoft Power BI Reports in Umbraco Applications?

Guide to embed Power BI reports and dashboards in Umbraco. Integrate Microsoft Power BI with Umbraco using the miniOrange Power BI Integrator plugin. This setup guide will walk you through the steps to embed Power BI reports, dashboards, tiles, datasets, or semantic models into your Umbraco pages and posts—allowing users to view interactive Power BI artifacts directly from the Umbraco site. You can also enable Row Level Security (RLS) for a granular and personalized view of Power BI charts in Umbraco.

download plugin button Download plugin pricing button plugin pricing button Pricing Plans

The miniOrange Umbraco Integrator requires:

  • An Umbraco application running on version 9 to 15.
  • The application should be connected to an MS SQL Server. (If not, we can suggest the appropriate version based on your database.)
  • If your application does not use a database, we can also provide a version that works without a database.
  • A Microsoft Power BI account.
  • Install the miniOrange PowerBI Integrator Nuget Package using the Nuget Package Manager or CLI.
NuGet Package
.NET CLI

PM> NuGet\Install-Package miniOrange.Umbraco.PowerBI.Integrator

  • Once installed, just build the application to add miniOrange views and static files.
  • Add the following details in your program.cs file.

  using miniOrange.Umbraco.PowerBI;
  using Umbraco_PowerBI_Integrator;
  using Umbraco_PowerBI_Integrator.RouteObserver;

  WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

  builder.Services.AddMiniOrangeServices(builder.Configuration);

  builder.CreateUmbracoBuilder()
       .AddBackOffice()
       .AddWebsite()
       .AddDeliveryApi()
       .AddComposers()
       .Build()

  WebApplication app = builder.Build();

  await app.BootUmbracoAsync();

  app.UseStaticFiles();

  app.UseUmbraco()
         .WithMiddleware(u =>
         {
              u.UseBackOffice();
              u.UseWebsite();
              u.AppBuilder.UseminiOrangeUmbracoPowerBIMiddleware();
         })
         .WithEndpoints(u =>
         {
              u.UseInstallerEndpoints();
              u.UseBackOfficeEndpoints();
              u.UseWebsiteEndpoints();
         });

  await app.RunAsync();
  • Build and Run the application.

We will make some PowerBI Configuration Inside miniOrange Dashboard

  • You will be presented with the home screen of azure active directory.
  • Under the azure services section, select Microsoft Entra ID.
Azure Active Directory - Home Screen

  • In the left tab, under the manage section, select App registrations.
Azure Active Directory - App Registrations

  • Click on new registration.
Azure Active Directory - New Registrations

  • Assign the Display Name in the name field and choose the account type.
  • In the Redirect URI field, provide the Base URL of your Umbraco site and click on the Register button.
Azure Active Directory - Register an application

  • After the registration of an application, Azure AD assigns an unique application ID to your application.
  • Navigate to the Overview tab, in the left pane.
  • Copy the Application ID and the Directory ID, this will be your Client ID and Tenant ID.
Azure Active Directory - Unique application ID

  • From the left navigation pane, navigate to the Certificates & secrets tab.
  • Click on a new client secret. Enter the description and expiration time and click on the ADD option.
Azure Active Directory - Certificates & Secrets

  • Copy the value of Secret Key. This will be your Client Secret Key.
Azure Active Directory - Secret Key

  • Go to API Permissions from the left navigation pane and click on add a permission option.
Azure Active Directory - API Permissions

  • Select Microsoft Graph under the Microsoft APIs tab.
Microsoft Graph

  • Select Application Permissions and search for the User.
Application Permissions Application Permissions

  • Under User select User.Read and User.Read.All permissions and click on the Add Permissions button.(microsoft graph)
User Read All Permissions

  • Click on add permission scroll down and select Power BI Service under request api permission option.
Power BI Service

  • Select Delegate Permission and search for the Report.
Delegate Permission

  • Under Reports select Report.Read.All permission and click on the Add Permission button. (Power BI)
Delegate Permission

  • Now you can see the all permissions in the api permission section
All Permissions

  • Click on grant admin consent for default directory and click on Yes on grant admin consent confirmation.
Grant Admin Consent

  • You have successfully configured the Azure AD application.
  • In the Azure active directory home page, navigate to the Groups from the left pane.
Azure active directory - Groups

  • Click on New Group to add a new security group.
Azure active directory - New Group

  • Select the Group type as Security from the dropdown and enter the Group Name as Allow Power BI Admin APIs.
  • Once you have entered the details click on the Create button to create a new security group.
Azure active directory - New Group

  • Search and select newly created security groups (Allow Power BI Admin APIs).
Azure active directory - New Created Security Groups

  • Navigate to the Members tab from the left pane and click on Add Members.
Azure active directory - Add Members

  • Now search for the application name you have previously configured and click on the select button.
Azure active directory - Add Members

You have successfully configured the Azure AD app to achieve User Sync and Power BI integration into your Umbraco Application.

  • Go to the Power BI dashboard and login as an administrator.
  • You will be represented with the home screen of the Power BI.
  • On the top right corner, click on settings icon as shown below.
PowerBI - Home Screen

  • Under the governance and insights click on the admin portal option.
PowerBI - Admin Portal

  • In the admin Portal section, under the tenant settings, scroll down to the developer settings.
  • Click on Allow service principals to create and use profiles.
  • Enable the toggle and then click on Apply.
PowerBI - Admin Portal Tenant Settings

  • Scroll down to the Admin API settings, enable the toggle and then choose the option of specific security groups.
  • Search for Umbraco Power BI User Group then click on Apply.
Umbraco Power BI User Group

  • Navigate back to the home page. Select the Workspaces tab from the left pane and then select your workspace from the list.
PowerBI - Workspaces

  • Navigate to the Manage Access tab.
PowerBI - Manage Access

  • In the Manage Access section, click on the add Add People or Groups.
PowerBI - Add People or Groups

  • Search for the application that you have previously configured. From the dropdown select the Viewer and click on Add button to assign this Azure AD application to your Power BI workspace.
PowerBI - Add People or Groups

  • Select the report that you want to embed in the Umbraco page or post.
  • Then copy the Workspace_ID and Report_ID from the URL as shown in the below image and keep it handy as you will need it further.
PowerBI - Add People or Groups

  • Visit the Umbraco application.
  • On the base URL of your application, add the /?action=config query parameter.(/?action=config)
  • You will be shown with the Registration Form, fill and click on the Register button.
Umbraco - Registration form

  • Once registered you will be shown with the miniOrange Admin Dashboard.
  • Go to the Authentication Settings tab and enter Client ID,Client Secret & Tenant ID of your Azure AD Application then click on save.
Umbraco - Authentication Settings

  • Now go to the Power BI settings tab and enter the Report name, Workspace_ID and Report_ID of your report.
Umbraco - Power BI Settings

  • The script will be generated which shows Workspace_ID and Report_ID of your Power BI report.
  • Login to your Umbraco BackOffice account.
  • On the content tab -> Click on the PowerBI reports option.
Umbraco - Power BI Reports

  • In the miniOrange Trial version you will only be able to access the report after login with the Entra ID account. Click on the Sign-In button and login with the Entra ID Account
  • You will be shown with the PowerBI report as soon as you login.
Umbraco - Power BI Reports


Please reach out to us at umbracosupport@xecurify.com, and our team will assist you with setting up Power BI integration in Umbraco. We will also help you choose the most suitable solution or plan based on your requirements.

ADFS_sso ×
Hello there!

Need Help? We are right here!

support