Trying to update a power bi embedded visual filter

[Anonymous]

I am trying to update filters on single visuals that are embedded, but I can't seem to make it work.

I embed my visuals like this:

let embedConfiguration = {
                        accessToken: "@ViewBag.Token",
                        embedUrl: "@ViewBag.EmbedUrl",
                        id: "@ViewBag.Id",
                        pageName: pageName,
                        tokenType: 1,
                        type: 'visual',
                        visualName: visualName
                    };
                     
                    // Get a reference to the HTML element that contains the embedded report.
                    let embedContainer = $('#'+embedContainerName)[0];
                    let visual = powerbi.embed(embedContainer, embedConfiguration);
}

and this is working fine, I get my visuals up how I want them, but when I try to update the filters of them nothing happens. I have tried numerous ways from the powerbi embedded sandbox and microsoft.learn.

If I want to update the filters, shouldnt it be as easy as to do following?: 

const filter = {
                    $schema: "http://powerbi.com/product/schema#basic",
                    target: {
                        table: "Personskader",
                        column: "Disiplin"
                    },
                    operator: "In",
                    values: ["Insulation"]
                };
                
                // Add the filter to the report's filters.
                try {
                    
                    await visual.updateFilters(models.FiltersOperations.Add, [filter], models.FiltersLevel.visual);
                    console.log("Report filter was added.");
                }
                catch (errors) {
                    console.log(errors);
                }

I tried adding the above code underneath the powerbi.embed(embedContainer, embedConfiguration);

Is there a way to get the single embedded visual?

If I try:

let visual = document.getElementById("embedContainer");
visual.updateFilters..... 

 It won't find the function updateFilters. 

Any help would be greatly appreciated.

[v-rzhou-msft · Accepted solution]

Hi @Anonymous ,

We can Apply Visual level filters to every Visual. You can use updateFilters to set new filter to the Visual our Update the filters.
Simply add this piece of code On the js for embedding in the display each Visual section or you use the variable visualName and apply filters later to the visual.

await visualName.updateFilters(models.FiltersOperations.Replace, filtersArray);

For reference: Visual level filters

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.