---
sourceDocument: Brazil Platform Analytics
sourceDocumentLink: https://www.servicenow.com/docs/r/now-intelligence

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Platform Analytics

ft:clusterId :

    - par

bundleId :

    - par

workflow :

    - Platform


---

# Configure filter event handlers

# Configure an event handler for a Filter component {#ariaid-title1}

Release version: Brazil  
Updated September 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read  
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.
{#configure-event-handler-filter-lists-data-vis__ol_yr2_sjr_h4b}

Role required: ui_builder_admin, admin

## Procedure

1. Open the relevant UI Builder page.  
   This page may be a technical dashboard. {#configure-event-handler-filter-lists-data-vis__open-uib-page}
{#configure-event-handler-filter-lists-data-vis__open-uib-page}
2. Navigate to the UI Builder State section and add a state variable named <var class="keyword varname">parFilters</var> of type JSON with a simple array initial value `[]`.  
   For more information, see [Create and bind a client state parameter to a component](https://www.servicenow.com/docs/access?context=state-parameters&version=brazil&pubname=brazil-application-development&ft:locale=en-US).  

   {#configure-event-handler-filter-lists-data-vis__nav-state-section}
{#configure-event-handler-filter-lists-data-vis__nav-state-section}
3. Add a second JSON state variable named <var class="keyword varname">encodedQueries</var> of type Object with initial value `{}`. {#configure-event-handler-filter-lists-data-vis__add-second-state-var}
{#configure-event-handler-filter-lists-data-vis__add-second-state-var}
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:  

       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;
       	});
       }

   {#configure-event-handler-filter-lists-data-vis__nav-client-script}
{#configure-event-handler-filter-lists-data-vis__nav-client-script}
5. In the Client Scripts section, open the Client Script Includes tab.  

   <br />

   {#configure-event-handler-filter-lists-data-vis__open-client-script-includes}
{#configure-event-handler-filter-lists-data-vis__open-client-script-includes}
6. In the Add a script include field, select <kbd class="ph userinput">mergePARFilters</kbd> and click Add.  

   <br />

   {#configure-event-handler-filter-lists-data-vis__script-include-merge-par-filters}
{#configure-event-handler-filter-lists-data-vis__script-include-merge-par-filters}
7. Close the window for configuring data, client state, and client scripts. {#configure-event-handler-filter-lists-data-vis__close-windows}
{#configure-event-handler-filter-lists-data-vis__close-windows}
8. In the UI Builder, select the Filter component. {#configure-event-handler-filter-lists-data-vis__select-filter-comp-01}
{#configure-event-handler-filter-lists-data-vis__select-filter-comp-01}
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.  

   <br />

   {#configure-event-handler-filter-lists-data-vis__step_jdd_bx4_q1c}
{#configure-event-handler-filter-lists-data-vis__step_jdd_bx4_q1c}
10. Save the page.