custom filter in the new Platform Analytics dashboard

Hirokazu Dekiok
Kilo Guru

In the old Performance Analytics dashboard, I used a custom filter like the one in the following URL:


https://docs.servicenow.com/bundle/xanadu-now-intelligence/page/use/dashboards/reference/r_CustomPub... 


Is there a way to create a similar custom filter in the new Platform Analytics dashboard?

I have looked into "https://docs.servicenow.com/" and other sites, but have not been able to find a working solution, so I would appreciate your help.

2 ACCEPTED SOLUTIONS

jeffrubinoff
ServiceNow Employee
ServiceNow Employee

I don't think there is a general case, but here is an example from Knowledge 2025 of creating a custom filter: https://servicenow-events-or-lab-guidebo.gitbook.io/knowledge-2025/ccl1260-k25/exercise-5-show-only-...

View solution in original post

Hirokazu Dekiok
Kilo Guru

How to Implement a Custom Filter in ServiceNow UI Builder

I figured this out on my own, so I'm sharing the solution here in case it helps others.
This implementation allows you to apply filters based on the value selected in a dropdown.
Please note that the dropdown options need to be manually configured as desired.

 


🛠️ Implementation Steps

 

1. Place a custom filter component

In this case, I used a Dropdown component.

 

2. Create the following client state parameters

  • parFilters (JSON)
  • encodedQueries (JSON)
  • textFilterPresence (String)
  • shortDescription (String)

 

3. Create a client script

Script name: filter with encoded query

Use the following code:

 

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    // Set icon based on text filter presence
    api.setState("textFilterPresence", api.state.shortDescription ? 'presence-available-outline' : null);

    const mergePARFiltersV2 = imports"global.mergePARFilters".v2;

    const appliedFilters = [{
        order: 0,
        filterId: "",
        type: "query",
        label: "Short Description",
        apply_to: ["[YOUR_TABLE_NAME]"], // Replace with the table(s) you want to filter
        encoded_query: api.state.shortDescription ? `${api.state.shortDescription}` : null,
        extraValues: {},
        include_unmatched_or_empty: false
    }];

    api.setState("parFilters", ({ currentValue, api }) => {
        const { parFilters, encodedQueries } = mergePARFiltersV2(currentValue, appliedFilters);
        api.setState("encodedQueries", encodedQueries);
        return parFilters;
    });
}

 

4. Configure events on the dropdown component

  • On “Selected item changed”: store the value into shortDescription
  • Also trigger the filter with encoded query script

 


 

If any part of this explanation is unclear or if you need help adapting it to your specific use case, please feel free to ask!

View solution in original post

9 REPLIES 9

joaogracior
Tera Contributor

Have the same problem, need a custom filter and no information about it. Please provide some information about creating custom filters like typeahead search that is going to search in multiple fields

jeffrubinoff
ServiceNow Employee
ServiceNow Employee

I don't think there is a general case, but here is an example from Knowledge 2025 of creating a custom filter: https://servicenow-events-or-lab-guidebo.gitbook.io/knowledge-2025/ccl1260-k25/exercise-5-show-only-...

Hirokazu Dekiok
Kilo Guru

How to Implement a Custom Filter in ServiceNow UI Builder

I figured this out on my own, so I'm sharing the solution here in case it helps others.
This implementation allows you to apply filters based on the value selected in a dropdown.
Please note that the dropdown options need to be manually configured as desired.

 


🛠️ Implementation Steps

 

1. Place a custom filter component

In this case, I used a Dropdown component.

 

2. Create the following client state parameters

  • parFilters (JSON)
  • encodedQueries (JSON)
  • textFilterPresence (String)
  • shortDescription (String)

 

3. Create a client script

Script name: filter with encoded query

Use the following code:

 

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    // Set icon based on text filter presence
    api.setState("textFilterPresence", api.state.shortDescription ? 'presence-available-outline' : null);

    const mergePARFiltersV2 = imports"global.mergePARFilters".v2;

    const appliedFilters = [{
        order: 0,
        filterId: "",
        type: "query",
        label: "Short Description",
        apply_to: ["[YOUR_TABLE_NAME]"], // Replace with the table(s) you want to filter
        encoded_query: api.state.shortDescription ? `${api.state.shortDescription}` : null,
        extraValues: {},
        include_unmatched_or_empty: false
    }];

    api.setState("parFilters", ({ currentValue, api }) => {
        const { parFilters, encodedQueries } = mergePARFiltersV2(currentValue, appliedFilters);
        api.setState("encodedQueries", encodedQueries);
        return parFilters;
    });
}

 

4. Configure events on the dropdown component

  • On “Selected item changed”: store the value into shortDescription
  • Also trigger the filter with encoded query script

 


 

If any part of this explanation is unclear or if you need help adapting it to your specific use case, please feel free to ask!

Hi @Hirokazu Dekiok , 
So the 

 encoded_query: api.state.shortDescription ? `${api.state.shortDescription}` : null,

is where the fields that are going to be searchable are going go appear?  I want the filter to be like , uid  or username or email  is this possible?

In this case, when setting up the drop-down form, you can set the id column from the list item to list "[your desired field name]LIKE[Value to search for]" and when you select it from the drop-down, the filter will be applied based on that value.

However, the functionality you want can be achieved using the UI Builder's normal filter settings, not the custom filters described in this topic.
Please refer to the following URL.

https://developer.servicenow.com/dev.do#!/reference/next-experience/yokohama/now-components/sn-compo...