How to Scope an OOB Filter to Specific Data Visualizations in a UI Builder Dashboard Tab

[QuangHuyB]

I’m creating a dashboard in ServiceNow UI Builder because the dashboard contains multiple tabs, some of which require custom filters, such as a keyword search input. I also need to use OOB filters that are normally available in the inline dashboard editor.

However, in UI Builder, the OOB Filter component does not work as a simple drag-and-drop filter like it does in the inline editor. To apply the filter to data visualizations, I need to create a client script and map it to the filter event handler, as described in 
Configure an event handler for a Filter component • Australia Platform Analytics • Docs | ServiceNow

The issue is that the filter is being applied to all data visualizations using the same data source table, regardless of which dashboard tab they are on.

For example:

• Tab 1 contains Filter 1 and several Incident data visualizations.
• Tab 2 also contains Incident data visualizations.
• When I select a value in Filter 1 on Tab 1, the Incident visualizations on Tab 1 are updated as expected, but the Incident visualizations on Tab 2 are also affected.

Has anyone encountered this behavior before? Is there a way to scope an OOB Filter component so that it only applies to:

1. Data visualizations within the same dashboard tab, or
2. Specific individual data visualizations?

I’m looking for a way to prevent the filter from affecting other visualizations that use the same data source table elsewhere in the dashboard.

[avelinoinguane]

Hi @QuangHuyB,

What you're seeing is how the documented Filter event handler works. The client script in "Configure an event handler for a Filter component" publishes the filter to the page, and every Data Visualization that follows filters on that table picks it up. The docs say a single Filter can apply to multiple Data Visualizations or Lists, so a tab boundary won't contain it. Tabs in UI Builder are only a layout container.

To scope the filter to one tab or to specific visualizations, don't rely on the page-wide follow behavior. Pass the filter into each visualization yourself:

1. Create a client state parameter for each scope, for example tab1Filters. Give it an empty array as its initial value.
2. In the Filter component's event handler client script, write the selected filter into that state parameter. Don't publish it page-wide.
3. On each Data Visualization that should react (Tab 1 only, or the specific ones you choose), bind its filter property to that state parameter. KB1156652, "UI Builder - Setting up dynamic filters on a data visualization using mergePARFilters", walks through the parFilters / mergePARFilters pattern for this.
4. Leave the Tab 2 visualizations unbound, or bind them to their own state parameter, so Filter 1 can't reach them.

Nico D asked the same thing in the Developer forum for 6 donuts with 6 separate filters: "Use the filter component to filter one singular Data Visualization widget in workspace | UI Builder". The accepted answer points to the same KB.

Before you rebuild, check whether the Tab 2 visualizations have a setting to stop following page filters in your release. If they do, that's the smallest fix. If they don't, the state-parameter binding above gives you full control per visualization.

Hope this gets you unblocked.

[QuangHuyB]

Hi avelinoinguane, thanks for your reply. ServiceNow Support has provided me with a solution. Feel free to take a look as well.

[QuangHuyB · Accepted solution]

After raising a case with SNOW Support, I finally found the solution for this topic.

To make each Data Visualization follow its specific filter, you need to configure it to consume the correct tab-specific filter state instead of the default shared state, parFilters.

Here are the steps:

1. Configure the Filter component and tab-specific states

Follow the steps in the ServiceNow documentation to configure an event handler for a Filter component:

Configure an event handler for a Filter component • Brazil Platform Analytics • ServiceNow Docs

Make sure you create different state names for each tab. For example:

• parFilters_Tab1
• parFilters_Tab2
• encodedQueries_Tab1
• encodedQueries_Tab2

You should also create separate Client Scripts for each tab to update the corresponding states. For example:

• Apply PAR Filters - Tab 1
• Apply PAR Filters - Tab 2

2. Update the Data Visualization state binding in the Page Definition

This is the critical part.

Open the Page Definition record from UI Builder:

1. Go to the Settings tab at the top, next to the Editor tab.
2. Select Open records > Page definition.
   
3. In the Page Definition record, locate the Composition field.
4. In the Composition JSON, find each Data Visualization and Filter component by searching for its Component ID or Component label.
5. In the block containing the corresponding elementId, scroll down and locate the filterConfigurations attribute.
6. Update the address value so that it points to the appropriate parFilters state for that tab.

For example, for Tab 1:

"filterConfigurations": {

  "binding": {

    "address": [

      "parFilters_Tab1"

    ]

  },

  "type": "STATE_BINDING"

}

Repeat this for the remaining Data Visualization and Filter components, making sure each component is bound to the correct tab-specific state, such as parFilters_Tab1, parFilters_Tab2, and so on.

Once all components have been updated, save the Page Definition, return to the dashboard, and test the filters. Each tab's Data Visualizations should now respond only to the filter state configured for that tab instead of the shared parFilters state.