UI Builder: How do I pass a data visualizations query to a list component?

Jacob Saaby Nie
Tera Contributor

So I have this dashboard page in UI builder.

On it I have 5 data visualizations.

 

1 is a donut type.

4 are just single scores.

 

Below that I have a simple list.

 

What I want to happen is when I click on a value in the donut, or on a single score, the lists filter changes to that of the data visualization.

 

I've gotton so far that I'm binding state parameters etc.

But how on earth do I pass the data visualizations filter to the list component, so it updates dynamically?

 

Does that filter have a name, e.g. @payload.filter  or something like that?

5 REPLIES 5

Hi @Bhuvan  

 

Thanks, but I already knew that one. I appreciate it though.

 

In that example, they only change an incident state which they then pass through a client state parameter.

 

But... I already defined the query in my data source. That same filter is what I'm interested in passing along to the list component.

 

If I was to follow the example in the link you sent me, I'd be forced to define each possible condition as a client state parameter, and then update those.

 

I'm guessing there's probably a way to pass the query instead. 

 

I just don't know how to get to the query and pass it.

Hi, Sadly for me the bind option is not available in the filter condition of data source. neither 

@STate."{client state param}" 

is working, returning as null. any idea what's going wrong?

kaushal_snow
Mega Sage

You can implement drill‑down from a Data Visualization to a List in UI Builder by adding a “Visualization clicked” event on the chart that uses Link to destination, passing the chart’s @payload.params.table, @payload.params.query, and optionally @payload.title into a client state parameter, and then binding that parameter to the Filter property of a Simple List (or Record List Bundle) on the target page so clicking any slice navigates to a prefiltered record list....

 

 

Thanks and Regards,
Kaushal Kumar Jha - ServiceNow Consultant - Lets connect on Linkedin: https://www.linkedin.com/in/kaushalkrjha/