Using Power BI embedding with slicers

Embedding Power BI reports into Power Pages (formerly Power Apps Portals) allows users to interact with rich analytics directly within the portal. One of the most powerful features of Power BI is slicers—which let users filter data dynamically. When embedding, these slicers can remain fully functional if configured correctly.

Use Cases

Customers filtering dashboards by product, region, or date
Partners selecting account-specific metrics
Employees slicing reports by department or business unit

Steps to Embed Power BI with Slicers in Power Pages

1. Prepare Your Power BI Report

Create a Power BI report with appropriate slicers (date, category, dropdowns, etc.).
Save it to a workspace backed by a Premium capacity (required for embedding in external portals).

2. Enable Slicers

Ensure slicers are added in the report and interact with the visuals:

Example: Add a Date slicer or Dropdown slicer for product categories.

3. Publish and Get Report Details

In Power BI Service:

Go to the workspace → select the report → click Embed > Website or portal.
Copy the iframe URL or generate an embed token if you’re using the JavaScript API.

4. Embed in Power Pages

Option 1: Basic Embed with IFrame

<iframe width="100%" height="800" 
  src="https://app.powerbi.com/reportEmbed?reportId=YOUR_ID&groupId=GROUP_ID&autoAuth=true&ctid=TENANT_ID"
  frameborder="0" allowFullScreen="true">
</iframe>

Slicers will work as long as the embed URL corresponds to an interactive report.

Option 2: Advanced Embed using JavaScript API Use this for more control (e.g., pre-filtering, capturing slicer changes):

<div id="reportContainer" style="height:800px;"></div>
<script src="https://cdn.powerbi.com/libs/powerbi-client/2.21.0/powerbi.min.js"></script>
<script>
  const embedConfiguration = {
    type: 'report',
    id: 'REPORT_ID',
    embedUrl: 'https://app.powerbi.com/reportEmbed?...',
    accessToken: 'EMBED_TOKEN',
    tokenType: window['powerbi-client'].models.TokenType.Embed,
    settings: {
      filterPaneEnabled: true,
      navContentPaneEnabled: true
    }
  };

  const reportContainer = document.getElementById('reportContainer');
  const report = powerbi.embed(reportContainer, embedConfiguration);

  // Optional: Programmatically interact with slicers
  report.on("loaded", function () {
    console.log("Report loaded");
  });
</script>

Advanced: Pre-Filtering with Slicers

You can pass filter values into the embedded report using JavaScript like this:

const filter = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "Sales",
    column: "Region"
  },
  operator: "In",
  values: ["West", "East"]
};

embedConfiguration.filters = [filter];

🔐 Security Tips

Use Row-Level Security (RLS) for data control.
Use Power BI Service Principal or User Owns Data models depending on access needs.
Only expose reports through authenticated web roles.