Use a date filter on a list component

[fauverism]

I've followed the tutorial Set up interactive filter on UI builder (for data visualization reports and List records) and I want to apply the same concept with a date filter and apply the start and end values to a column in a list component.

How can I populate the Initial value in the Actual start / `work_start` in the client state parameter? I was thinking that the Type would be JSON and there would be some way to have an object with 2 properties for start and end then I could use those values from the appliedFilter values to update.

Is this possible?

Filter example

Client state parameter

appliedFilter Payload

    

[JagjeetSingh]

I'm assuming that you have already got the filter working on your list and just want to populate the default values.

To achieve this you can create client script and use javascript's date() to get the start and end date. Then in your script you can use api.setState("STATE_PARAM_NAME", VALUE) to set your state parameters.

After that, trigger your script from page ready event. You can find this event by click on "body" in content pane and then set the script execution from Events on right hand side.

[fauverism]

Hey @JajeetSingh

Thanks so much for your reply. Unfortunately I do not have the filter working on my list. So I'll need to do that. 😀

Shouldn't I trigger the script on the list component?

[JagjeetSingh]

Okay. So, here is how you can do it.

1. Create a state parameter. let's call it filterQuery.

2. Bind it to the filter property of list component.

3. Now, set the value of this state parameter from a client script. In this script you'd get the values of start and end date and then compose an encoded query. Pass on this query to your state parameter.

Because this parameter is bound to the list component; the list would filter records based on it.

Yes, you can trigger this script from list component as well. You have to look for the right event so that it triggers before the records are presented in the list.

Also, it is good if you keep these two client scripts separate. One to set the initial values of start and end date. Other to set the query. The reason for this is that you can reuse the second script from your filter component. Just validate in script first if the event has start and end date; otherwise query from state parameters.