Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Calling all Data Engineers! Fabric Data Engineer (Exam DP-700) live sessions are back! Starting October 16th. Sign up.

Reply
lucmax
Helper II
Helper II

Apply JSON Filter to own custom visual

Hey,

 

I'm trying to build a new version of our custom visual because I saw other custom visuals (apparently) applying json filters to themself. How can I achive this behaviour and apply a json filter (advanced filter api) to the visual itself which created the filter?

 

regards,

lucmax

1 ACCEPTED SOLUTION
lucmax
Helper II
Helper II

With help of a fellow forum member I got it to work the way I want. You need to do the following to have your visual filter itself AND others visuals:

 

capabilities.json (general)

 

            "properties": {
                "filter": {
                    "type": {
                        "filter": true
                    }
                },
                "selfFilter": {
                    "type": {
                       "filter": {
                          "selfFilter": true
                       }
                    }
                 }
            }

 

ApplyJsonFilter call(s)

    this._visualHost.applyJsonFilter(
      filterList,
      "general",
      "selfFilter",
      powerbi.FilterAction.merge
    );
    this._visualHost.applyJsonFilter(
      filterList,
      "general",
      "filter",
      powerbi.FilterAction.merge
    );

 

Hope this helps someone else!

View solution in original post

3 REPLIES 3
lucmax
Helper II
Helper II

With help of a fellow forum member I got it to work the way I want. You need to do the following to have your visual filter itself AND others visuals:

 

capabilities.json (general)

 

            "properties": {
                "filter": {
                    "type": {
                        "filter": true
                    }
                },
                "selfFilter": {
                    "type": {
                       "filter": {
                          "selfFilter": true
                       }
                    }
                 }
            }

 

ApplyJsonFilter call(s)

    this._visualHost.applyJsonFilter(
      filterList,
      "general",
      "selfFilter",
      powerbi.FilterAction.merge
    );
    this._visualHost.applyJsonFilter(
      filterList,
      "general",
      "filter",
      powerbi.FilterAction.merge
    );

 

Hope this helps someone else!

Hi, I'm also looking for a way to filter my cutom visual and not just the other visuals.

This query seems to be the closest I can find to what I'm lookng for.

I have the capabilities setup as mentioned, but not sure how and where the applyJSONFilter call is implemented.

Can someone assist me with the steps in order to implement this or direct me to an example as to how this is done?

Hi @Charlene,

we are calling the applyJsonFilter in our visual.ts code when the user clicks our filter button. The filter list contains the filters we want to apply in a format like this:

 

{
  $schema: "http://powerbi.com/product/schema#basic",
  ...new BasicFilter(
    {
      table: tableName
      column: columnName,
    },
    "In",
    values
  ),
}

Maybe this helps.

Helpful resources

Announcements
FabCon Global Hackathon Carousel

FabCon Global Hackathon

Join the Fabric FabCon Global Hackathon—running virtually through Nov 3. Open to all skill levels. $10,000 in prizes!

October Power BI Update Carousel

Power BI Monthly Update - October 2025

Check out the October 2025 Power BI update to learn about new features.

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.

Top Solution Authors