topic Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis in Developer

Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Visuals

Hugo_Gallardo — Wed, 28 Jul 2021 17:41:58 GMT

We are facing the following problems using more than one filter in our development.

We are using ASP.net core 3.0, Razor and Bootstrap 4.

Scenario:

We have extracted every single visual from a Power BI report. In this report we have a slider for selecting the interval of weeks between 1 and 52 which alters every visual in the report, then the year or years selection filter. Also we have selectors for family of product and then other for product itself. Then we can select from another selector the clients that sells those products. And also, we have geographic filters for map view which also affects the visuals Each selections refreshes in real time the whole dashboard. We need to reproduce these actions on the embedded final product.

The client requires to embed every single visual In a web app. They don’t want to embed the full report because they want a very specific UI/UX, that’s why they don’t want to embed all.

From point one we have the following problems:

First we have the slider filter and then the Anio (Anio year which is different from Calendar year and it’s calculated within the PowerBI). The second filter will be executed by a button as a Basic PBI Filter.

In the first image we have the value 2020 and 2021 on the filter, then on Image 2 we have executed the filter code, and instead of changing from 2021 to 2020 the whole views, it duplicates the value on the drop down filter as 2021 and 2021 only without effect on any visual other than the slider filter.
We need to show the selection instead of duplicating values on the selector, affecting the visuals or visual.
We have both filters on separated functions within our Javascript.

As I told you in our scenario, we need to apply “n” filters within the web page, as the user is selecting them, preferent without an action button. We only have examples using separated functions for every filter, how do we manage to catch every filter by selection?. Do we need to use a single function? Can the y be casted separately by section?
Do you have examples for PBI Embedded for the use of 2 to “n” filters within a web page?
We need also that each time we select a filter it stores the other filters selection, because when is applied separately, deletes the previous filter.
How do we apply “n” filters in the on load function of the web page

Here is the code for the Anio filter:

function filter1() {

const filter1 = {

$schema: "http://powerbi.com/product/schema#basic",

target: {

table: "tCalendarioNestleN",

column: "Anio"

operator: "In",

values: [2020]

};

var embedContainerPortafolio = $('#embedContainerValueVolume')[0];

var reportPortafolio = powerbi.get(embedContainerPortafolio);

reportPortafolio.setFilters([filter1])

}

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Anonymous — Mon, 02 Aug 2021 02:07:11 GMT

Hi @Hugo_Gallardo,

It sounds like you want to use multiple filters to your report based on setfilters function.
After I check the documents, I found its parameter is a filter array, so I think you can create an array to store multiple filters that you can define and can use it in filter parameter to use in setfilters:

Use filters when embedding a report in Power BI embedded analytics | Microsoft Docs

Regards,

Xiaoxin Sheng

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Fri, 06 Aug 2021 07:45:02 GMT

Hi, let me show you our use case:

We are embedding different visuals on one razor page, and we are also using javascript API on a asp.net core razor page.

This is the webapp, we have a slider and a selector (the selector is not showed cause the value is setted up on the “aplicar filtro” button.

We need to use “N” tables on one action so we can do the parametrics on every visual.

The function is the following:

function filter1() {

var a = $("#In1").val();

var b = $("#In2").val();

const filter1 = [{

$schema: http://powerbi.com/product/schema#basic,

target: {

table: "tCalendarioNestleN", //this is the first table we call with the slider, this actually is the only one that works and when is selected, it actually affects every visual on the screen. But this is not the only table we call. This is the first filter we send and works.

column: "SemanaNestle"

logicalOperator: "And",

conditions: [

{

operator: "GreaterThanOrEqual",

value: a

{

operator: "LessThanOrEqual",

value: b

}

]

{

$schema: http://powerbi.com/product/schema#basic,

target: {

table: "tProductos", // this is the second table we call, the column should affect as well the whole screen. We can actually affect a lot of tables within power BI but when we embed every visual we can’t get the same effect. We found this code on your database.

column: "cveCategoria"

logicalOperator : "In",

conditions:[{value : "SP"}] // this is the value setted up, we will have checkboxes for the user to select N values in an array which will be values “SP”, “MG”, etc and the user can see N table filters affecting that

}

]

var embedContainerC = $('#ChartFR')[0];

var reportC= powerbi.get(embedContainerC);

reportC.setFilters([filter1])

}

For now, we have two buttons affecting the dashboard separately and it works but we need that the user can select n values that affects table columns and does shows up in the webapp.

These are both filters working out in separate calls but we need to do every filter on every table in just one call:

function filter1() {

var a = $("#In1").val();

var b = $("#In2").val();

const filter1 = {

$schema: http://powerbi.com/product/schema#basic,

target: {

table: "tCalendarioNestleN",

column: "SemanaNestle"

logicalOperator: "And",

conditions: [

{

operator: "GreaterThanOrEqual",

value: a

{

operator: "LessThanOrEqual",

value: b

}

]

};

var embedContainerC = $('#ChartFR')[0];

var reportC= powerbi.get(embedContainerC);

reportC.setFilters([filter1])

}

function filter2() {

const filter2 = {

$schema: http://powerbi.com/product/schema#basic,

target: {

table: "tProductos",

column: "cveCategoria"

operator: "In",

values: ["SP"]

};

var embedContainerPortafolio = $('#ChartFR')[0];

var reportPortafolio = powerbi.get(embedContainerPortafolio);

reportPortafolio.setFilters([filter2])

}

We can call separate filters but we need them altogether.

We saw in your forum that this can’t be done but we don’t believe that’s accurate.

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Anonymous — Tue, 10 Aug 2021 07:58:24 GMT

HI @Hugo_Gallardo,

I found you define multiple functions with filter structures to apply filters effect to your report, so I recommend you to transform them into one const variable and use it to set/update filters.

Power BI Playground - Developer Sandbox

Regards,

Xiaoxin Sheng

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Sat, 14 Aug 2021 08:53:06 GMT

I get the following error

powerbi.min.js:4 Uncaught TypeError: Cannot read property 'powerBiEmbed' of undefined
at t.get (powerbi.min.js:4)
at ReplaceFilters1 (SellOut:2339)
at HTMLButtonElement.onclick (SellOut:1)
t.get @ powerbi.min.js:4
ReplaceFilters1 @ SellOut:2339
onclick @ SellOut:1

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Sat, 14 Aug 2021 09:20:36 GMT

FUNCTION }

var reportPortafolio = powerbi.get(embedContainerPortafolio); // Replace all report's filters.

try { reportPortafolio.updateFilters(models.FiltersOperations.ReplaceAll, [filterList]); } catch (errors) { console.log(errors); }
}

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Anonymous — Thu, 19 Aug 2021 08:07:22 GMT

Hi @Hugo_Gallardo,

If you modify the code to use setFilters function instead of the updateFitlers, did this issue still appears?

// Replace all report's filters. try { reportPortafolio.setFilters([filterList]); } catch (errors) { console.log(errors); }

Regards,

Xiaoxin Sheng

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Thu, 19 Aug 2021 09:02:08 GMT

I am not using embedContainerPortafolio because I am using every visual embbed.

My actual function is

function ReplaceFilters() {
var a = $("#In1").val();
var b = $("#In2").val();
const filterList = [
{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tCalendarioNestleN",
column: "SemanaNestle"
},
logicalOperator: "And",
conditions: [
{
operator: "GreaterThanOrEqual",
value: a
},
{
operator: "LessThanOrEqual",
value: b
}]
},
{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tProductos",
column: "cveCategoria"
},
operator: "In", values: ["SP"]
}];
var GraficoUno = $('#TendenciaSOut')[0];
var reportVisual = powerbi.get(GraficoUno);
try { reportVisual.setFilters(models.FiltersOperations.ReplaceAll.FiltersOperations.ReplaceAll, [filterList]); }
catch (errors) { console.log(errors); }
}

Do I just make an embedded zone as Portfolio? can you show me the link to that?

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Thu, 19 Aug 2021 10:07:51 GMT

powerbi.min.js:4 Uncaught (in promise) [{…}]0: {message: "input must be an object"}length: 1[[Prototype]]: Array(0)
l @ powerbi.min.js:4
Promise.then (async)
s @ powerbi.min.js:4
(anonymous) @ powerbi.min.js:4
o @ powerbi.min.js:4
e.setFilters @ powerbi.min.js:4
ReplaceFilters @ SellOut:2430
onclick @ SellOut:669

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Thu, 19 Aug 2021 11:08:13 GMT

SellOut:599 Uncaught ReferenceError: filter1 is not defined
at HTMLButtonElement.onclic

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Sat, 21 Aug 2021 07:57:51 GMT

Ok last update, we changed the code as follows but only does the last filter, but it shows us the kind of json it expects in the following image. Do we need to change the json?

const filterList = ([{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tCalendarioNestleN",
column: "SemanaNestle"
}
logicalOperator: "And",
conditions: [{
operator: "GreaterThanOrEqual",
value: 1
}, {
operator: "LessThanOrEqual",
value: 5
}]
},
{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tProductos",
column: "cveCategoria"
},
operator: "In",
values: ["PURINA"]
}]);

var embedContainerPortafolio = $('#TendenciaSOut')[0];
var reportPortafolio = powerbi.get(embedContainerPortafolio); // Replace all report's filters.

try {
reportPortafolio.setFilters([filterList]);
} catch (errors) {
console.log(errors);
}
/* catch (errors) { console.log(errors); }*/

Re: Power BI Embedded: Problem using more than one filter on the same Embedded exporting all the Vis

Hugo_Gallardo — Sat, 21 Aug 2021 08:25:46 GMT

Hi, we solved it it was the [] characters when sending the filter.

I attach the solution!! Thanks!

function ReplaceFilters() {
//var a = $("#In1").val();
//var b = $("#In2").val();
const filterList = [{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tCalendarioNestleN",
column: "SemanaNestle"
},
logicalOperator: "And",
conditions: [{
operator: "GreaterThanOrEqual",
value: 1
}, {
operator: "LessThanOrEqual",
value: 5
}]
},
{
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tProductos",
column: "cveCategoria"
},
operator: "In",
values: ["PURINA"]
}];

var embedContainerPortafolio = $('#TendenciaSOut')[0];
var reportPortafolio = powerbi.get(embedContainerPortafolio); // Replace all report's filters.

try {
reportPortafolio.setFilters( filterList);
// reportPortafolio.setFilters([filterList]); this was the one you sent us.
} catch (errors) {
console.log(errors);
}
/* catch (errors) { console.log(errors); }*/
}