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

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia 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: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes 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=australia&pubname=australia-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 our 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. In the UI Builder, select a Record List component, if one exists. {#configure-event-handler-filter-lists-data-vis__select-list-comp-01}
{#configure-event-handler-filter-lists-data-vis__select-list-comp-01}
11. Open the Presentational List subcomponent of the Record List in the configuration panel.
12. In the Data section, select Edit fixed filter and set this property \[fixedQuery\] as the dynamic binding expression `@state.encodedQueries.<list-datasource>`.  
    Replace \<list-datasource\> with the data source for the List component. For example, if your List shows records from the Incident \[incident\] table, enter `@state.encodedQueries.incident`.  

    {#configure-event-handler-filter-lists-data-vis__edit-fixed-filter-fixed-query}
{#configure-event-handler-filter-lists-data-vis__edit-fixed-filter-fixed-query}
13. Repeat the previous two steps for any other List components. {#configure-event-handler-filter-lists-data-vis__repeat-as-necessary-list}
{#configure-event-handler-filter-lists-data-vis__repeat-as-necessary-list}
14. Save the page.