SPA URL Filtering

[gpen23]

I have an SPA, that renders properly and works as expected. I need to preset the filters in the report, when I try this with the URL it renders but the filter isn't applied. I have found many guides including Microsofts own documentation, they all explain it the same way so I'm pretty sure I'm formatting it correctly. My question is, is this even possible or does it need to be done using javascript in the app itself? I've read in the documentation this is possible for embedded reports, but I'm unsure if an SPA is considered an embedded report. Below is my URL, TIA!

https://localhost:44300/index.html?reportId=44c69566-4a28-4433-900a-2af17d7a8a80&filter=Accounts/FNa...

[gpen23]

Hi Xiaoxin,

I tried changing the embedURL value to include the filter but I get the same result. One question I do have though, how does that affect the URL I navigate to? The app.powerbi.com URL was the value for embedURL by default, but as you can see from the URL in my original post that is not required for the page to render. Do I also need to modify the URL I navigate to? Thanks!

[v-shex-msft · Accepted solution]

Hi @gpen23,

The URL filters will be applied to the embed URL. It should not affect the current web page URL usages and you do not need to change it.

If that not work on your side, I'd like to suggest you take a look at the following link about 'limitations about URL filter' and 'use URL filter on embed report' if helps:

Filter a report using query string parameters in the URL - Power BI | Microsoft Learn

Embed a report in a secure portal or website - Power BI | Microsoft Learn

Regards,

Xiaoxin Sheng

[gpen23]

I read these prior to making the post, I would not consider this a soloution.

[v-shex-msft]

Hi @gpen23,

I think these URL filters should be setting and added to the embed URL part in embedded configurations instead of directly add to your HTML page url.

For example:

//Report url
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=<report_id>&groupId=<group_id>";
//Url filter
var filter = "&$filter=<table>/<column> eq '<value>'";
var finalUrl = embedUrl + filter;

// Get the HTML element that will loading the embedded report
var reportContainer = document.getElementById("reportContainer");

// Embed the report with Power BI JavaScript API
var report = powerbi.embed(reportContainer, {
    type: "report",
    embedUrl: finalUrl,
    tokenType: models.TokenType.Aad,
    accessToken: "<access_token>",
    settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: true
    }
});

Power BI embedded analytics Client APIs
Regards,

Xiaoxin Sheng