Power BI tile integration

Power BI tile integration is a powerful way to embed rich, interactive visualizations directly into your web applications or Power Pages (formerly Power Apps Portals). By embedding Power BI tiles (individual visuals from dashboards), you give users immediate access to insights without needing to leave your platform.

In this guide, we’ll walk through the step-by-step process of integrating Power BI tiles into web apps or portals, and cover security, customization, and performance best practices.

---

Step 1: Understand What a Power BI Tile Is

A Power BI tile is an individual visual (chart, graph, KPI, etc.) pinned to a dashboard in the Power BI Service. You can embed these tiles directly into other apps, bypassing the need for the full report.

Tiles are great when:

• You want to show a specific KPI or visual.
• You don’t need the full interactivity of a Power BI report.
• You’re integrating insights in dashboards, admin panels, or user portals.

---

Step 2: Prepare the Tile in Power BI Service

1. Create or identify the dashboard tile:
   • Log in to Power BI Service.
   • Open your report and pin a visual to a dashboard (or use an existing dashboard).
   • Locate the dashboard containing the tile you want to embed.
2. Note the workspace and dashboard names, and confirm the tile exists.

---

Step 3: Register Your App in Azure AD (Required for Authentication)

To securely embed Power BI tiles, your app needs to be Azure Active Directory (Azure AD) registered.

1. Go to Azure Portal.
2. Navigate to Azure Active Directory > App registrations > New registration.
3. Enter:
   • Name: Power BI Integration App
   • Supported account types: Single-tenant or Multi-tenant (based on your scenario)
   • Redirect URI: (Add if needed for OAuth)
4. After creation, note:
   • Application (client) ID
   • Directory (tenant) ID
5. Under Certificates & Secrets, generate a Client Secret.
6. Under API Permissions, click Add a permission > APIs my organization uses > Power BI Service:
   • Add Dashboard.Read.All
   • Add Dataset.Read.All
   • Click Grant admin consent.

---

Step 4: Get the Tile Embed Details via Power BI REST API

To embed a tile, you’ll need:

• Access token
• Tile Embed URL
• Tile ID

Use the Power BI REST API to get this info:

1. Get Access Token (from Azure AD using client ID, secret, and tenant).
2. Call API to get tiles from a dashboard: GET https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards/{dashboardId}/tiles This returns all tiles. From the response, extract:
   • embedUrl
   • id (Tile ID)
   • title

---

Step 5: Embed the Tile into a Web Page or Portal

You can now embed the tile using an <iframe> or the Power BI JavaScript SDK.

Option 1: Iframe Embed (Simple)

<iframe 
  width="800" 
  height="400" 
  src="https://app.powerbi.com/dashboardEmbed?dashboardId=XXXXX&tileId=XXXXX&groupId=XXXXX" 
  frameborder="0" 
  allowFullScreen="true">
</iframe>

Use this if:

• Your user is already logged into Power BI
• You don’t need row-level security or token-based authentication

Option 2: Use Power BI JavaScript SDK (Secure + Dynamic)

Include SDK:

<script src="https://cdn.jsdelivr.net/npm/powerbi-client/dist/powerbi.js"></script>

Embed dynamically:

<div id="powerbi-tile" style="height:400px;width:800px;"></div>

<script>
  var models = window['powerbi-client'].models;

  var embedConfiguration = {
      type: 'tile',
      tokenType: models.TokenType.Embed,
      accessToken: 'YOUR_ACCESS_TOKEN',
      embedUrl: 'https://app.powerbi.com/embed?dashboardId=xxx&tileId=xxx&groupId=xxx',
      id: 'TILE_ID',
      dashboardId: 'DASHBOARD_ID',
      groupId: 'GROUP_ID',
      settings: {
          filterPaneEnabled: false,
          navContentPaneEnabled: false
      }
  };

  var tileContainer = document.getElementById('powerbi-tile');
  powerbi.embed(tileContainer, embedConfiguration);
</script>

---

Step 6: Handle Security

You must ensure:

• Access tokens are generated server-side
• Tokens are short-lived (hourly recommended)
• Only authenticated users can view embedded tiles

Implement server-side logic in Node.js, .NET, or Python to:

1. Authenticate with Azure AD
2. Generate embed tokens via Power BI REST API
3. Pass token securely to the frontend

---

Step 7: Customize Behavior

You can control:

• Tile dimensions
• Interactivity
• Navigation and filters

Advanced:

• Use row-level security to tailor what users see
• Display multiple tiles as dashboards
• Set up tile refresh intervals via API

---

Use Case Examples

1. Internal Admin Portals: Show KPIs, usage stats, or ticket status in a dashboard for logged-in staff.
2. Customer Dashboards: Personalized views of user metrics based on Dataverse or external CRM data.
3. Executive Dashboards: Embed strategic KPIs directly into intranet portals or SharePoint sites.

---

Best Practices

• Use service principals for headless embedding scenarios.
• Cache embed tokens if appropriate to reduce API calls.
• Test tile responsiveness across devices (Power BI visuals are responsive).
• Control user access by applying tenant or row-level security (RLS).
• Keep embed tokens short-lived and secure.