Embed PowerBI in Appfarm

This guide outlines the necessary configurations in Entra, Power BI, and Appfarm to successfully embed Power BI reports in an Appfarm app.

Part 1: Entra and Power BI Configurations

Most of these steps are already configured, but it's crucial to understand their requirements.

1. App Registration in Entra

An application needs to be registered in Entra.
Required API Permissions (Minimum):
- Dataset.Read.All: Delegated permission to "View all datasets".
- Report.Read.All: Delegated permission to "Make API calls that require read permissions on all reports".
Generate Embed Token - REST API: This process is used to generate the embed token.

2. Security Group in Entra

A security group in Entra must be created for use in the Power BI Admin center.
The Entra App created above needs to be added to this security group.

3. Power BI Admin Center Settings

Ensure the security group is added to the necessary developer and admin settings within the Power BI Admin center.
Developer Settings: Select "Service principals can use Power BI APIs".
Admin API Settings: Select "Service principals can access read-only admin API".

Part 2: Appfarm Configuration

These Appfarm configurations are necessary.

1. Secrets in Appfarm Create

Two secrets need to be created:
- Entra PBI App ID
- Entra PBI App Secret

2. Whitelist PBI Script Source

In the Environment Config (for each environment), add the Power BI Script source to the environment whitelist (Content Security -> Script Sources).

The URL for the script is:
https://cdn.jsdelivr.net/npm/[email protected]/dist/powerbi.min.js

Part 3: Power BI Report Setup and Configuration

1. Workspace Access

The Entra App (not the Security Group) must have access to the workspace where the Power BI report is located.
The app's role in the workspace must be either "Member" or "Admin".

2. Identify IDs and Roles

Note down the IDs for the Dataset, Report, and Workspace (also known as Group ID).
If Row-Level Security (RLS) is used, note the names of the roles in the report.

Part 4: Appfarm App Configuration

1. Create App Variables

Create two App Variables in your Appfarm application:
- One to store the Access Token.
- One to store the Embed Token.

2. On-App Load Action with web request to generate access token

Create an "On - App Load" action.
Add a Web Request action node to generate the Access Token.
- Base URL: https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/token (You can copy the endpoint from the Entra App for accuracy)
- Method: POST.
- Auth: No auth.
- Body Type: URL-encoded.
- Body Content:
  Add 4 Form Data entries the following Keys and Values
  grant_type=client_credentials client_id=${entraPBIAppID} // Use the secret variable for App ID client_secret=${entraPBIAppSecret} // Use the secret variable for App Secret scope=https://analysis.windows.net/powerbi/api/.default
- Result mapping: Select App Variables data source, and type in path access_token on the property mapping for the access token app variable.

3. Web request to generate Embed Token

Add another Web request action node to generate the Embed Token.

Base URL: https://api.powerbi.com/v1.0/myorg/GenerateToken.
Authorization: Bearer
Auth Token: App Variables.Access Token
Prefix Bearer Keyword: ✅
Method: POST.
Body Type: Raw.

Body Content (JavaScript):

Define the following function (add currentUserEmail as function parameter)

return {
    datasets: [
        {
            "id": "<dataset ID>",
            "xmlaPermissions": "ReadOnly"
        }
    ],
    reports: [
        {
            "id": "<report ID>"
        }
    ],
    identities: [
        {
            username: currentUserEmail,
            roles: ["<PBI Role Name>"], // If using RLS
            datasets: ["<dataset ID>"]
        }
    ]
};

Result mapping: The following response is received. Select App Variables as Data Source, and type in "token" for the property mapping og the Embed Token app variable.
```
{
"token": "H4sIAAAAAAAEAMtIzcnJVyjPL8pJUeJUeJRxAgCCzQNLFAAAAA==",
"tokenId": "46f04cfb-5c66-4e12-8d4e-0bc3498b9733",
"expiration": "2025-07-09T12:36:00.123Z"
}
```

Part 5: Embed Visual in Appfarm App using Coded Component

1. Configure Coded Component

Add a Coded Component (UI Component) to your View
In the Coded Component, go to the right-hand pane.

2. Add Resource Property (Resources -> click `+`)

Name: PBI (or any other descriptive name).
Type: Script URL.
Script URL: https://cdn.jsdelivr.net/npm/[email protected]/dist/powerbi.min.js.

3. Add Data Property (Data -> click `+`)

Name: embedToken (If you use a different name, update the JavaScript accordingly).
Value Type: Value.
Value: Set this to the Appfarm variable that holds your embed token value (App Variables.Embed Token).

4. Copy and Paste HTML Code

Add the following HTML code to the HTML Content section of your coded component. You can adjust the style settings as needed:
```
<body>
    <div id="embedContainer" style="height: 600px; width: 100%;"></div>
</body>
```

5. Copy and Paste JavaScript Code

Add the following JavaScript code to the Script section of your coded component.

Remember to update the values of the variables embedUrl and embedReportId:

//Script:

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
let models = window['powerbi-client'].models;

function embedPowerBIReport() {
    let accessToken = appfarm.data.embedToken.get(); //CHANGE THIS IF YOU RENAME THE EMBED TOKEN DATA INPUT
    let embedUrl = "https://app.powerbi.com/reportEmbed?reportId=<Report ID>&groupId=<group/workspace ID>"; //CHANGE EMBED URL
    let embedReportId = "<Report ID>"; //CHANGE REPORT ID

    let permissions = models.Permissions.Read; //CHANGE PERMISSIONS IF USER NEED OTHER RIGHTS. THESE INCLUDES READ, READWRITE, COPY, CREATE, ALL.
    let tokenType = models.TokenType.Embed;

    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
            bars: {
                statusBar: {
                    visible: true
                }
            }
        }
    };

    let embedContainer = document.getElementById('embedContainer');

    let report = powerbi.embed(embedContainer, config);

    report.off("loaded");
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    report.off("error");
    report.on("error", function (event) {
        console.log(event.detail);
    });

    report.off("rendered");
    report.on("rendered", function () {
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();

PreviousSynchronizing Microsoft Entra ID Roles to Appfarm Create NextWorkflow automation

Last updated 20 days ago

Was this helpful?