- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-04-2024 02:13 AM
In the old Performance Analytics dashboard, I used a custom filter like the one in the following URL:
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.
Solved! Go to Solution.
- 1,623 Views
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-23-2025 09:27 AM
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-...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-23-2025 06:24 PM
✅ 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!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-23-2025 01:20 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-23-2025 09:27 AM
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-...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-23-2025 06:24 PM
✅ 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!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-24-2025 01:49 AM
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?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
07-24-2025 05:25 PM
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.