Custom Interactive Filter for ServiceNow Dashboards
Once upon a time, there used to be a type of script called Jelly script. Wait, used to be? Or is it still around? Of course, it is! It’s 2021 and I happened to have a brushing encounter with Jelly script in ServiceNow.
4 years back I thought I could conveniently forget it since Service Portal was emerging as a strong and promising frontend tool - laden with the latest JavaScript frameworks. Turns out, there are some latest features like custom interactive filters - part of dashboards and performance analytics - that still take help from Jelly.
This post is about implementing custom interactive filters that work on the same dashboard, but the reports included on the dashboard originate from different tables.
For instances where the performance analytics plugin is not installed, there is still a way to define custom filters that can be part of your dashboard. The example here explains how you can implement one, and that’s the reason I will not cover how to apply a custom filter for a single table.
The challenge is applying a custom filter for multiple reports originating from different tables. Referring to the example above, it seems that we can just duplicate the code for DashboardMessageHandler and make it work. I tried the same, but it doesn’t work well.
I faced 2 problems:
Multiple refreshes - depending on how many handlers you use based on the number of tables, every time a filter is published ALL the reports are refreshed. That is not desirable.
Irregularities - the bigger problem is that the reported data was faulty. I could not figure out why a particular result set was reported for a given query. There was no explanation.
After spending some time searching on the community and documentation, for a seemingly simple problem - I could not find a solution in a single piece. Full disclosure - I even used some dirty tricks of delayed refreshes which worked well and I was on the verge of calling out “Done!”. But dirty tricks eat you from inside.
However, I did come across a knowledge article which finally exposed some more functions on DashboardMessageHandler class that can be used to solve this problem with a lot fewer lines of code.
Let us consider a scenario to follow along. A dashboard has a list-type incident and problem report widgets. We need to provide an ability to the users to see incidents and problems assigned to a particular assignment group.
To create a custom filter, navigate to the Dynamic Content table (content_block_programmatic) and create new dynamic content. This is where you need to begin by writing some Jelly code.
Based on our requirement, the following code queries for all the group records and creates a drop-down list of all group names. This drop-down list will be used by users to apply group-specific queries on incidents and problems.
To make this filter work, we make use of DashboardMessageHandler class within the <script> tags. Let us implement the filter for incident reports only. The code would look like below.
Here, we have created an instance of DashboardMessageHandler class. 2 methods of this class which we use are:
publishFilter - used to apply the filter.
removeFilter - used to reset the filter.
publishFilter function is called whenever a user selects a different value in the filter dropdown. Group sys_id is passed to it, which is then used to formulate a query, which is then used to filter the groups.
Notice that this code only works for incident reports - since we are setting the filter message’s table attribute to the incident.
To extend this for problem reports, it is very tempting to duplicate the above code and replace incident with problem. As mentioned before, that does not work.
Instead, use the methods as used in the below code.
Here, we are still working with a single DashboardMessageHandler object for both incident and problem queries. At the same time, we can write separate queries for the incident and problem reports using the same group value from the dropdown.
The key here is the filter attribute. SNC.canvas.interactiveFilters.setDefaultValue function accepts multiple filters in the form of an array. Specifically, an array of JSON objects with table and filter properties.
Another notable difference is the publishMessage function as opposed to publishFilter in the previous code.
This works like a charm - as good as if it is native.
Hey, if you like this content and want me to write more on ServiceNow topics, do get in touch with me and I will be glad. Don’t forget to subscribe, follow and share. Psst: I am working on a bi-weekly newsletter.