Adding Interactive filters to reports in Portal

[saibandaru]

Hi All,

I’ve been exploring the use of UI Builder to create interactive filters for reports from a portal perspective. Specifically, I came across the option to use Client State Parameters to link filters to reports. While I understand the concept at a high level, I’m facing challenges in implementing it effectively.

Could someone please help clarify the following:

1. Conceptual Understanding: How do Client State Parameters work in the context of UI Builder filters? What is their role in dynamically linking filter values to report data?
2. Implementation Guidance: What are the steps or best practices to configure these parameters correctly within UI Builder?
3. Troubleshooting: Are there common pitfalls or limitations I should be aware of while using this approach?

Any examples or documentation references would also be greatly appreciated.

Thanks

Sai Kiran Bandaru

[Community Alums]

Hi @saibandaru,

Client State Parameters act as shared variables that components can read from and write to. For example, a filter component can update a Client State Parameters, and a report or list can consume it to dynamically adjust its data.

To implement this effectively, I recommend reviewing these official resources:

• Creating Client State Parameters | ServiceNow Developer

• Working with Client State Parameters | ServiceNow Developer
• Exercise: Make a List Dynamic | ServiceNow Developer

If my response helped, please mark it as the accepted solution so others can benefit as well.

[Wasif]

Client State parameters are global variables in the context of a UI Builder development. These can be used in creating dynamic search specs, filters in a search or a typeahead component.

These are also used for passing data from one component to other, or refresh the data in some other component etc

Also a point to note, that whenever the client state parameters are updated, wherever its used, gets auto-refreshed, example if you selected a value in the Typeahead component and stored it in the client state parameter, and if that parameter is used in an EVAM component, it will be auto refreshed.

Regarding implementation, just use it like a global variable, setting, reseting, mutating where needed.

Troubleshooting is tricky in UI builder, but you can always log the event payloads etc to see what data you are passing or specific areas via a client script