Form.clear() does not clear ListView component

I have a Form with a ListView component and when I call .clear() all the other form fields clear, but the ListView does not. Is this a known issue or am I doing something wrong?

FWIW, this is a ListView to which I have added rows dynamically by binding the number of rows to a temporary state variable.

1 Like

Piling on here - I also have a ListView in a modal with a few components, but don’t have the dynamically added rows as in @vancea47’s example . After submitting the form and closing the modal, all the values are still present when I open the modal back up for a new submission. What is the best way to clear values from fields in a ListView after submission? Sorry to pile on @vancea47 - but I was just about to start a thread with almost the exact same question…

Hi everyone!

The form component’s .clear() option is really a proxy of the .setValue() or .clear() options that other child components have. If they don’t support the function themselves individually, it won’t be cleared.

The listview container itself doesn’t load inputs, and it’s a known request to support JS methods on child components of a listview (From when I was a customer! Add setValue to listview items) but it’s actually a fairly complicated addition to make.

Since those child components load other data sets and settings, you can clear the fields by updating the values that they are referencing. For example, if there was a textinput inside of the listview and you wanted the value to always be blank after the form is submitted you could have it’s default value settign be dependent on the query that is run when the form submits. Something simple like {{ queryName.timestamp?"":"" }} would reset that field to blank whenever the query ran

1 Like

Thanks @alex-w! You’ll have to forgive me as my javascript is lacking… If I’m understanding correctly, you’re saying that for each field, we can set the initial value using a ternary expression as above {{ queryName.timestamp ? "" : "" }}, which is saying if queryName.timestamp is truthy, then empty, otherwise empty? So, the expression will always always return empty as it doesn’t really matter what the expression evaluates to? Is that correct?

By the way, it works! That’s all that really matters, but just wanted to make sure I understand the logic.

Thanks for the help!!

Dan

The key part here is that {{ }} tags only re-evaluate when their inputs change, so every time the queryName runs it updates the value to the result of the snippet here. Even though it will always evaluate as “”, it will only update when that input is re-run

2 Likes

Got it, perfect - thanks a lot for the explanation!

Dan

1 Like