Bind client state parm into filter of a multi data source VIZ OOB, to render a timeseries-UI Builder

Sharique Azim · 3 hours ago

I’m building a dynamic cost‑visualization dashboard in UI Builder that lets stakeholders:

Select a manager from the UI (Type ahead sets a client state param).
As they choose, the dashboard shows that manager’s users’ cost against the total cost of all users.

The data comes from the custom table u_sw_license_user_alloc_archive, which has fields like:

u_reporting_date (date)
u_cost (number)
u_allocation_status (string)
u_licensed_by (reference to asset)
u_user (reference to user)

The configuration that works for me:

I am able to generate the same timeseries area chart if i chose the table with fixed query data sources .

The second data source has a fixed filter query that returns an array of sys id from a script include , where I am passing the sys id of the user [which is static and hardcoded at this point]

//filters like
user.sys_id >IN > javascript&colon; new CustSwLicClientUtils().NestedSysIds('29c3b4378b8010207243fddc4bcbb4')

//this is a client callable  script include that returns values properly and correctly✅

My config so far

In the filter of the second data source

As you can see below that there is no option to bind 🛢️ the client state directly in the filter of the data source of the visualization component. ❌

However, the chart looks like this which is perfect ✅

The thing that I am trying to achieve is convert the static fixed query to dynamic.

To achieve this, I’ve defined a multi source viz data resource with two visualizationIds

🔗- ServiceNow Docs-Local data instances for multiple visualizations :

vis_active_trend → SUM of u_cost over u_reporting_date with no filter query (single line) trend by reporting date.
vis_inactive_trend_by_licensed_by → SUM of u_cost over u_reporting_date where i want call a script include i.e. as mentioned above , grouped by u_licensed_by (multiple lines). Similar to my already generated chart.

Here’s the JSON I was able to generate so far:

[
  {
    "details": {
      "visualizationId": "vis_active_trend",
      "followFilter": true
    },
    "configurations": {
      "dataConfigurations": [
        {
          "sourceType": "table",
          "dataCategory": "trend",
          "order": 0,
          "tableOrViewName": "u_sw_license_user_alloc_archive",
          "aggregateFunction": "SUM",
          "aggregateField": "u_cost",
          "trendBy": "u_reporting_date",
          "trendInterval": "date",
          "removeMissingIntervalData": false
        }
      ]
    }
  },
  {
    "details": {
      "visualizationId": "vis_inactive_trend_by_licensed_by",
      "followFilter": true
    },
    "configurations": {
      "dataConfigurations": [
        {
          "sourceType": "table",
          "dataCategory": "trend",
          "order": 0,
          "tableOrViewName": "u_sw_license_user_alloc_archive",
          "aggregateFunction": "SUM",
          "aggregateField": "u_cost",
          "trendBy": "u_reporting_date",
          "trendInterval": "date",
          "removeMissingIntervalData": false,
          "filterQuery": "u_user.active=true", // im doubtful on this. but  kept for testing
          "groupBy": ["u_licensed_by"]
        }
      ]
    }
  }
]

Essentially, I want the filterQuery to be recomputed whenever the client state changes, so the chart refreshes automatically.

I’ve seen these related threads:

Those examples show how to shape a single data source ❌, but I haven’t found a clear way to bind a dynamic filter condition into a multi data source data visualization like mine.

Please advice.

Regards,

Shariq