Configure an event handler for a Filter component

---
title: Configure an event handler for a Filter component
description: On a technical dashboard, configure a special client script-based event handler for a Filter component so it can be followed by any Lists or Data Visualizations. It is not necessary to configure an event handler for filters on inline dashboards.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/now-intelligence/configure-event-handler-filter-lists-data-vis.html
release: brazil
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 2
breadcrumb: [Technical dashboards, Dashboards, Platform Analytics experience, Platform Analytics]
---

# Configure an event handler for a Filter component

On a technical dashboard, configure a special client script-based event handler for a Filter component so it can be followed by any Lists or Data Visualizations. It is not necessary to configure an event handler for filters on inline dashboards.

## Before you begin

This procedure assumes that the following tasks are complete:

1.  You have added the Filter component to the UI Builder page, as well as at least one Data Visualization or List component. The Filter can apply to multiple Data Visualizations or Lists.
2.  You have configured the filter to source and the data to filter, if applicable, for the Filter component. If the Filter component is supposed to filter a List, you have specified the table that the List component shows as data to filter.
3.  You have configured data sources for any Data Visualization components.
4.  You have specified a table for any List components.

Role required: ui\_builder\_admin, admin

## Procedure

1.  Open the relevant UI Builder page.

    This page may be a technical dashboard.

2.  Navigate to the UI Builder State section and add a state variable named *parFilters* of type JSON with a simple array initial value `[]`.

    For more information, see [Create and bind a client state parameter to a component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/application-development/state-parameters.md).

    \[Omitted image "add-parFilters.png"\] Alt text: Adding the parFilters client state parameter to a UIB page.

3.  Add a second JSON state variable named *encodedQueries* of type Object with initial value `{}`.

4.  Navigate to the Client Scripts section and create a custom script with a name such as "Apply PAR Filters" and the following content or a functional equivalent thereof:

    ```javascript
    function handler({ api, event, helpers, imports }) {
    	const mergePARFiltersV2 = imports["global.mergePARFilters"]().v2;
    	const { appliedFilters } = event.payload;
    	api.setState("parFilters", ({ currentValue, api }) => {
    		const { parFilters, encodedQueries } = mergePARFiltersV2(
    			currentValue,
    			appliedFilters
    		);
    		api.setState("encodedQueries", encodedQueries);
    		return parFilters;
    	});
    }
    ```

5.  In the Client Scripts section, open the **Client Script Includes** tab.

    \[Omitted image "client-script-includes.png"\] Alt text: The Client Script Includes tab of the Client Scripts pane on a UIB page.

6.  In the **Add a script include** field, select `mergePARFilters` and click **Add**.

    \[Omitted image "add-mergePARFilters.png"\] Alt text: Adding the mergePARFilters script include.

7.  Close the window for configuring data, client state, and client scripts.

8.  In the UI Builder, select the Filter component.

9.  Select the **Events** tab in the configuration panel and add the page script you have created, which in this example is Apply PAR Filters, as an event handler.

    \[Omitted image "add-apply-par-filters.png"\] Alt text: Adding the Apply PAR Filters script as the Filter applied event handler.

10. Save the page.


**Parent Topic:**[Technical dashboards](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/now-intelligence/technical-dashboards.md)