Using parameters to filter a list in UI Builder

[Ian50]

I need to be able to use a client state parameter or page parameter to filter a list (e.g. simple list).

In the filter window there is no way to specify these parameters e.g. @state.clientparam

I have noticed this seems to be a limitation in the data visualization component too, would be a pretty common requirement I would think. Any ideas?

Thanks!

[Brad Tilton]

Yeah you won't be able to access the client state parameter value from inside the filter, but you can bind the filter's value to a client state parameter. The value of the whole filter is an encoded query, so yours would be something like active=true^ORcase.account=<sys_id>. 

Altogether that probably looks something like a parameter to hold your sysid, another to hold the full query, and a client script to build the query and set the parameter state. Then you bind your full query parameter to the component's filter property.

I think I do something similar in one of these videos, but I can't remember which one:

• UI Builder - Client state parameters, client scripts, and events.
• UI Builder - Quick Add Task Demo

[Ian50]

Hi Brad, you are correct, your first video shows that option for lists, thanks again.

Do you know if this is possible for data visualizations? They don't have the same filter option in their config settings so you can only filter within in the data source settings.

I ended up trying to get the filter component to do this but I couldn't get the examples working. I also tried on a data dashboard too and from my reading it looks like when using a data dashboard the filter component (and data viz's) should "just work" but it didn't for me either.

[Brad Tilton]

Unfortunately, I'm not as familiar with the data viz stuff, so I'm not sure what the best way forward is there. 

[Oleg · Accepted solution]

I'd recommend you to use script to build the filter. You need click on the button, which I marked red on the picture below

and to write the code which returns encoded filter. The code will be close to the following

/**
  * @param {params} params
  * @param {api} params.api
  * @param {any} params.imports
  */
function evaluateProperty({api}) {
	return "active=true^case.account=" + api.state.clientparam;
}

or the following

function evaluateProperty({api: { state }}) {
	return "active=true^case.account=" + state.clientparam;
}